How to fix missing content security policy on Shopify

Steps for Shopify

1. Shopify's core storefront does not allow arbitrary HTTP response headers via the admin UI — the platform controls its own server headers.
2. For custom CSP additions on storefront pages, use a Shopify app such as 'CSP Header Manager' or 'Locksmith' that injects security headers via a Shopify script tag workaround, or handle it at the edge.
3. The most reliable approach for Shopify is to place the store behind a CDN/proxy such as Cloudflare (free tier available): in Cloudflare dashboard → Security → WAF → Transform Rules → HTTP Response Header Modification, add a new rule to set the `Content-Security-Policy` header value for your storefront domain.
4. For Shopify Plus merchants using a custom storefront (Hydrogen/Oxygen or headless), add the CSP header in your server middleware: in your Hydrogen app, open `server.ts` and add `res.headers.set('Content-Security-Policy', '...')` inside your request handler.
5. Always test at checkout — Shopify's hosted checkout (checkout.shopify.com) is a separate domain and outside your CSP scope; focus your policy on your storefront domain.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; object-src 'none'; frame-ancestors 'none'; base-uri 'self';

What is missing content security policy?

A Content Security Policy (CSP) is an HTTP response header your web server sends to a visitor's browser. It acts like a whitelist, telling the browser exactly which domains and sources are allowed to load scripts, stylesheets, images, fonts, and other content on your site. If a piece of code tries to load from a source not on your list — for example, a malicious script injected by an attacker — the browser simply refuses to run it. Without a CSP header, the browser has no such instructions and will run whatever code it finds on the page.

Without a CSP, your store is significantly more vulnerable to Cross-Site Scripting (XSS) and data-injection attacks — the #3 risk in the OWASP Top Ten. Attackers who find even a small vulnerability in a plugin, theme, or third-party widget can inject malicious scripts that steal customer payment card details, session cookies, or personal data directly from the browser (a technique known as "formjacking" or "Magecart"). A successful attack can result in PCI-DSS compliance failures, card-brand fines, regulatory penalties under GDPR or CCPA, and severe damage to customer trust. Search engines also consider site security as a ranking signal, and a compromised site can be blocklisted by Google, wiping out organic traffic overnight.

See the complete Missing content security policy guide for every platform and the full background.