// SECURITY / CONTENT_SECURITY_POLICY

// CONTENT_SECURITY_POLICY

Content Security Policy (CSP) is the most effective XSS mitigation available. Here's how to implement it in Shopify without breaking third-party integrations.

[ 01 ] CSP OVERVIEW

Content Security Policy is an HTTP header that instructs the browser which sources of content are trusted. A strict CSP prevents XSS execution even when injection vulnerabilities exist in the code.

CSP works by whitelisting trusted origins. Any inline script, external resource, or eval() call not explicitly allowed is blocked by the browser before execution.

[ 02 ] SHOPIFY CSP CONSTRAINTS

Shopify themes have specific CSP constraints due to the platform's architecture. Shopify injects inline scripts for analytics, checkout, and theme settings — so a strict script-src without 'unsafe-inline' requires nonces.

// SHOPIFY CSP REQUIREMENTS

→ cdn.shopify.com must be in script-src and img-src
→ Shopify checkout scripts must be whitelisted
→ Third-party apps inject their own scripts — each needs whitelisting
→ Google Analytics, Pixel, and GTM require separate directives
→ Shopify CDN uses *.shopifycdn.com and *.shopify.com

[ 03 ] RECOMMENDED DIRECTIVES

RECOMMENDED CSP HEADER — Shopify 2026

Content-Security-Policy:
  default-src 'self';

  script-src
    'self'
    'nonce-{shopify_nonce}'
    cdn.shopify.com
    *.shopifycdn.com
    *.shopify.com
    https://www.google-analytics.com
    https://www.googletagmanager.com
    https://connect.facebook.net;

  style-src
    'self'
    'unsafe-inline'
    cdn.shopify.com
    *.shopifycdn.com
    https://fonts.googleapis.com;

  img-src
    'self'
    data:
    blob:
    cdn.shopify.com
    *.shopifycdn.com
    *.shopify.com
    https://www.google-analytics.com;

  font-src
    'self'
    cdn.shopify.com
    https://fonts.gstatic.com;

  connect-src
    'self'
    *.shopify.com
    https://monorail-edge.shopifysvc.com;

  frame-src
    'self'
    *.shopify.com;

  object-src 'none';
  base-uri 'self';
  form-action 'self' *.shopify.com;

[ 04 ] IMPLEMENTATION GUIDE

Shopify doesn't support setting custom response headers natively in themes. Use one of these methods:

Shopify Hydrogen (custom)

Full control over response headers in Node.js middleware

Vercel / Netlify Edge

Add CSP via vercel.json or netlify.toml headers config

Cloudflare Workers

Inject CSP header at edge with Workers script

Report-Only mode

Start with Content-Security-Policy-Report-Only to test without blocking

VERCEL — vercel.json CSP header

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' cdn.shopify.com *.shopifycdn.com 'nonce-SHOPIFY_NONCE'; object-src 'none';"
        }
      ]
    }
  ]
}

[ 05 ] TESTING YOUR CSP

Always test CSP in report-only mode first. A too-strict CSP will break Shopify's own scripts.

CSP Evaluator (Google)

Analyze CSP directive strength

csp-evaluator.withgoogle.com

report-uri.com

Collect CSP violation reports

report-uri.com

Chrome DevTools

See CSP violations in real-time

Console > Security tab

Mozilla Observatory

Full security header grade

observatory.mozilla.org

// READY_TO_REPAIR

Start repairing your Shopify code now.

START_REPAIR