You’re deploying a new feature and need to lock down your site against cross-site scripting, but the Content Security Policy spec reads like ciphertext. A stray semicolon or a missing quote can silently break legitimate resources or leave a gaping hole an attacker will find in minutes. CSP Builder turns that friction into a fast visual configuration—no memorizing directive syntax, no guesswork, just a clean policy string ready for production.
What it is
CSP Builder is a visual Content Security Policy generator, part of the DevTools collection of 200+ free browser utilities. Content Security Policy (CSP) is a critical web security standard that prevents XSS and code injection by telling the browser exactly which content sources to trust. Instead of writing raw policy strings, you compose directives through a form-based interface that enforces the correct syntax and catches common missteps as you go.
The tool treats each CSP directive—default-src, script-src, style-src, img-src, and more—as an independent row. For every directive, you pick sources from a curated list or type custom URLs. The output is a syntactically valid Content-Security-Policy header that you can drop into your web server configuration or application middleware without further massaging.
Because it lives entirely in the browser, the tool never sends your policy drafts anywhere; it’s a privacy-first utility that requires no signup.
How to use it
The interface is built around a clear mapping of directives to resource types. Each row represents a directive: start with default-src to set a baseline for all resource types, then override specific directives as needed. For each directive, quick-add buttons let you insert common source values like 'self' (same origin), 'none' (block everything), 'unsafe-inline' (allow inline scripts/styles), 'unsafe-eval' (allow dynamic code evaluation), and data: or https: schemes.
To add an external CDN, type the origin into the source field—for example https://cdn.example.com. You can stack multiple sources in a single directive; CSP Builder will join them with proper spacing. A live policy preview updates in real time so you always see the exact header string you’ll deploy.
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:
A toggle above the directives switches the policy mode between enforcement and report-only. Report-only (Content-Security-Policy-Report-Only) logs violations to the browser console without blocking anything, which makes it the safest way to test a policy on a live site before you harden it. Once the violation reports show only expected activity, flip the toggle and deploy the enforced version.
As part of the DevTools suite, you can reach CSP Builder instantly without leaving your browser. There’s no installation, no account, and nothing to export your policy drafts outside your machine.
When to reach for it
CSP Builder excels when you need to create or tighten a Content Security Policy but don’t work with the spec frequently enough to write error-free headers from memory. Even seasoned developers waste time hunting down a forgotten 'unsafe-inline' that blocks their own UI. The tool removes that class of error by structuring the policy and validating source values as you type.
It’s especially useful during security reviews or when retrofitting CSP onto an existing application. Instead of chasing down every single resource the frontend loads, you can start with a strict default-src 'self' and incrementally add exceptions while observing the console in report-only mode. The visual layout makes it obvious when you’ve granted overly broad permissions—like allowing https: for scripts instead of a specific domain—which helps you maintain a minimal, maintainable policy.
Teams with developers who lack deep security expertise benefit from the tool’s guardrails. It acts as a pair-programmer who knows the RFCs, letting junior or full-stack engineers ship a base CSP that isn’t trivially bypassed. You still own the policy decisions, but the tool ensures the syntax survives a linting pass.
Try it yourself
Start with a restrictive baseline: set default-src to 'self' and block everything else until you know what’s needed. Open your application in a browser and watch the DevTools console for CSP violation reports. Each blocked resource is a clue; add the corresponding source—a CDN domain, a font provider, a WebSocket endpoint—to the appropriate
Try it: CSP Builder on DevTools
Top comments (0)