Shopify Hydrogen Compliance Automation

Hydrogen Compliance

Shopify Hydrogen Compliance Automation PCI DSS GDPR CCPA PDPA WCAG Accessibility Cookie Consent Privacy Security Remix React Edge

Cookie Consent & Privacy

// === Hydrogen Cookie Consent Implementation ===

// // app/components/CookieConsent.tsx
// import { component$, useSignal } from '@builder.io/qwik';
//
// Hydrogen uses Remix, so:
// import { useEffect, useState } from 'react';
//
// export function CookieConsent() {
//   const [consent, setConsent] = useState(null);
//
//   useEffect(() => {
//     const saved = document.cookie
//       .split('; ')
//       .find(c => c.startsWith('cookie_consent='));
//     if (saved) setConsent(saved.split('=')[1]);
//   }, []);
//
//   const handleConsent = (choice) => {
//     document.cookie = `cookie_consent=; max-age=31536000; path=/`;
//     setConsent(choice);
//     if (choice === 'accepted') {
//       // Enable analytics, marketing scripts
//       window.gtag?.('consent', 'update', {
//         analytics_storage: 'granted',
//         ad_storage: 'granted',
//       });
//     }
//   };
//
//   if (consent) return null;
//   return (
//     

//       
We use cookies...
//        handleConsent('accepted')}>Accept All
//        handleConsent('essential')}>Essential Only
//     
//   );
// }

from dataclasses import dataclass

@dataclass
class ConsentCategory:
    category: str
    purpose: str
    examples: str
    default: str
    gdpr_required: bool

categories = [
    ConsentCategory("Essential",
        "จำเป็นสำหรับเว็บทำงาน",
        "Session Cookie, CSRF Token, Cart Cookie",
        "Always On (ไม่ต้องขอ Consent)",
        False),
    ConsentCategory("Analytics",
        "วิเคราะห์การใช้งานเว็บ",
        "Google Analytics, Hotjar, Plausible",
        "Off จนกว่า User Accept",
        True),
    ConsentCategory("Marketing",
        "โฆษณา Retargeting",
        "Facebook Pixel, Google Ads, TikTok Pixel",
        "Off จนกว่า User Accept",
        True),
    ConsentCategory("Personalization",
        "ปรับแต่ง UX ตาม User",
        "Product Recommendations, A/B Test",
        "Off จนกว่า User Accept",
        True),
]

print("=== Cookie Categories ===")
for c in categories:
    print(f"  [{c.category}] {c.purpose}")
    print(f"    Examples: {c.examples}")
    print(f"    Default: {c.default}")
    print(f"    GDPR Consent Required: {c.gdpr_required}")

Accessibility Automation

# === WCAG Accessibility Testing in CI/CD ===

# package.json scripts
# "test:a11y": "pa11y-ci --config .pa11yci.json",
# "test:a11y:lighthouse": "lhci autorun"

# .pa11yci.json
# {
#   "defaults": {
#     "standard": "WCAG2AA",
#     "runners": ["axe"],
#     "timeout": 30000
#   },
#   "urls": [
#     "http://localhost:3000/",
#     "http://localhost:3000/collections/all",
#     "http://localhost:3000/products/sample",
#     "http://localhost:3000/cart",
#     "http://localhost:3000/account/login"
#   ]
# }

# GitHub Actions
# - name: Accessibility Test
#   run: |
#     npm run build && npm run preview &
#     sleep 5
#     npx pa11y-ci --config .pa11yci.json
#     npx @lhci/cli autorun

@dataclass
class A11yCheck:
    check: str
    wcag: str
    tool: str
    auto: bool
    fix: str

checks = [
    A11yCheck("Color Contrast",
        "WCAG 1.4.3 (AA: 4.5:1)",
        "axe-core / Lighthouse",
        True,
        "ปรับสี Text/Background ให้ Contrast Ratio >= 4.5:1"),
    A11yCheck("Alt Text for Images",
        "WCAG 1.1.1",
        "axe-core / pa11y",
        True,
        "เพิ่ม alt attribute ทุก img tag"),
    A11yCheck("Keyboard Navigation",
        "WCAG 2.1.1",
        "Manual + axe-core",
        False,
        "ใช้ tabIndex focusVisible ทุก Interactive Element"),
    A11yCheck("ARIA Labels",
        "WCAG 4.1.2",
        "axe-core",
        True,
        "เพิ่ม aria-label aria-labelledby ที่ Custom Component"),
    A11yCheck("Heading Hierarchy",
        "WCAG 1.3.1",
        "axe-core / pa11y",
        True,
        "ใช้ H1 H2 H3 ตามลำดับ ไม่ข้าม Level"),
    A11yCheck("Form Labels",
        "WCAG 1.3.1",
        "axe-core",
        True,
        "ทุก Input ต้องมี label htmlFor เชื่อมกับ Input id"),
]

print("=== Accessibility Checks ===")
for c in checks:
    auto = "AUTO" if c.auto else "MANUAL"
    print(f"  [{c.check}] {c.wcag} [{auto}]")
    print(f"    Tool: {c.tool}")
    print(f"    Fix: {c.fix}")

Security & CI/CD

# === Security Compliance Pipeline ===

@dataclass
class SecurityCheck:
    check: str
    tool: str
    frequency: str
    gate: str

security_checks = [
    SecurityCheck("Dependency Vulnerability Scan",
        "Snyk / npm audit / Dependabot",
        "ทุก PR + Daily Scan",
        "Block PR ถ้ามี Critical/High"),
    SecurityCheck("SAST (Static Analysis)",
        "SonarQube / Semgrep / CodeQL",
        "ทุก PR",
        "Block PR ถ้ามี Vulnerability"),
    SecurityCheck("DAST (Dynamic Analysis)",
        "OWASP ZAP / Nuclei",
        "Weekly + Before Release",
        "Block Release ถ้ามี Critical"),
    SecurityCheck("Secret Detection",
        "GitLeaks / TruffleHog",
        "ทุก Commit (Pre-commit Hook)",
        "Block Commit ถ้ามี Secret"),
    SecurityCheck("CSP (Content Security Policy)",
        "Report-URI / Custom Middleware",
        "ต่อเนื่อง (Production)",
        "Monitor + Alert เมื่อ Violation"),
    SecurityCheck("SSL/TLS Check",
        "SSL Labs / testssl.sh",
        "Weekly",
        "Alert ถ้า Grade < A"),
]

print("=== Security Pipeline ===")
for s in security_checks:
    print(f"  [{s.check}]")
    print(f"    Tool: {s.tool}")
    print(f"    Frequency: {s.frequency}")
    print(f"    Gate: {s.gate}")

เคล็ดลับ

• Shopify Checkout: ใช้ Shopify Checkout ไม่ต้องจัดการ PCI DSS เอง
• Cookie: Block Third-party Script จนกว่า User Consent
• axe-core: ใช้ axe-core ใน CI/CD ตรวจ Accessibility ทุก PR
• CSP: ตั้ง Content Security Policy Header ป้องกัน XSS
• DSAR: สร้าง API สำหรับ Data Subject Request อัตโนมัติ

Shopify Hydrogen คืออะไร

React Remix Framework Custom Storefront Shopify SSR Edge Oxygen Storefront API GraphQL i18n Headless Commerce Performance Brand

สรุป

Shopify Hydrogen Compliance PCI DSS GDPR CCPA PDPA WCAG Cookie Consent axe-core Lighthouse Security Snyk SonarQube CI/CD Automation