How to add Content-Security-Policy on Cloudflare

What does Content-Security-Policy do?

CSP is an allow-list for where your page may load scripts, styles, images, frames and connections from. It is the strongest defence against cross-site scripting.

Risk if missing: Without a CSP, any injected script (XSS, a compromised third‑party tag, a Magecart skimmer) runs with full access to your users' sessions and payment forms.

What is the Cloudflare configuration?

Add this to Rules → Transform Rules → Modify Response Header (or a Worker):

// Option A: Rules → Transform Rules → Modify Response Header → "Set static"
//   Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests

// Option B: Cloudflare Worker
export default {
  async fetch(request, env, ctx) {
    const res = await fetch(request);
    const out = new Response(res.body, res);
    const h = out.headers;
    h.set("Content-Security-Policy", "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests");
    return out;
  },
};

How do I add it step by step?

1. Open Rules → Transform Rules → Modify Response Header (or a Worker).
2. Paste the Content-Security-Policy configuration shown below.
3. Purge cache, then check the response with curl -I.
4. Run curl -I https://yourdomain.com and look for the content-security-policy line.
5. Scan your site on FixSecurityHeaders to confirm the grade improved.

How do I verify it worked?

curl -sI https://yourdomain.com | grep -i "content-security-policy"
# expected:
# content-security-policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests

What are the common mistakes?

• Deploy as Content-Security-Policy-Report-Only first and watch reports before enforcing.
• 'unsafe-inline' and 'unsafe-eval' in script-src remove most of the XSS protection. Use nonces or hashes.
• Analytics, chat widgets and payment iframes need their hosts added explicitly.
• Only one CSP header should be sent; multiple policies are intersected, which often blocks more than expected.
• Transform Rules work on all plans; Workers give full control.
• Cloudflare's own HSTS setting lives under SSL/TLS → Edge Certificates.

Quick reference

FAQ

Related guides

• Content-Security-Policy explained
• Content-Security-Policy on Nginx
• Content-Security-Policy on Apache
• Content-Security-Policy on IIS
• Content-Security-Policy on Vercel
• Strict-Transport-Security on Cloudflare
• X-Content-Type-Options on Cloudflare
• X-Frame-Options on Cloudflare
• Referrer-Policy on Cloudflare