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
When a CSP header builder is the right tool
Use this page to assemble a Content-Security-Policy header in the browser. Enable directives, pick source tokens such as 'self' or https:, and copy the header value or a short nginx or Apache snippet. It is a checklist, not a crawler and not a CSP validator.
Use cases
Starting from a preset
Strict, Moderate, or SPA / CDN fills a typical set of directives and overwrites anything you had already toggled. Tighten or loosen the chips afterward, and add hosts in the custom field when a CDN or API origin is needed.
Copying a server snippet
The nginx line is add_header … "…";. The Apache line is Header always set … "…" for .htaccess. Turn on Report-Only mode when you want the report-only header name in those snippets.
How the header is built
Directives are written in table order. Flag directives (upgrade-insecure-requests and block-all-mixed-content) are emitted as a name only. Other enabled directives join their selected tokens and any custom sources with spaces. There is no syntax check and no attempt to detect a conflicting 'none' plus another source on the same directive.
default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; frame-ancestors 'none'; base-uri 'self'; upgrade-insecure-requests
add_header Content-Security-Policy "default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; frame-ancestors 'none'; base-uri 'self'; upgrade-insecure-requests";
Header always set Content-Security-Policy "default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; frame-ancestors 'none'; base-uri 'self'; upgrade-insecure-requests"What this tool does not do
It does not generate nonces or hashes, add a reporting endpoint, or fetch your live site’s existing policy. To inspect headers a server already sends, use HTTP Header Inspector. Building stays in your browser.
How to use CSP Header Builder
- Apply a preset, or enable directives one by one and select source tokens.
- Add custom origins if needed, and optionally turn on Report-Only mode.
- Copy the header value or a server snippet. Reset clears the table.
Frequently asked questions
How does CSP Header Builder work?
You enable directives in a table, click source tokens, and optionally type extra hosts in the custom field (split on whitespace and appended). The header value, an nginx add_header line, and an Apache Header always set line update as you go. Nothing is sent to a server. The starting state is empty — enable a directive, or apply a preset, before there is anything to copy.
What do the Strict, Moderate, and SPA / CDN presets set?
Each preset replaces the whole editor. Strict uses default-src 'none', allows 'self' on a few directives, blocks framing with frame-ancestors 'none', and turns on upgrade-insecure-requests. Moderate and SPA / CDN start from default-src 'self' and add 'unsafe-inline' (SPA also adds 'unsafe-eval' and broader https: sources). Reset clears every directive again.
What does Report-Only mode change?
It only renames the header to Content-Security-Policy-Report-Only in the three outputs. The builder does not add report-uri or report-to, so a report-only policy copied from here will not have a reporting endpoint unless you add one yourself.
Are all CSP directives available? Is 'nonce-...' a real nonce?
No. The table covers a fixed list of source and flag directives (including the older block-all-mixed-content flag). There is no report-uri, report-to, sandbox, trusted-types, or script-src-elem control. The 'nonce-...' token is copied literally — you must replace it with a nonce your server actually generates. Enabling a non-flag directive with no sources emits the directive name and a trailing space.
Related tools and guides
References
- MDN: Content-Security-Policy describes the directives this builder can emit, and several it does not cover.
- A policy is only as good as what you deploy. Test in Report-Only with a real
report-toorreport-uriendpoint before enforcing it.