About this tool
Assemble Content-Security-Policy directives for SPAs — script-src, style-src, connect-src, and friends — then copy a header-ready policy string.
Start strict, then loosen only what your bundler and third parties require. Pair with the CORS Header Generator for API access rules, and read the CSP for SPAs guide on the blog.
Policy drafting runs entirely in your browser.
How to use
- Choose directive sources (default-src, script-src, style-src, img-src, and friends).
- Generate a Content-Security-Policy header or meta tag value.
- Start in Report-Only if you are tightening an existing production app.
- Deploy the policy and watch console/report endpoints for blocked assets.
Example
Strict self-hosted scripts
Input
default-src 'self'; script-src 'self'
Output
Content-Security-Policy: default-src 'self'; script-src 'self'
Limitations
- A policy that works locally can still break third-party analytics or CDNs in production.
- Nonce/hash workflows require server cooperation — this builder outputs static source lists.
- Does not validate that every asset on your live site complies with the policy.
Related guides
1Related tools
2Frequently asked questions
What does the CSP Builder do?
Build Content-Security-Policy headers and meta tags for your app. Runs in your browser — no install, no account.
How do I use the CSP Builder?
Choose directive sources (default-src, script-src, style-src, img-src, and friends). Generate a Content-Security-Policy header or meta tag value. Start in Report-Only if you are tightening an existing production app. Deploy the policy and watch console/report endpoints for blocked assets.
Is the CSP Builder free?
Yes. No signup, no usage limits, no paywall.
Does the CSP Builder upload my data?
No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.
What are the limitations of the CSP Builder?
A policy that works locally can still break third-party analytics or CDNs in production. Nonce/hash workflows require server cooperation — this builder outputs static source lists. Does not validate that every asset on your live site complies with the policy.