Is anything about my policy sent to a server?

No. The header is assembled locally in your browser. Nothing is logged or transmitted.

Should I use nonce or hash for inline scripts?

Nonces are easier with dynamic pages: generate a fresh value per response. Hashes work for static inline scripts whose contents don't change. Both avoid 'unsafe-inline'.

What's the difference between frame-ancestors and X-Frame-Options?

frame-ancestors is the modern CSP directive and supports multiple sources. X-Frame-Options is the legacy header and only supports DENY, SAMEORIGIN, or a single ALLOW-FROM. Modern browsers honor frame-ancestors first.

Why does the builder warn about 'unsafe-eval'?

It permits eval(), new Function(), and setTimeout-with-string, which are common XSS vectors. Most apps can avoid it; some frameworks (older Angular, certain WebAssembly toolchains) still require it.

csp · directives · report-only · live

Build a Content-Security-Policy visually

Compose CSP directives with quick presets, optional report-only mode and a report-uri. All assembly runs locally in your browser.

CSP Builder

Directives

of 14

Mode

enforced

blocking

Length

117 B

117 chars

Reporting

off

report-uri

input · directives

default-src

Fallback for other -src directives.

script-src

Sources for JavaScript.

style-src

Sources for stylesheets.

img-src

Sources for images.

font-src

Sources for fonts.

connect-src

fetch / XHR / WebSocket / EventSource targets.

media-src

Sources for audio / video tags.

object-src

Sources for object / embed (set 'none' to disable Flash).

frame-src

Sources for nested browsing contexts.

frame-ancestors

Who may embed this page in an iframe.

form-action

URLs that forms can submit to.

base-uri

URLs allowed in base tag.

manifest-src

Sources for manifest.json.

worker-src

Sources for workers.

Quick presets:

output · header

Content-Security-Policy

default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none'

Quick Start

How to build a CSP header

Each directive lists allowed sources. Start strict, loosen only when something breaks.

01
Set defaults
default-src applies when a specific directive is missing. Start with 'self'.
Lookups reference the IANA registries (MIME, HTTP status, TLDs) bundled at build time — no live network calls, no rate limits, no leaked queries.
defaultIANAregistryofflinelive
default-src · query'self' · IANA
```
default-src 'self'
```
loaded · IANA bundlespec · ready
02
Allow scripts
List trusted hosts in script-src. Avoid 'unsafe-inline'.
Builders emit canonical syntax per the relevant RFC (9110 for HTTP, 5322 for headers, 3986 for URLs) so the output passes spec-compliant parsers.
scriptRFC 9110canonicalspec-compliantlive
script-src · optionsscoped · live
```
script-src 'self' cdn.x.com
```
options applied · livecanonical
03
Lock framing
frame-ancestors 'none' blocks clickjacking via iframe.
Validation flags common pitfalls — uppercase header names, smart quotes inside Content-Type, missing ;charset=utf-8 — before they bite production.
clickjackvalidationlintpitfallslive
frames · looked upblocked · ready
```
frame-ancestors 'none'
```
result · livevalidated
04
Monitor first
Toggle Report-Only, ship to staging, watch reports — then enforce.
Copy writes the snippet directly into your clipboard; downloads emit the right extension and MIME so curl/httpie pick them up correctly.
rolloutclipboardMIME-correctblobcurl-ready
ok · copiedready · done
```
CSP-Report-Only: …
```
shipped · ready to shipsuccess

Pro tips

Web-spec details that bite later

Idempotency saves retries

POST/PUT/DELETE should be safely retried. Use idempotency keys and return the same response on duplicate requests.

Match RFC 9110 status codes

Don’t invent codes. 422 for validation errors, 409 for conflicts, 429 for rate limits. Standard codes work with off-the-shelf clients.

Set <code>Cache-Control</code> deliberately

Default browser caching is conservative. Use max-age + stale-while-revalidate for hot endpoints.

Validate Open Graph in dev

OG tags break silently. Use a previewer like OG Generator + Facebook’s debugger before launch.

CORS is a server concern

The browser sends the preflight; the server decides. Wildcard origins disable credentials — be explicit.

MIME drives behaviour

Servers must send the right Content-Type. Browsers sniff but the spec says they shouldn’t — be explicit to avoid surprises.

Use Cases

When to compose a CSP

Security headers, XSS defence, third-party policy.

XSS defence

Block injected scripts even if input sanitisation misses one. Bundled from IANA registries at build time — no live network call, no rate limit, no leaked queries. The MIME, TLD, and status-code tables are baked in so the tool works offline once loaded.

spec-compliant

Clickjacking

frame-ancestors blocks framing attacks. Output is canonical per the relevant RFC (9110 for HTTP, 5322 for headers, 3986 for URLs), so spec-compliant parsers accept it as-is. Cross-browser and cross-library behaviour stays consistent.

offline

Third-party audit

Decide which CDNs, analytics, ad networks to allow. Pairs with the curl-to-fetch converter for end-to-end test stubs — copy the curl from DevTools, paste, get an idiomatic fetch() body. Drop into Playwright/Vitest fixtures without manual translation.

IANA-backed

Migration policy

Ship report-only first, then enforce. Catches common pitfalls (uppercase header names, smart quotes inside Content-Type, missing ;charset=utf-8) before they bite production. Validation flags rather than auto-corrects so you stay in control.

RFC-aligned

Compliance

Many security frameworks require a documented CSP. Validation runs as you type — copy only when the output is shaped correctly. The output drops directly into nginx, Apache, or CDN configs without re-formatting or re-quoting.

production-grade

Edge config

Set the header at the CDN for instant rollout. Same input plus same options always produces identical canonical output, so the tool is safe to embed in CI scripts that diff against expected configs.

curl-ready

FAQ

Frequently asked questions

Should I use Report-Only first?

Yes. Run Report-Only in production, collect violation reports, then switch to enforced mode once the policy is clean.

Difference between 'self' and 'unsafe-inline'?

'self' allows your own origin. 'unsafe-inline' allows inline <script> and event handlers — defeats most XSS protection.

What about nonces / hashes?

Use 'nonce-…' per request or 'sha256-…' for static inline scripts to allow specific blocks without unsafe-inline.

How big can CSP get?

There's no hard limit, but huge headers (>4kb) can be rejected by CDNs/proxies. Keep it focused.

Is anything sent to a server?

No — CSP composition runs locally.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!