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 the reporting directives to the policy you pass to createContentSecurityPolicy(), and add 'report-sha256' to its script-src. Your URLs come from the Setup page:

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

report-to sends reports through the Reporting API, so set its two headers on the same response as the CSP header:

Reporting-Endpoints: default="https://abc123.report-uri.com/a/d/g"
Report-To: {"group":"default","max_age":31536000,"endpoints":[{"url":"https://abc123.report-uri.com/a/d/g"}],"include_subdomains":true}

'report-sha256' in script-src turns on CSP Integrity, which reports a hash of every script that loads.

If you are adding the header in front of a hosted storefront instead, put the same directives and headers in what 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 CSP reporting directives on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your CSP reporting directives from the Setup page.

Start your free trial