Skip to content
MDView as Markdown

Shopify

CSP on Shopify depends entirely on how your storefront is built. On a headless storefront built with Hydrogen you get first-class CSP support with nonces. On a hosted Liquid storefront you do not control the response headers, so your options are narrower.

The checkout is a separate question again: Shopify hosts it, and Shopify sets its policy.

What Shopify gives you

  • Hydrogen (headless): the createContentSecurityPolicy() utility, called in entry.server.jsx, returns a nonce, a NonceProvider and the header value. The nonce reaches components through the useNonce() hook, and Hydrogen's Script component attaches it automatically.
  • Custom directives can be passed straight into createContentSecurityPolicy() to extend the default policy, which already accounts for cdn.shopify.com.
  • Hosted Liquid storefronts: no control panel setting for response headers. To deliver a CSP you need something in front of the storefront that can add one - see our Cloudflare page.
  • Checkout: hosted and controlled by Shopify, with Shopify's own security headers. It is not yours to configure.

Sending reports to Report URI

In Hydrogen, add a reporting directive to the policy you pass to createContentSecurityPolicy(). Your URL comes from the Setup page:

report-uri https://abc123.report-uri.com/r/d/csp/reportOnly

If you are adding the header in front of a hosted storefront instead, put the same directive in the header value you inject at the edge.

Things to watch for

  • Nonces need to be generated per response, which a hosted Liquid storefront cannot do. On those storefronts, hashes are the practical route for inline script content, and they have to be regenerated whenever a theme edit changes the script.
  • Apps installed from the Shopify App Store add scripts you did not write. Run report-only for long enough to see all of them before enforcing anything.
  • A policy that works on your storefront says nothing about the checkout, so do not assume checkout coverage from storefront reports.

Official documentation

Shopify - Add a content security policy

Start Monitoring with Report URI

Already using us for CSP? Find your report-uri value on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your report-uri value from the Setup page.

Start your free trial