Missing content security policy
Moderate effortAdd a Content-Security-Policy (CSP) response header to every page so browsers block unauthorized scripts, styles, and resources from loading.
What it is
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.
Why it matters
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.
How to fix it
- Audit your site's legitimate resource sources: list every domain that serves scripts (e.g., Google Analytics, payment widgets, chat tools), stylesheets, fonts, and images you intentionally use.
- Draft a CSP policy starting with a restrictive baseline — e.g., `default-src 'self'; script-src 'self' [your-approved-domains]; style-src 'self' 'unsafe-inline' [your-approved-cdn]; object-src 'none'; frame-ancestors 'none'` — adding only what you actually need.
- Deploy the policy first in report-only mode using the `Content-Security-Policy-Report-Only` header with a `report-uri` or `report-to` endpoint so you can catch violations without breaking the site.
- Review violation reports for 1–2 weeks, adding any legitimately blocked sources to your allowlist and removing any genuinely unexpected ones.
- Switch the header from `Content-Security-Policy-Report-Only` to `Content-Security-Policy` to actively enforce the policy.
- Re-test critical user flows (checkout, login, account pages) to confirm nothing is broken, and schedule a periodic review whenever you add new third-party tools.
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';Fix it on your platform
Pick your platform for the exact steps.
How to fix missing content security policy on Shopify
- Shopify's core storefront does not allow arbitrary HTTP response headers via the admin UI — the platform controls its own server headers.
- 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.
- 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.
- 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.
- 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.
How to fix missing content security policy on Shopify Plus
- Same as Shopify above, with the added option of a custom domain checkout.
- For Hydrogen/Oxygen headless storefronts, open `server.ts` in your project root, locate the `fetch` handler, and inject the header: `response.headers.set('Content-Security-Policy', "default-src 'self'; script-src 'self' cdn.shopify.com; object-src 'none'");`
- Deploy via Oxygen (Shopify's edge hosting) and verify headers using browser DevTools → Network tab → select any page response → Headers.
How to fix missing content security policy on WooCommerce
- Install the free WordPress plugin 'Headers Security Advanced & HSTS WP' or 'HTTP Headers' (by RaMMicHaeL) from the WordPress plugin repository: WP Admin → Plugins → Add New → search plugin name → Install & Activate.
- Alternatively, add the header directly in your theme's `functions.php` (or a site-specific plugin): `add_action('send_headers', function(){ header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' [your-approved-domains]; object-src 'none'"); });`
- Or add it to your `.htaccess` (Apache) file in the public root: `Header set Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none'"`
- For Nginx servers, add `add_header Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none'";` inside the relevant `server {}` block in your Nginx config file.
- Use the plugin's built-in violation reporting or a free service like report-uri.com to monitor for broken resources before enforcing.
How to fix missing content security policy on WordPress.org
- Install the 'HTTP Headers' plugin (by RaMMicHaeL) or 'Headers Security Advanced & HSTS WP': WP Admin → Plugins → Add New → search → Install & Activate.
- Go to Settings → HTTP Headers (or the plugin's dashboard), find Content-Security-Policy, enable it, and paste your policy string.
- Alternatively, edit `wp-config.php` or add to `functions.php`: `add_action('send_headers', function(){ header("Content-Security-Policy: default-src 'self'; object-src 'none'"); });`
- If you have server access, add the header to `.htaccess` (Apache) or your Nginx site config as described in the WooCommerce steps above.
How to fix missing content security policy on BigCommerce
- BigCommerce does not expose raw HTTP response header configuration in the merchant admin for its managed storefront.
- The recommended approach is to proxy your storefront through Cloudflare: activate Cloudflare for your domain, then go to Cloudflare Dashboard → your domain → Rules → Transform Rules → Modify Response Headers → Create Rule → Add Header → Name: `Content-Security-Policy`, Value: your policy string → Save and Deploy.
- For BigCommerce headless (Next.js / React) storefronts hosted on Vercel or Netlify: in `next.config.js` add a `headers()` export with your CSP value, or in `netlify.toml` add `[[headers]]` with `Content-Security-Policy`.
- Test by visiting your storefront, opening DevTools → Network → click the HTML document response → Headers tab and confirm `content-security-policy` appears.
How to fix missing content security policy on Wix
- Wix does not allow custom HTTP response headers on standard Wix-hosted sites via the dashboard.
- Use Wix's built-in security settings where available: Wix Dashboard → Settings → Security, and enable any available content security options.
- For Wix sites on a custom domain proxied through Cloudflare, add the CSP header via Cloudflare Transform Rules as described above (Cloudflare Dashboard → Rules → Transform Rules → Modify Response Headers).
- If you use Wix Velo (formerly Corvid) and have a custom backend, you can set headers on HTTP Functions: in your Velo backend file, return `response.headers.set('Content-Security-Policy', '...')` in your `http-functions.js`.
- Note: Wix's hosted infrastructure limits full CSP control; a Cloudflare proxy is the most practical enforcement option.
How to fix missing content security policy on Wix Studio
- Same constraints as Wix — Wix Studio does not expose server-level HTTP headers via the editor.
- Use Cloudflare as a proxy in front of your Wix Studio site and configure the CSP header via Cloudflare Transform Rules (Dashboard → your domain → Rules → Transform Rules → Modify Response Headers).
- For Velo-enabled projects, use Wix's backend HTTP Functions to set headers programmatically on API responses.
How to fix missing content security policy on Squarespace
- Squarespace does not support custom HTTP response headers through its admin panel.
- Proxy your Squarespace site behind Cloudflare (change your domain's nameservers to Cloudflare), then set the CSP header via Cloudflare Dashboard → your domain → Rules → Transform Rules → Modify Response Headers → Add `Content-Security-Policy` header.
- Ensure your Cloudflare CSP policy includes Squarespace's own CDN domains (e.g., `static1.squarespace.com`, `use.typekit.net` if using custom fonts) to avoid breaking your site design.
- Test the live site with browser DevTools after deployment to confirm no critical resources are blocked.
How to fix missing content security policy on Webflow
- Webflow hosted sites do not allow direct HTTP header configuration through the Webflow Designer or dashboard for standard plans.
- The recommended method is to proxy through Cloudflare: point your domain to Cloudflare, then go to Cloudflare Dashboard → Rules → Transform Rules → Modify Response Headers → Create Rule → set `Content-Security-Policy` to your policy string.
- If you export your Webflow site and self-host (e.g., on Netlify or Vercel): for Netlify, add a `[[headers]]` block in `netlify.toml`; for Vercel, add a `headers` array in `vercel.json` with your CSP value.
- Webflow sites commonly load resources from `uploads-ssl.webflow.com`, `fonts.googleapis.com`, and any integrations you've added — include these in your `script-src` and `font-src` directives.
How to fix missing content security policy on Adobe Commerce (Magento)
- Adobe Commerce (and Magento Open Source) has built-in CSP support since version 2.3.5. Go to Admin Panel → Stores → Configuration → Security → Content Security Policy.
- Set 'Enable CSP in Report Only Mode' to 'Yes' first to collect violations without breaking the site, then configure your policy directives in the same panel.
- Alternatively, edit your theme's `csp_whitelist.xml` file (located at `app/design/frontend/[Vendor]/[Theme]/etc/csp_whitelist.xml`) to whitelist specific external domains per directive.
- For server-level enforcement (recommended in addition to application-level), add `Header always set Content-Security-Policy "..."` to your Apache `.htaccess` or virtual host config, or `add_header Content-Security-Policy "..."` to your Nginx `server {}` block.
- Run `bin/magento cache:flush` after any configuration changes, then verify with browser DevTools → Network → document response headers.
How to fix missing content security policy on Magento Open Source
- Same as Adobe Commerce above — CSP configuration is in Admin → Stores → Configuration → Security → Content Security Policy (available from Magento 2.3.5+).
- Edit `csp_whitelist.xml` in your custom theme or module under `etc/` to add trusted external origins.
- Set `restrict_mode` to `0` initially (report-only) then to `1` (enforce) in your XML or admin config once violations are resolved.
- Flush cache: `bin/magento cache:flush` after changes.
How to fix missing content security policy on PrestaShop
- In PrestaShop 1.7.7+ go to Back Office → Advanced Parameters → Administration, and look for the 'Security' section — enable the HTTP headers / CSP option if available.
- For full control, edit your `.htaccess` file in the PrestaShop root directory (Apache): add `Header always set Content-Security-Policy "default-src 'self'; object-src 'none'"`
- For Nginx, add the `add_header` directive to your site's server block config.
- Alternatively, install a security-headers module from the PrestaShop Marketplace (search 'security headers') to manage CSP via the admin UI.
- Test checkout flows carefully — PrestaShop payment modules often load external scripts that must be whitelisted.
Does your site have this issue?
Run a free SEOLZ audit to find missing content security policy — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does missing content security policy matter?
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.
How do I fix missing content security policy?
Add a Content-Security-Policy (CSP) response header to every page so browsers block unauthorized scripts, styles, and resources from loading.
Authoritative references
- OWASP Top Ten — OWASP
- OWASP Cheat Sheet Series — OWASP
- Secure Headers Project — OWASP
- Content-Security-Policy (CSP) — MDN
- Website security — MDN