Build a Content-Security-Policy Header Without Memorizing Syntax
This csp header generator lets you build a Content-Security-Policy header field by field instead of hand-typing directive syntax from memory. As a content security policy generator, it exposes the eight directives most sites actually need (default-src, script-src, style-src, img-src, connect-src, font-src, frame-ancestors, object-src) plus the upgrade-insecure-requests and Report-only toggles, so you can put together a real, working policy without misremembering a semicolon or a quote. The output isn't just the raw header value either, it's a ready-to-paste nginx add_header line and an Express res.setHeader() snippet, so whatever you're deploying to, there's no manual reformatting step in between.
How to Use This CSP Generator
Fill in whichever directives your site actually needs, default-src and object-src come pre-filled with sensible defaults ('self' and 'none'), the rest are blank until you set them. Toggle upgrade-insecure-requests to add that directive automatically, and Report-only mode to generate a Content-Security-Policy-Report-Only header instead of an enforcing one, useful for testing a policy before turning it on for real. Click Generate, then copy the raw header, or grab the nginx or Express snippet directly, this is the fastest way to generate csp header output without writing directive syntax by hand.
What Each Directive Actually Controls
A csp policy builder is only useful if you know what each field actually restricts, here's what each of the eight directives this tool exposes controls:
| Directive | What It Restricts |
|---|---|
| default-src | Fallback source list used for any directive that isn't explicitly set |
| script-src | Which sources of JavaScript are allowed to execute |
| style-src | Which sources of CSS are allowed to load |
| img-src | Which sources of images are allowed to load |
| connect-src | Which origins fetch, XHR, and WebSocket calls may target |
| font-src | Which sources of font files are allowed to load |
| frame-ancestors | Which sites are allowed to embed this page in an iframe |
| object-src | Which sources of plugin content (<object>, <embed>) are allowed to load |
Using the Generated Header in nginx or Express
The nginx snippet is a complete add_header line, drop it into your server or location block and reload nginx, it already ends in always so the header is sent on error responses too. The Express snippet calls res.setHeader() directly, place it in middleware that runs before your response is sent. This csp nginx config generator escapes any quote characters in your directive values automatically, so a stray double quote in a copy-pasted source list can't break either generated snippet.