---

CloudFlare CSP Header Example

The easiest way to add a Content-Security-Policy (CSP) response header to your CloudFlare site is to create a Modify Response Header rule, under Transform Rules. From the CloudFlare Dashboard:

1. Login to CloudFlare
2. Select your site
3. Expend the Rules menu in the left nav
4. Click on Transform Rules
5. Select Modify Response Header
6. Click the Create Rule button

Creating a CloudFlare Respond Header Transform Rule for CSP

1. Give the rule a name, for example: CSP
2. If you want to add the header to all pages on your site select All incoming requests. Otherwise you can create a Custom filter expression and match certain URIs, etc.
3. Under the Then section, select Add to add a new CSP header to the HTTP response.
4. Under Header name enter: Content-Security-Policy or Content-Security-Policy-Report-Only if you don't want to block anything yet.
5. Under Value enter your CSP policy, a quick easy one to start with is: default-src 'self', which will allow only scripts, images, etc from the same origin.

In the above example we are simply setting a policy:

default-src 'self';

Chances are you will need something more involved than that

What goes inside a Content Security Policy?

If you're not sure what default-src 'self'; means, then check out the Content Security Policy reference for details.

Using _headers with CloudFlare Pages

If you are using CloudFlare Pages another way to add a HTTP response header is to place a file named _headers in the publish directory of your site. The syntax for that file might look like this:

/*
  Content-Security-Policy: default-src 'self';

You can create different polices for different URI paths using the _headers file if you want to as well.

Using CloudFlare Analytics with CSP

If You have CloudFlare Analytics enabled for your site you will need to make sure you allow their script to load. The script that is injected looks something like this:

<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v123" integrity="sha512-yadayada" data-cf-beacon='{"rayId":"1","r":1,"version":"2023.10.0","token":"2"}' crossorigin="anonymous"></script>

Then you would need a policy like this:

default-src 'self';script-src 'self' static.cloudflareinsights.com

Note that cloudflare will also post an XHR request to /cdn-cgi/rum under your same domain, this is covered by our default-src 'self' policy

, but more specifically it the XHR fetch request requires that you have connect-src 'self' or similar policy.

---