Cloudflare CSP Generator
Generate Cloudflare Pages CSP headers for scripts, styles, images, fonts, APIs, analytics, iframes, report-only mode, and security presets.
Base Directives
Common Integrations
Custom Sources (comma separated)
File Location
Where to place your _headers
public/_headersout/_headers- •Next.js server-side redirects in next.config.ts do not work for static export on Cloudflare Pages.
- •Use output: 'export' in your Next.js config.
- •Place _headers in the public directory before building.
- •Cloudflare Pages should deploy the 'out' directory.
- 'unsafe-inline' allows execution of inline scripts/styles and severely weakens CSP.
/* Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'
Quick Summary
_headers file, protecting your users from XSS attacks.What is this tool?
A Content Security Policy (CSP) is one of the most powerful, yet most difficult to configure, security tools available for the web. It tells the browser exactly which external domains are allowed to load scripts, styles, images, and data on your page.
How to Use This Tool
- Select your framework to get accurate file placement instructions.
- Choose whether you want to Enforce the policy or use Report-Only mode (recommended for starting).
- Enable common third-party services like Google Analytics, Google Fonts, or Plausible Analytics.
- Add any custom domains for your APIs, images, or CDNs.
- Copy the generated CSP directive into your
_headersfile.
What This Tool Generates
- A fully formed
Content-Security-PolicyorContent-Security-Policy-Report-Onlystring.
Best Practices
- Always start with 'default-src \'self\';' to block everything by default, then explicitly allow specific sources.
- Avoid using \'unsafe-inline\' for scripts if possible, as it significantly weakens XSS protection. Try to use nonces or hashes instead.
- Use Report-Only mode for at least a week on production traffic to catch edge cases before enforcing.
Common Mistakes
- Blocking data: URIs in img-src, which breaks inline SVG rendering or base64 placeholders used by Next.js and Astro image components.
- Forgetting to allow Cloudflare's own analytics scripts (if enabled) in your CSP.
- Applying the CSP header to static assets (like /images/*) where it isn't necessary, unnecessarily increasing response sizes.
Security Notes
- If you must use third-party scripts, try to host them yourself or use Subresource Integrity (SRI) alongside your CSP.
- Set up a report-uri or report-to endpoint to collect CSP violations so you are alerted when someone tries to inject malicious scripts.
Frequently Asked Questions
What is CSP in Cloudflare Pages?
How do I add CSP to _headers?
Should I use CSP report-only?
Why did CSP break my site?
How do I allow Google Fonts in CSP?
How We Keep Your Configs Safe & Valid
Built-in Error Checking
Every file is checked against official rules. We catch missing fields and bad syntax. YAML indentation errors are flagged right away. Kubernetes, Terraform, and Docker specs are all covered. API versions and labels are verified too. You get valid output every time you generate.
100% Private & Local
All tools run in your browser only. Your API keys never leave your machine. We do not use any tracking scripts. No data is sent to any server. Passwords and secrets stay on your device. Crypto operations use the Web Crypto API. Your privacy is fully protected at all times.
Secure Settings by Default
Configs use safe defaults out of the box. Containers run as non-root users. Root filesystems are set to read-only. Dangerous Linux capabilities are dropped. Network policies limit pod-to-pod traffic. TLS 1.3 is enabled for web servers. Security headers are added where needed.
Ready for CI/CD & Git
Output files are ready for your Git repo. Use them with ArgoCD, Flux, or GitHub Actions. Files use clear formatting and comments. Code review is easy for your team. Indentation and key order are consistent. Test in staging before going to production. Every file is clean and well-structured.
Infrastructure as Code
Store configs in Git alongside your code. Terraform modules include typed variables. Backend configs support remote state locking. Outputs work across multiple modules. Ansible playbooks use clear task steps. Chef and Puppet configs are also supported. Every file works with version control tools.
Monitoring & Tracing
Set up Prometheus with auto-discovery rules. Create Grafana dashboards with template variables. Add alerting rules with severity labels. Use OpenTelemetry for trace collection. Forward logs to Loki or Elasticsearch. Connect to Jaeger or Tempo for tracing. Monitor metrics, logs, and traces together.
Container & Docker Safety
Dockerfiles use multi-stage builds for small images. Base images are pinned to exact versions. Dev files are excluded from final images. Health checks are added for orchestrator use. Containers switch to non-root users. Docker Compose uses named volumes and networks. Resource limits are set in deploy configs.
Multiple Output Formats
Export as YAML, JSON, HCL, or TOML. Kubernetes uses YAML with proper separators. Terraform uses HCL with correct escaping. JSON output has consistent indentation. Copy to clipboard with one click. Preview output with syntax highlighting. Line numbers help you review quickly.