CSP Builder
Build a Content-Security-Policy header with a guided form. Toggle common sources per directive, add your own hosts, and copy the finished header. Runs in your browser.
About the CSP Builder
The CSP Builder helps you write a Content-Security-Policy header without memorizing the syntax. Pick the directives you need, toggle common sources like 'self' or 'none', flag risky values such as 'unsafe-inline', and add your own host names. The full header value updates as you work and you can copy it in one click. It is built for WordPress developers, site owners, and anyone hardening a site against cross-site scripting and content injection. Everything runs in your browser, so your choices are never sent to a server.
How it works
- Enable the directives you want to control. default-src, script-src, style-src, and img-src are on by default.
- For each directive, toggle the source keywords you need and type any custom hosts, nonces, or hashes in the text field.
- Read the warnings that appear when you select risky values like 'unsafe-inline' or 'unsafe-eval'.
- Set the mode to Report-Only to test first, then copy the assembled header value.
Features
- Guided controls for the common directives: default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, object-src, base-uri, and form-action.
- Source toggles for 'self', 'none', 'unsafe-inline', 'unsafe-eval', https:, and data:, plus a free-text field for custom hosts.
- Live header value in a monospace box with one-click copy.
- Inline warnings for unsafe values so you know the trade-offs before you ship.
- Enforce and Report-Only modes so you can test a policy before turning it on.
Frequently asked questions
Is my data sent anywhere?
No. The header value is assembled in your browser with plain JavaScript. Nothing you type or select is uploaded or logged.
What is the difference between Enforce and Report-Only?
Enforce uses the Content-Security-Policy header and blocks anything that violates the policy. Report-Only uses Content-Security-Policy-Report-Only, which does not block anything but reports violations. Use Report-Only first to find problems without breaking your site.
Why does the tool warn about 'unsafe-inline' and 'unsafe-eval'?
Both weaken the protection a CSP provides. 'unsafe-inline' allows inline scripts and styles, which is the main thing a policy is meant to block, and 'unsafe-eval' allows eval(). Prefer nonces or hashes for inline code, and avoid eval() where you can.
What does 'self' mean?
'self' allows resources from the same origin as the page: the same scheme, host, and port. It does not include subdomains or other domains, which you add as custom hosts.
How do I apply the header on WordPress?
Copy the header value and set it from your server config or a small plugin. One option is to hook send_headers and call header() with the name and value. You can also set it in Nginx or Apache. Test in Report-Only mode first so you do not block legitimate assets.