CSP Builder
100% LocalGenerate secure Content Security Policy (CSP) headers.
default-src
Fallback for other fetch directives.
script-src
Valid sources for JavaScript.
style-src
Valid sources for stylesheets.
img-src
Valid sources of images and favicons.
connect-src
Valid sources for fetch, XMLHttpRequest, WebSocket, and EventSource.
font-src
Valid sources for fonts loaded using @font-face.
object-src
Valid sources for the <object>, <embed>, and <applet> elements.
media-src
Valid sources for audio and video.
frame-src
Valid sources for nested browsing contexts (e.g. <iframe>).
worker-src
Valid sources for Worker, SharedWorker, or ServiceWorker scripts.
Deployment Examples
Toggle directives for script-src, style-src, img-src, and more. Copy the assembled header when done.
Learn More
AES Interoperability Across 7 Libraries: We Encrypted the Same Plaintext Everywhere and Compared Results
Base64 Encoding: When You Should and Shouldn't Use It (2026 Guide)
Bcrypt vs. Argon2 in Practice: Choosing the Right Hashing Algorithm
Don't settle for MD5 or SHA-256 for passwords. Learn why Bcrypt and Argon2 are the industry standards, how they differ, and which one you should use for your next project in 2026.
What is CSP Builder?
Frequently Asked Questions
Technical Deep Dive
CSP Builder
Visually build Content Security Policy headers to protect against Cross-Site Scripting (XSS) and data injection attacks. Configure directives like default-src, script-src, and style-src, and easily copy the generated policy for Nginx, Apache, or HTML Meta tags.
A CSP you copy from a gist usually breaks your own scripts. This builder emits a header you can paste into Nginx or next.config.ts.
Start with default-src 'self'; script-src 'self' and add one origin at a time. Google Tag Manager needs extra script-src hosts; do not jump to 'unsafe-inline'.
Report-Only mode is how you discover breaks without locking users out. Ship enforcing CSP only after the report endpoint is quiet.
01 CSP Directive Threat Matrix
| Directive | Protects Against | Recommended Value | Impact |
|---|---|---|---|
default-src | Fallback Logic | 'self' | High |
script-src | Inline XSS / Injection | 'nonce-...' 'strict-dynamic' | Critical |
connect-src | Data Exfiltration | Specific API Origins | High |
frame-ancestors | Clickjacking | 'none' or 'self' | Medium |
02 Hardening Workflow Pipeline
default-src 'none' and incrementally allowlist trusted assets (fonts, images, scripts).
Report-Only header to audit policy violations without breaking existing production functionality.
Content-Security-Policy header once violation reports are silenced.
03 The nonce lifecycle
A nonce-based CSP only works if the nonce is genuinely fresh per response. The server generates a random value (16+ bytes, base64), puts it in the header as script-src 'nonce-r4nd0m', and stamps the same value onto every first-party <script nonce="r4nd0m"> tag it renders. The browser runs a script only if its nonce attribute matches the header, then strips the attribute from the DOM so injected markup cannot read it back.
Two things break this. Caching a full HTML response re-serves a stale nonce, so either mark nonce'd pages Cache-Control: no-store or use per-request edge rendering. And static-site generators cannot emit a runtime nonce at all — for those, use hashes ('sha256-…' of each inline block) instead, which the browser recomputes and matches on every load with no server involvement.
04 Directives people forget
base-uri 'self' — without it, an injected <base href> tag can silently repoint every relative script URL on the page at an attacker's host, defeating a script-src allowlist entirely. It costs nothing to set.
object-src 'none' — blocks legacy <object>, <embed>, and Flash-era plugin vectors that default-src does not always cover cleanly.
form-action — restricts where forms can POST, which stops an injected form from exfiltrating tokens to a third-party endpoint even if the markup renders.
frame-ancestors — the modern replacement for X-Frame-Options; it supports multiple origins and is the one browsers actually consult. Set it even if you already send the old header.
upgrade-insecure-requests — rewrites http:// subresource URLs to https:// at request time, useful while migrating a site with mixed-content debt.
05 Reading a violation report
In Report-Only mode the browser POSTs a JSON body to your report-to endpoint for every block. The fields that matter are effective-directive (which rule fired), blocked-uri (what it tried to load), and source-file plus line-number (where the offending code lives). Group incoming reports by blocked-uri: a handful of legitimate third-party hosts you forgot to allowlist will dominate, and a long tail of eval, inline, and browser-extension noise sits underneath.
Allowlist the real hosts, convert your own inline scripts to nonce'd or external files, and ignore the extension noise (you cannot control what a user's ad-blocker injects). When the report volume from real users drops to that irreducible noise floor, promote the header from Content-Security-Policy-Report-Only to Content-Security-Policy.