How do I generate a Content Security Policy?

Select which external domains your site loads scripts, styles, images, and fonts from. The generator builds the directives automatically. Start with default-src 'self' and add sources as needed.

What is the safest CSP I can add?

default-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; — this blocks all external resources and inline scripts. Add sources incrementally as you identify what your page needs.

Should I use report-only mode first?

Yes. Use Content-Security-Policy-Report-Only with your new policy first. Violations appear in the browser console without blocking anything. Enforce once violations stop.

Generator

CSP Header Generator

Build a Content Security Policy header by selecting your sources. The generator outputs a header value ready to paste into Nginx, Apache, Vercel, or Cloudflare — and includes the config block for your stack.

What each directive controls

Directive	Controls	Tip
default-src	Fallback for all types not listed	Start with 'self'
script-src	JavaScript files and inline scripts	Avoid unsafe-inline — use nonces
style-src	CSS files and inline styles	unsafe-inline usually required for CSS-in-JS
img-src	Images	Add data: for base64 images
connect-src	fetch, XHR, WebSocket, EventSource	Required for any API calls
font-src	Font files	Google Fonts needs fonts.gstatic.com
frame-ancestors	Who can embed your page in an iframe	'none' blocks clickjacking
object-src	Plugins (Flash, Java)	Always set to 'none'

Deploy in report-only mode first

Use Content-Security-Policy-Report-Only instead of Content-Security-Policy when first deploying. Violations appear in the browser console without blocking anything — letting you catch missing sources before enforcing.

If you have a live page and want to generate a CSP from what it actually loads, use CSPFixer instead — it scans your URL and builds the policy automatically.

Scan a live URL and auto-generate CSP → CSPFixer