Cloudflare Pages & CSP | Zenith Stack Docs

Content Security Policies on Cloudflare Pages have a few non-obvious requirements.

Cloudflare auto-injects its Insights beacon

Cloudflare Pages automatically injects https://static.cloudflareinsights.com/beacon.min.js into pages. If you have a CSP, this script will be blocked unless you whitelist it.

Add to your _headers file:

script-src ... https://static.cloudflareinsights.com;
connect-src ... https://cloudflareinsights.com;

Every external service needs both script-src and connect-src

A common mistake: adding a script domain to script-src but forgetting connect-src. The script loads fine but all its network requests are blocked silently.

Rule of thumb for any analytics or tracking script:

Domain where the script file lives → script-src
Domain the script sends data to → connect-src

These are often the same domain, but not always (e.g. GTM loads from googletagmanager.com but fires to google-analytics.com).

Example _headers for a typical self-hosted stack

/*
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com https://plausible.yourdomain.com; connect-src 'self' https://cloudflareinsights.com https://plausible.yourdomain.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self';

Adjust per service. Always test with browser devtools → Console after deploying.