CSP Header Generator

Strict CSP starter

The Strict preset follows the nonce-based strict CSP described on web.dev. The HTTP header tab shows:

Content-Security-Policy: default-src 'self'; script-src 'nonce-{RANDOM}' 'strict-dynamic'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests

'nonce-{RANDOM}' is a placeholder, not a value. Your server must replace it with a new random value of at least 128 bits on every response, and write the same value into nonce=”…” on each <script> it renders. The tool shows a warning while the placeholder is in the policy. Do not paste one fixed nonce into a static config: anyone who sees it once can reuse it in an injected script.

The placeholder replaces the ‘self’ that earlier versions of this preset used. With ‘strict-dynamic’, CSP Level 3 blocks every script that the HTML parser inserts unless it has a matching nonce or hash, and it stops checking ‘self’ and host sources (CSP3 §8.2). So script-src ‘self’ ‘strict-dynamic’ on its own runs no script at all in current Chrome, Firefox and Safari, and the tool now warns about that combination. If your site is a static build that cannot set a nonce, remove the placeholder and add a hash for each inline script with the hash calculator, or start from the Moderate preset.

The Express (helmet) tab does the per-response part for you: it adds a middleware that stores crypto.randomBytes(16).toString(‘base64’) in res.locals.cspNonce and passes script-src a function, which is the pattern in the helmet README. Your templates still have to print that value on each script tag. The Nginx tab keeps the placeholder and adds a comment, because Nginx cannot put the same nonce into the HTML your application renders.

Common pitfalls

• ’none’ only works alone. If you list another source next to it, ‘none’ has no effect and the other sources are allowed.
• Some directives are HTTP only. CSP3 §3.3 ignores frame-ancestors, report-uri and sandbox in <meta>, and Report-Only mode does not exist there. The tool leaves these out of the <meta> tab and warns you.
• ‘strict-dynamic’ needs a nonce or hash. Without one it blocks every script on the page; the tool flags this.
• Hashes and nonces void ‘unsafe-inline’. Modern browsers fall back to the safer of the two when both are present.
• Always set default-src. Missing fetch directives fall back to default-src; without it the browser applies no fallback for new directives added later.
• Custom hosts cannot contain semicolons. A semicolon would terminate the policy and corrupt every directive after it.

Hashes vs. nonces

Use hashes for static inline content that ships with the page — analytics snippets, critical CSS, server-rendered helpers. Hashes work for static HTML and edge-cached responses because they do not need any per-request value.

Use nonces for dynamic content rendered per request. The server emits a Content-Security-Policy header containing ‘nonce-XYZ’ and stamps the same value on every <script nonce=“XYZ”> it renders. Pair nonces with ‘strict-dynamic’ so descendant scripts inherit trust without you maintaining a host allow-list.

Deployment cheat sheet

• Nginx: copy the Nginx tab into your server block and reload — the always flag forces the header on error responses too.
• Apache: use Header always set Content-Security-Policy ”…” in .htaccess or httpd.conf.
• Express / Node: paste the helmet snippet, and remember to disable useDefaults so your policy is not silently merged with helmet defaults.
• Cloudflare Pages / Vercel / Netlify: paste the HTTP header form into your platform’s headers config (_headers, vercel.json, netlify.toml).