Security score 90/100 · 0 directives enabled
- No default-src - every directive you don't set explicitly falls back to the browser's permissive default.
Fallback for every fetch directive you do not set explicitly. Set this first, then tighten individual directives.
No sources yet - this directive will be omitted until you add one.
Enable directives above - the assembled header appears here.
What it does
The CSP Builder assembles a Content-Security-Policy (CSP) header interactively. Instead of hand-writing a long semicolon-separated string, you toggle the directives you want, add sources to each one, and watch the finished header build itself in real time. A live security score penalizes unsafe sources ('unsafe-inline', 'unsafe-eval', data:, http:, *) and a missing default-src, so you can see the cost of every shortcut before you ship it.
It also parses: paste an existing CSP header into Import and it becomes an editable policy you can tighten and re-export. Everything runs 100% client-side - no header you paste is ever sent to a server.
How to use it
- Optionally paste an existing policy into Import existing header and press Parse to load it.
- Flip the switch on each directive you want (
default-srcfirst - it is the fallback for everything you leave unset). Click a directive row to expand its description and sources. - Add sources per directive: click a preset chip (
'self','none','strict-dynamic',https:, …) or type a custom URL /'nonce-…'/'sha256-…'value and press Add. Red chips are risky sources - hover one to see why. - Watch the security score and warning list at the top, then Copy the assembled header (or Copy share link to send the exact policy to a teammate).
Examples
A strict starter policy
default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'Add a CDN with a nonce, allow data-URI images
default-src 'self'; script-src 'self' https://cdn.example.com 'nonce-r4nd0m'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; upgrade-insecure-requestsThe same policy after importing it back - Parse returns the exact editable map, and building again reproduces the header byte-for-byte.
Good to know
- Set
default-src. Directives you leave unset fall back to it; without it, the browser’s permissive default applies and your policy has holes. - Risky sources cost score, not correctness:
'unsafe-inline'(-20),*(-20),'unsafe-eval'(-15),data:/http:(-10 each). Prefer nonces or hashes over'unsafe-inline'. - Delivery matters: send the header from your server (or CDN/Worker).
frame-ancestorsis ignored inside a<meta>tag. - Round-trip safe: build → parse → build reproduces the identical string, so share links and re-imports are lossless. Directives with no sources are omitted (a valueless directive is invalid CSP).
- Private: runs entirely in your browser - safe for policies covering internal domains.
- Related tools: PII Redactor, Password Strength Analyser, Defang/Refang.