Restrict where scripts can load from on Shopify

Why it matters

The policy sets neither script-src nor default-src, so it does nothing against injected scripts, the main thing a CSP is for. Add a script-src that lists only your own origin and the services you use, or that uses nonces.

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 its own policy only covers framing and upgrades, so the store cannot add script-src to it. A meta http-equiv Content-Security-Policy tag in layout/theme.liquid could, but Shopify and apps load scripts from many hosts and print inline scripts, 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
• Add a Content-Security-Policy
• Enforce the report-only Content-Security-Policy
• Send the Content-Security-Policy as an HTTP header
• 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