CSP Header Builder
Build Content-Security-Policy headers visually. Select directives and source values, then copy the CSP header or server config snippet.
| On | Directive | Source Values |
|---|---|---|
| default-src | ||
| script-src | ||
| style-src | ||
| img-src | ||
| font-src | ||
| connect-src | ||
| media-src | ||
| object-src | ||
| frame-src | ||
| worker-src | ||
| manifest-src | ||
| form-action | ||
| frame-ancestors | ||
| base-uri | ||
| upgrade-insecure-requests | Flag directive (no sources) | |
| block-all-mixed-content | Flag directive (no sources) |
Output
What Is the CSP Header Builder?
The CSP Header Builder is a visual tool for constructing Content-Security-Policy HTTP headers. Select the directives you need, toggle the allowed source values, and instantly get a correctly formatted CSP string ready to paste into your server config.
No more manually typing default-src 'self'; script-src 'self' ... — the builder handles the formatting and gives you nginx and Apache snippets as a bonus.
How to Use the CSP Header Builder
- Choose a preset (Strict, Moderate, or SPA/CDN) as a starting point.
- Enable the directives you need by checking the toggle on the left.
- Click source values (like
'self',https:) to add them to the directive. - Use the custom input at the end of each row to add specific domains.
- Copy the generated CSP header value, or use the nginx / Apache snippets directly.
- Optionally enable Report-Only mode to test the policy without enforcing it.
Features
- 16 CSP directives covered including
default-src,script-src,frame-ancestors, and more - All common source values as one-click toggles
- Custom domain input per directive
- 3 built-in presets: Strict, Moderate, SPA/CDN
- Toggle between CSP and CSP-Report-Only mode
- Output formats: raw header value, nginx
add_header, ApacheHeader set - One-click copy for each output format
FAQ
What is a Content-Security-Policy header?
Content-Security-Policy (CSP) is an HTTP response header that tells browsers which content sources are allowed to load on your page. It's the primary defense against Cross-Site Scripting (XSS) and data injection attacks.
What is Content-Security-Policy-Report-Only?
The Report-Only variant sends the CSP header but doesn't enforce it — violations are reported to the browser console or a report-uri endpoint. Use it to test a new policy before enforcing it in production.
What does 'unsafe-inline' mean in CSP?
'unsafe-inline' allows inline scripts and styles. It significantly weakens XSS protection and should be avoided. Use nonces or hashes instead to allow specific inline code blocks.
What is default-src used for?
default-src is a fallback directive. Any fetch directive (script-src, style-src, img-src, etc.) that isn't explicitly defined will fall back to the value of default-src.