Add a Content-Security-Policy on Shopify

Why it matters

Without a CSP the browser runs any script that ends up in your pages, so a single injection bug gives an attacker control of what visitors see and do. A policy limits where scripts, frames and plugins may load from.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

Not possible on Shopify. Shopify sets the response headers of an Online Store theme, and the store cannot add a Content-Security-Policy header. A meta http-equiv Content-Security-Policy tag in layout/theme.liquid is possible, but it cannot carry frame-ancestors or reporting, and apps inject scripts from many hosts, so a strict policy easily breaks the store. A Hydrogen storefront sets its policy in code, with createContentSecurityPolicy in app/entry.server.

Read the documentation ↗(opens in a new tab)

Related

• Reported by the Content-Security-Policy check
• Enforce the report-only Content-Security-Policy
• Send the Content-Security-Policy as an HTTP header
• Restrict where scripts can load from
• Replace 'unsafe-inline' scripts with nonces or hashes
• Remove 'unsafe-eval' from script-src
• Remove wildcard sources from script-src
• Set object-src to 'none'
• Add base-uri to the Content-Security-Policy
• Reduce reliance on inline styles
• Fix the Content-Security-Policy syntax