Content-Security-Policy Generator
Build a CSP header to stop XSS and clickjacking. Pick directives and sources — copy the ready-to-paste header.
default-srcFallback for any directive you don't setscript-srcWhere scripts can load from (XSS protection)style-srcWhere styles can load fromimg-srcWhere images can load fromconnect-srcfetch/XHR/WebSocket endpointsfont-srcWhere fonts can load fromframe-ancestorsWho can iframe your site (clickjacking)Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; connect-src 'self' https:; font-src 'self' https: data:; frame-ancestors 'self'
⚠️ 'unsafe-inline'/'unsafe-eval' weaken XSS protection significantly. Use them only as a stopgap — move inline scripts to files and drop these as soon as you can.
Add this as a response header on every page (in Next.js, use the headers() config in next.config.js). Test in report-only mode first: Content-Security-Policy-Report-Only.
Why this matters
Your strongest XSS defense
A solid CSP limits the blast radius of any cross-site scripting bug — it's the seatbelt that catches what input-sanitization misses.
Stops clickjacking too
The frame-ancestors directive controls who can embed your site in an iframe, blocking clickjacking overlays.
No guesswork
Pick directives visually, start from a strict or balanced preset, and copy a header that's correct by construction.
How it works
Start from the Strict or Balanced preset, or build from scratch.
Toggle the allowed sources for each directive (script-src, style-src, etc.).
Copy the generated Content-Security-Policy header and add it to your server responses.
Frequently Asked Questions
What is a Content-Security-Policy (CSP)?
CSP is an HTTP response header that tells the browser which sources of scripts, styles, images, and other resources it's allowed to load. A good CSP is the strongest browser-enforced defense against cross-site scripting (XSS) — it limits the damage when (not if) an injection bug slips through.
How do I add a CSP to my site?
Send the generated header on every HTML response. In Next.js, add it to the headers() config in next.config.js. In nginx, use add_header. In Express, use helmet or res.setHeader. Apply it site-wide, not just on one page.
What does 'unsafe-inline' do and should I use it?
'unsafe-inline' lets inline <script>/<style> and on* attributes run, which defeats much of CSP's XSS protection. Avoid it where possible — move inline scripts to external files. If you must use it temporarily, treat it as tech debt and remove it.
What's the difference between strict and balanced presets?
Strict locks everything to 'self' (and 'none' for frame-ancestors) — maximum protection, but you may need to add specific hosts. Balanced allows common conveniences (inline styles, https images/fonts) so it's less likely to break existing sites while still protecting scripts.
How do I test a CSP without breaking my site?
Deploy it first as Content-Security-Policy-Report-Only. The browser will report violations without blocking anything, so you can see what would break, fix your sources, then switch to the enforcing Content-Security-Policy header.
Does frame-ancestors replace X-Frame-Options?
Yes — frame-ancestors 'self' (or 'none') is the modern, more flexible way to prevent clickjacking. Modern browsers honor frame-ancestors over X-Frame-Options, though setting both doesn't hurt for older clients.
Related Free Tools
Security Headers Checker
Check CSP, HSTS, and other headers on a live site
API Key Leak Scanner
Find exposed secrets in your JS bundles
JWT Decoder
Decode and inspect JSON Web Tokens
SSL / HTTPS Checker
Verify HTTPS and HSTS configuration
SPF / DMARC Checker
Check email-spoofing protection records
Security Scanner
Full 38-check security audit
Want the complete picture?
Run a full AI visibility audit — 25+ signals, fix roadmap, and AI-generated files.