Why does this tool have a Cloudflare Web Analytics toggle specifically?

Cloudflare Web Analytics loads its beacon script from static.cloudflareinsights.com, a source that a strict CSP would otherwise block. Since it's a common addition to Cloudflare Pages sites specifically, this tool includes it as a one-click source toggle instead of requiring you to look up and type the exact URL.

What's the difference between Content-Security-Policy and Content-Security-Policy-Report-Only?

The enforced header blocks any resource that violates the policy. The Report-Only variant evaluates the same policy and can log violations (if you configure a report-uri/report-to endpoint) but never blocks anything, letting you validate a new policy against real traffic before switching it to enforced.

Why only these five directives?

script-src, style-src, img-src, font-src, and connect-src cover the sources most sites actually need to restrict day-to-day (scripts, stylesheets, images, web fonts, and fetch/XHR/WebSocket targets). If you need a broader policy with directives like frame-ancestors or object-src, add them by hand to this tool's output.

Does 'self' cover my own domain automatically?

Yes, 'self' means the exact same scheme, host, and port the page was served from, which for a Cloudflare Pages site is your pages.dev URL or custom domain. You don't need to list your own domain explicitly as a source.

Cloudflare Pages CSP Generator - Content-Security-Policy Builder

Overview

Introduction

Writing a Content-Security-Policy by hand means remembering each directive's exact source syntax, and it's especially easy to forget that a third-party script like Cloudflare Web Analytics needs its own source added or it'll be silently blocked.

This tool builds the policy string directive by directive, with one-click toggles for the sources Cloudflare Pages sites use most often.

What Is Cloudflare Pages CSP Header Generator?

A Content-Security-Policy header builder covering script-src, style-src, img-src, font-src, and connect-src, each as its own row with a toggle to enable it, quick-add buttons for self/Cloudflare Web Analytics/Google Fonts, and a free-text field for any other source.

It also has a report-only toggle that swaps the output header name to Content-Security-Policy-Report-Only for safe testing.

How Cloudflare Pages CSP Header Generator Works

Each enabled directive row collects its selected known sources (translated to their real values, like 'self' or the Cloudflare Web Analytics URL) plus any custom sources you type, space-separated.

The rows are joined into a single header value with `;` between directives, and prefixed with either `Content-Security-Policy:` or `Content-Security-Policy-Report-Only:` depending on the report-only toggle.

When To Use Cloudflare Pages CSP Header Generator

Use it when adding a CSP to a Cloudflare Pages project for the first time, especially if you're also using Cloudflare Web Analytics or Google Fonts and don't want to look up their exact source URLs.

It's also useful for quickly testing policy changes in report-only mode before committing to an enforced policy.

Often used alongside Cloudflare Pages Security Headers Generator, Cloudflare Pages _headers File Generator and CSP Header Generator.

Features

Advantages

Bundles the exact source URLs for Cloudflare Web Analytics and Google Fonts, so you don't need to look them up separately.
Keeps each directive independently toggleable, so the output only includes directives you actually want to restrict.
Makes switching between report-only and enforced a single toggle, encouraging the safer testing-first workflow.

Limitations

Only covers five directives; a comprehensive policy may also need frame-ancestors, object-src, base-uri, or form-action, which aren't included here.
Doesn't generate nonces or hashes for inline scripts/styles, if your site needs those, add them manually to the relevant directive's custom sources field.

Examples

A policy allowing self plus Cloudflare Web Analytics for scripts

Input

script-src: self + Cloudflare Web Analytics enabled; img-src: self enabled; report-only: off

Output

Content-Security-Policy: script-src 'self' https://static.cloudflareinsights.com; img-src 'self'

Only the two enabled directives appear, each with its selected sources space-separated, joined by a semicolon.

Best Practices & Notes

Best Practices

Start every policy with report-only mode enabled and check your browser console for violation warnings before enforcing it.
Add Google Fonts sources to both style-src (for the stylesheet) and font-src (for the actual font files) if you self-host through Google Fonts' CDN.
Keep the policy as narrow as you can; only add a source when something is actually being blocked that you intend to allow.

Developer Notes

Known sources are stored as a lookup from a short label (e.g. "cloudflare-analytics") to their real CSP source value, so the UI can offer a one-click toggle while the generated header always contains the correct literal value; custom sources are split on whitespace and appended after the known-source values for each enabled directive.

Cloudflare Pages CSP Header Generator Use Cases

Adding a Content-Security-Policy to a Cloudflare Pages project that uses Cloudflare Web Analytics
Testing a new CSP in report-only mode before rolling it out as enforced
Building a minimal, directive-by-directive policy for a small static site

Common Mistakes

Enabling Cloudflare Web Analytics on the site but forgetting to add its source to script-src, causing the CSP to silently block the analytics beacon.
Switching straight to an enforced policy without a report-only testing period first, risking breaking legitimate resources in production.

Tips

Paste this tool's output value into the Cloudflare Pages Security Headers Generator's CSP field if you want it combined with HSTS, Referrer-Policy, and the other common security headers in one _headers block.

Cloudflare Pages CSP Header Generator