Your files never leave your device. All processing happens locally in your browser.
How do I build a Content-Security-Policy header without any tool uploading my config?
Open the CSP Header Generator and toggle the directives you need — default-src, script-src, style-src, img-src, connect-src, font-src, media-src, object-src, frame-src, worker-src, manifest-src, base-uri, form-action, frame-ancestors and report-uri/report-to. For each one, flip sources on with quick chips (‘self’, ‘none’, ‘unsafe-inline’, ‘unsafe-eval’, ‘strict-dynamic’, https:, data:, blob:, a per-response nonce or a sha256 hash) or type free-text hosts. The policy serialises LIVE to both the Content-Security-Policy HTTP header and the equivalent <meta http-equiv> tag, with one-tap copy, while a review panel warns about risky choices. It is pure string building — nothing is uploaded, and it runs entirely in your browser.
Visual builder for 15 common directives, each with a plain-language explanation
Quick source chips plus free-text hosts; ‘none’ is handled as exclusive automatically
Strict (nonce + ‘strict-dynamic’), Balanced, Basic and Report-Only presets
Live output as BOTH the HTTP header and a <meta> tag, with meta-incompatible bits flagged
Best-practice warnings: ‘unsafe-inline’, ‘unsafe-eval’, data: in script-src, missing object-src/base-uri
What is
Content-Security-Policy (CSP)
A Content-Security-Policy is an HTTP response header (or a <meta http-equiv> tag) that tells the browser which sources of scripts, styles, images, fonts, frames and other resources are allowed to load and execute on a page. It is a defence-in-depth control that limits the impact of cross-site scripting (XSS) and clickjacking by allowlisting trusted origins and disabling dangerous behaviours such as inline scripts. A modern “strict” CSP drives script trust with a per-response nonce plus ‘strict-dynamic’ rather than a host allowlist. This tool builds the header entirely in the browser as plain text — nothing is uploaded.
No. The header is assembled from your choices entirely in your browser as plain text, with no upload and no network request.
The CSP Header Generator is 100% client‑side. Your directives, sources and hosts are just strings joined together on your device by a local engine — there is no server call, no CDN in the processing path, no logging and no telemetry. The optional sample nonce is generated locally with crypto.getRandomValues (never Math.random). The tool works offline once cached, keeps no history, and the only optional network use anywhere on the site is consent‑gated ads, which never see your policy.
Because it lets any injected inline script run, which undoes most of CSP’s protection against XSS.
‘unsafe-inline’ allows inline <script> blocks, on* event handlers and javascript: URLs to execute — exactly the payloads an XSS attacker injects — so a policy that keeps it barely constrains script execution. The modern fix is a per-response nonce (a random token echoed on each <script nonce>) or a sha256 hash of each trusted inline script, usually combined with ‘strict-dynamic’. Helpfully, all recent browsers IGNORE ‘unsafe-inline’ whenever a nonce or hash is present, so you can keep it purely as a fallback for very old browsers. The tool warns you whenever ‘unsafe-inline’ appears without a nonce or hash.
Mostly, but not entirely — frame-ancestors, report-uri/report-to and sandbox are ignored in a meta tag, and Report-Only only works as a header.
A <meta http-equiv="Content-Security-Policy"> tag is a convenient fallback when you cannot set response headers, but it is NOT fully equivalent. The frame-ancestors directive (your clickjacking defence), the reporting directives report-uri and report-to, and the sandbox directive are all ignored inside a meta tag — they must be delivered as real HTTP headers. Content-Security-Policy-Report-Only also cannot be delivered via meta. This tool emits the meta form alongside the header and explicitly flags which directives were dropped, so you know what still needs to be a header.
Deploy it in Report-Only mode first, watch the violation reports against your real app, fix the breakage, then switch to enforcing.
A strict policy will almost always block something on the first try, so start with the Content-Security-Policy-Report-Only header (this tool has a one-click Report-Only mode). In that mode the browser reports violations but does NOT block anything, letting you discover which legitimate scripts, styles or third-party hosts your app really uses. Collect reports via a report-uri endpoint or a report-to group (which needs a matching Reporting-Endpoints response header), add the necessary sources, and once the reports are clean, flip to the enforcing Content-Security-Policy header. Always test against your real site — CSP is defence-in-depth, not a replacement for fixing the underlying injection bug.
Detailed Explanation
📖How It Works
What the CSP Header Generator Does
The CSP Header Generator is a 100% client-side tool that builds a Content-Security-Policy header directive by directive and explains every choice. You toggle the common directives — default-src, script-src, style-src, img-src, connect-src, font-src, media-src, object-src, frame-src, worker-src, manifest-src, base-uri, form-action, frame-ancestors and report-uri/report-to — flip each source on with quick chips (‘self’, ‘none’, ‘unsafe-inline’, ‘unsafe-eval’, ‘strict-dynamic’, https:, data:, blob:, a per-response nonce or a sha256 hash) or type free-text hosts, and the policy serialises LIVE to both the HTTP header and the equivalent <meta http-equiv> tag. A review panel flags risky choices as you build. It exists because CSP syntax is fiddly and easy to get subtly wrong, and because a policy full of ‘unsafe-inline’ gives a false sense of safety.
Builds the Content-Security-Policy header entirely in the browser as plain text
Covers 15 common directives with inline explanations and risk notes
Outputs BOTH the HTTP header and a <meta http-equiv> tag
Live best-practice warnings; nothing is uploaded
Strict / Balanced / Basic / Report-Only presets to start from
🔧Technical Details
How a Strict CSP Actually Stops XSS
The strongest CSPs no longer rely on a host allowlist. In a strict CSP the server generates one unpredictable random nonce PER RESPONSE, adds it to script-src (script-src ‘nonce-RANDOM’ ‘strict-dynamic’), and echoes the same value on every trusted <script nonce="RANDOM"> tag. The browser runs only scripts carrying the matching nonce, so an injected <script> without it is blocked. ‘strict-dynamic’ then lets those already-trusted scripts load further scripts, which is what makes the pattern work with real bundlers and third-party tags without listing every host. Crucially, a supporting browser IGNORES ‘unsafe-inline’ and any http:/https: host sources when a nonce and ‘strict-dynamic’ are present, so you can add those purely as fallbacks for older browsers. This tool assembles that exact policy and marks the nonce placeholder; your backend supplies the real per-response value.
A fresh, unpredictable nonce per response drives script trust
‘strict-dynamic’ propagates trust so bundlers and third-party tags still work
A nonce/hash makes browsers ignore ‘unsafe-inline’ and host allowlists
Needs server templating to inject the nonce on each response
📋Use Cases
Presets: Strict, Balanced, Basic and Report-Only
The tool ships four presets. Strict is the Google/web.dev recommendation — script-src with a nonce placeholder plus ‘strict-dynamic’, object-src ‘none’, base-uri ‘none’, frame-ancestors ‘none’ and upgrade-insecure-requests — the best XSS posture for a templated app. Balanced is a same-origin allowlist that still permits inline styles and data: images, a practical starting point for many sites. Basic is the minimal default-src ‘self’ baseline plus object-src/base-uri hardening, for adding exceptions as you discover them. Report-Only delivers the Balanced policy as Content-Security-Policy-Report-Only with a reporting endpoint, so you can observe violations without breaking anything. Every preset is only a starting point — you customise every source from there, and the review panel keeps flagging weak spots as you edit.
Balanced: same-origin allowlist that keeps inline styles and data: images
Basic: minimal default-src ‘self’ with object-src/base-uri hardening
Report-Only: observe violations without blocking, then enforce
All presets are editable; warnings persist as you customise
⚠️Limitations
Header vs <meta>, and Honest Limitations
CSP can be delivered as an HTTP header or a <meta http-equiv> tag, but they are NOT equivalent, and a policy has real limits. Inside a <meta> tag the browser ignores frame-ancestors (your clickjacking control), the report-uri/report-to reporting directives, and sandbox — those must be real headers — and Content-Security-Policy-Report-Only cannot be delivered via <meta> at all. The tool emits the meta form and explicitly flags which directives were dropped. Beyond delivery, CSP is defence-in-depth: it limits the impact of an XSS or clickjacking bug but does not fix it — you still must escape and encode output. A host allowlist for scripts is often bypassable, ‘unsafe-inline’ undoes most script protection, and reporting needs server plumbing (an endpoint for report-uri or a Reporting-Endpoints header for report-to). The tool cannot see your app, so it cannot know which inline scripts or third-party hosts you truly need — that is exactly what a Report-Only rollout is for.
<meta> ignores frame-ancestors, report-uri/report-to and sandbox
Report-Only works only as a header, never via <meta>
CSP reduces the impact of XSS/clickjacking but does not fix the bug
Host allowlists are bypassable; ‘unsafe-inline’ defeats script protection
The tool cannot see your app — use Report-Only to learn real sources
🔒Privacy & Security
Private by Design
Everything happens on your device. The generator is pure string building — your directives, sources and hosts are joined into a header in local JavaScript with no network request, no upload, no logging and no CDN in the processing path. There is no account and no history; close the tab and your policy is gone. The optional sample nonce is generated with crypto.getRandomValues (never Math.random) to show what a well-formed value looks like. The tool works offline once cached, and the only optional network use anywhere on the site is consent-gated ads, which never see your policy. This matters because a security header often encodes your internal hostnames, API endpoints and third-party vendors — information you would not want to paste into a random online generator.
Header assembled locally in JavaScript — nothing uploaded
No server, no CDN, no logging, no telemetry, no account
Sample nonce uses crypto.getRandomValues, not Math.random
Works offline once cached; the policy is never persisted
Keeps your internal hosts, endpoints and vendors private
Ways to control which scripts a page will run
Approach
How it works
Trade-off
Recommended
nonce + ‘strict-dynamic’
A per-response random token trusts your scripts, which may then load more
Strongest and easiest to maintain, but needs server templating to inject the nonce
Yes (modern strict CSP)
Hash allowlist (sha256-…)
Allowlist each inline script by the base64 hash of its bytes
Great for static inline snippets; brittle if the script text changes
Yes (for static inline)
Host allowlist (script-src https://cdn…)
List the trusted hosts scripts may come from
Simple, but bypassable via JSONP, open redirects or old Angular gadgets on an allowed host
Use with care
‘unsafe-inline’
Allows every inline script to run
Easy, but defeats most of CSP’s XSS protection
Avoid
No CSP
The browser runs any script the HTML contains
Zero friction, but zero defence-in-depth against injected scripts
No
CSP is defence-in-depth, not a replacement for escaping output. Roll out with Content-Security-Policy-Report-Only first, watch the reports, then enforce. Everything in this tool is built locally in the browser; nothing is uploaded. As of July 2026.