CSP Header Generator

The CSP Header Generator builds a Content Security Policy header for your site. CSP is a powerful defense against cross-site scripting (XSS) and data injection attacks — it tells browsers which sources of JavaScript, CSS, images, and other resources are allowed. A well-configured CSP can prevent most XSS attacks even if your code has a vulnerability. A poorly configured or missing CSP leaves your site exposed.

Configure CSP via a structured form for each directive (script-src, style-src, img-src, connect-src, frame-ancestors, etc.) and add trusted sources, nonces, hashes, or keywords. The tool produces a complete CSP header ready to add to your web server configuration or set via HTML meta tag. Common presets: strict CSP (maximum security), moderate CSP (allows common external services), report-only mode (monitor violations without blocking), inline-script-compatible (for legacy sites). Advanced features include strict-dynamic for modern CSP, nonce-based inline scripts, SRI hashes, and violation reporting. All generation runs in your browser.

Content Security Policy (CSP) is a browser security feature defined by W3C. Deliver via HTTP header (Content-Security-Policy) or HTML meta tag (more limited).

Core directives:
- default-src: fallback for all fetch directives
- script-src: JavaScript sources (critical for XSS prevention)
- style-src: CSS sources
- img-src: image sources
- connect-src: XHR, fetch, WebSocket, EventSource destinations
- font-src: @font-face sources
- media-src: audio and video sources
- object-src: Flash and other plugins (set to none; plugins are deprecated)
- frame-src: iframe sources
- frame-ancestors: who can embed this site in iframes (clickjacking prevention)
- base-uri: allowed values for <base> element
- form-action: allowed form submission destinations

Source values:
- 'self': same origin
- 'unsafe-inline': inline scripts and styles (avoid if possible)
- 'unsafe-eval': eval() and similar (avoid)
- 'unsafe-hashes': specific inline event handlers
- URL: https://example.com
- Scheme: https:, data:, blob:
- Nonce: 'nonce-abc123' (random value in both header and inline <script nonce=\"abc123\">)
- Hash: 'sha256-hash' (SHA-256 of inline script content)
- 'none': disallow everything
- 'strict-dynamic': allow scripts loaded by trusted scripts (modern CSP pattern)
- *: wildcard (very permissive)

Typical strict CSP:

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123' 'strict-dynamic'; style-src 'self' 'nonce-abc123'; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';

Nonces: generate a cryptographically random nonce per page load, include in CSP header AND in each inline <script nonce=\"...\">. Browser allows only scripts with matching nonce. Prevents injected scripts even if attacker can inject HTML.

Hashes: calculate SHA-256 of inline script content, include hash in CSP. Browser only allows scripts with matching hash. Harder to maintain than nonces but doesn\u2019t require per-request generation.

strict-dynamic: advanced pattern where the top-level script (via nonce or hash) can load other scripts, and those scripts can load more. Effectively trusts the initial script\u2019s transitive dependencies. Modern recommendation.

Report-only mode: Content-Security-Policy-Report-Only header — browser reports violations without blocking. Useful for rollout — deploy in report-only first, fix violations, then switch to enforcing mode.

Violation reporting:
- report-uri: legacy, POSTs to the URL (deprecated but still widely supported)
- report-to: modern, uses Reporting API

Frame-ancestors vs X-Frame-Options: frame-ancestors is the CSP way to prevent clickjacking. X-Frame-Options is older and less flexible. Modern sites should use frame-ancestors.

Common issues:
- unsafe-inline in script-src negates most XSS protection
- Too many trusted hosts reduce security
- Missing directive inherits from default-src
- CSP in meta tag doesn\u2019t support frame-ancestors or report-uri

Compared to writing CSP by hand, this tool provides structured input and warns about weak configurations. Hand-writing CSP is error-prone due to complex syntax.

Compared to CSP Evaluator (csp-evaluator.withgoogle.com), this tool is for generation; the evaluator is for validation. Use this tool to build, then paste into the evaluator to verify.

Compared to security plugins (helmet for Node.js, Talisman for Flask), this tool is language-agnostic. Plugins integrate with specific frameworks; this tool produces the header for any server.