Writing a Content-Security-Policy header by hand means remembering directive names, keyword quoting rules, and semicolon separators — one typo and the whole policy silently fails. This tool builds the string for you from checkboxes and a few text fields.
What Is the CSP Generator?
CSP Generator is one of the tools in WebdevToolbox’s Security & Crypto category. Toggle common source keywords per directive, add custom domains, and get both an HTTP header and an HTML meta tag version of your policy, generated live.
How to Use It
- Open the tool at /tools/csp-generator.
- For each directive (default-src, script-src, style-src, img-src, and more), check the keyword sources you need —
'self','unsafe-inline',https:,data:, and so on. - Add any custom domains (like a CDN) in the text field under each directive.
- Copy the generated
Content-Security-Policyheader or the<meta>tag equivalent.
Key Features
- Ten common directives covered — default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, object-src, base-uri, form-action.
- Keyword toggles —
'self','none','unsafe-inline','unsafe-eval',https:,data:,blob:as checkboxes per directive. - Custom source fields — add specific domains alongside the standard keywords.
- Two output formats — an HTTP header string and an equivalent HTML
<meta>tag. - Live updates — no Generate button; the output updates as you toggle options.
When to Use the CSP Generator
- Locking down a new app — start from sensible defaults (
'self'everywhere) and loosen only what you need. - Static hosting without custom headers — use the meta tag output when you can’t set HTTP response headers directly.
- Reviewing a policy with a teammate — build it visually instead of debugging a hand-written string.
Try It Now
Open CSP Generator directly from anywhere on the site using ⌘K and typing the tool name. No login required — everything runs offline-capable in your browser.
Part of the Security & Crypto collection on WebdevToolbox — free, browser-based developer tools with no login required.