CSP Header Builder

CSP is an HTTP response header that tells browsers which sources of content (scripts, styles, images, fonts) are allowed to load on a page. It's one of the most effective defenses against Cross-Site Scripting (XSS) and data injection attacks. By whitelisting trusted sources, you prevent injected malicious scripts from executing.

default-src is the fallback directive — it applies to any fetch directive that isn't explicitly set. If you set default-src 'self', then script-src, style-src, img-src, etc. all default to 'self' unless overridden. Always set default-src as a safe baseline before adding more permissive rules for specific directives.

'unsafe-inline' allows inline scripts and styles (<script>...</script> or style attributes). This defeats the main protection of CSP because XSS injected as inline scripts would execute. For scripts, use nonces (script-src 'nonce-{random}') or hashes (script-src 'sha256-{hash}') instead. For styles, consider moving inline styles to external files.

frame-src controls which sources your page can load in iframes. frame-ancestors controls which external sites can embed your page in an iframe — it's a modern replacement for the X-Frame-Options header. To prevent clickjacking, set frame-ancestors 'none' (no embedding) or frame-ancestors 'self' (same origin only).

Use Content-Security-Policy-Report-Only first — same header format, but violations are only reported (via report-uri) without blocking content. Set report-uri to a logging endpoint, check the violation reports, adjust your policy, then switch to Content-Security-Policy. Many services like Report URI, Sentry, and Datadog can receive CSP reports.

This directive tells browsers to automatically upgrade all HTTP requests to HTTPS before sending them. It's useful when migrating a site from HTTP to HTTPS — it fixes mixed content issues without manually updating every resource URL. It does NOT affect the page URL itself, only sub-resource requests (images, scripts, styles, etc.).