CSP Builder

What is CSP Builder?

CSP Builder provides a visual interface for constructing Content-Security-Policy HTTP headers with toggles and inputs for each directive. It covers all CSP Level 3 directives including default-src, script-src, style-src, img-src, connect-src, font-src, frame-src, and more. The tool validates directive values, warns about unsafe-inline and unsafe-eval usage, and outputs the complete header string ready for server configuration.

Security engineers hardening web application configurations, frontend developers debugging CSP violations, and DevOps engineers configuring HTTP security headers. The tool runs entirely in your browser — your data never leaves your device.

How to Use CSP Builder

1. Start with the default-src directive — set it to 'self' as the baseline
2. Add specific directives for each resource type — scripts, styles, images, fonts, and connections
3. Enter allowed origins for each directive, including CDN domains and API endpoints
4. Review warnings about unsafe-inline, unsafe-eval, and overly broad wildcards
5. Copy the complete CSP header string for use in your server configuration or meta tag

Common Use Cases

• Building a Content-Security-Policy header for a new web application from scratch
• Migrating from report-only to enforcing CSP by reviewing and tightening directive values
• Adding nonce-based script allowlisting to replace unsafe-inline in an existing CSP
• Configuring CSP for a site that loads resources from CDNs, analytics, and third-party widgets
• Debugging CSP violations by reconstructing the policy and identifying overly restrictive rules

Pro Tips

• Start with Content-Security-Policy-Report-Only to collect violation reports without breaking your site — migrate to enforcing mode only after confirming no legitimate resources are blocked
• Use nonce-based ('nonce-abc123') or hash-based ('sha256-...') allowlisting for inline scripts instead of 'unsafe-inline' — this provides CSP protection while allowing specific inline scripts
• The connect-src directive controls fetch, XMLHttpRequest, WebSocket, and EventSource destinations — forgetting to allowlist your API domain here is the most common cause of CSP-related API call failures

Why Use This Tool?

• Privacy-first: All processing happens locally in your browser. No data is transmitted to any server.
• No installation required: Works in any modern browser on desktop or mobile.
• Completely free: No account, no credit card, no usage caps.
• Fast and reliable: Powered by modern Web APIs for near-instant results.

Related Concepts

Learn more about related topics: CSP Level 3, XSS prevention, Nonce-based CSP, Report-URI.

Frequently Asked Questions