Policy builder
Choose a preset, edit directive sources, and review warnings before testing in your app.
'self''none'https:data:blob:https://cdn.example.com'nonce-{RANDOM_NONCE}''sha256-{HASH}'CSP Header Generator
Build a Content Security Policy header with common directives, safer defaults, validation warnings, and copy-ready output.
Generated header
Copy the value for app config, or the full HTTP header line for server examples.
Ready to test14 directives
Content-Security-PolicyHeader value
default-src 'self'; script-src 'self' 'nonce-{RANDOM_NONCE}'; style-src 'self' 'nonce-{RANDOM_NONCE}'; img-src 'self'; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; worker-src 'self'; manifest-src 'self'; media-src 'self'Full HTTP header line
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{RANDOM_NONCE}'; style-src 'self' 'nonce-{RANDOM_NONCE}'; img-src 'self'; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; worker-src 'self'; manifest-src 'self'; media-src 'self'Directive table
| Directive | Sources | Status |
|---|---|---|
default-src | 'self' | Included |
script-src | 'self' 'nonce-{RANDOM_NONCE}' | Included |
style-src | 'self' 'nonce-{RANDOM_NONCE}' | Included |
img-src | 'self' | Included |
font-src | 'self' | Included |
connect-src | 'self' | Included |
frame-src | 'none' | Included |
object-src | 'none' | Included |
base-uri | 'self' | Included |
form-action | 'self' | Included |
frame-ancestors | 'none' | Included |
worker-src | 'self' | Included |
manifest-src | 'self' | Included |
media-src | 'self' | Included |
This generator provides guidance, not a guarantee of security. Deploy CSP in report-only mode first, review browser console and report data, then tighten and enforce it on the real application.
Content Security Policy basics
Use CSP to limit where browsers may load scripts, styles, images, frames, forms, workers, and other resources.
Common directives
default-src is the fallback. Specific directives such as script-src, style-src, img-src, and connect-src override it for their resource type.
Header vs report-only
Content-Security-Policy enforces the policy. Content-Security-Policy-Report-Only lets you observe violations without blocking resources.
Inline script risks
'unsafe-inline' and 'unsafe-eval' reduce CSP protection. Nonces or hashes usually give better control for scripts and styles.
Safer defaults
Start with object-src 'none', base-uri 'self', and a deliberate frame-ancestors rule so legacy plugins, injected base tags, and framing are limited.
Testing safely
Begin with report-only, exercise real user flows, inspect browser console messages, then narrow origins and remove broad sources before enforcing.
Practical limits
CSP helps reduce browser injection impact, but it does not replace escaping, dependency hygiene, authentication, authorization, or server-side validation.
FAQ
Does this tool validate live domains or fetch URLs?
No. It treats every directive and origin as plain text and never calls external services.
Is a generated CSP policy production-ready?
No generated policy is universally safe. Test it on the real application, review violations, and adjust for your actual resource graph.
Should I use report-only first?
Usually yes. Report-only mode helps find missing script, style, image, API, frame, worker, and media sources without breaking users.
Why warn about data: and blob:?
They are useful for some images and workers, but broad use can make injection defenses weaker. Keep them limited to the directives that need them.
Can CSP replace secure coding?
No. CSP is a browser defense layer. Keep using output encoding, safe templating, dependency review, and server-side validation.