CSP Policy Builder

CSP is an HTTP response header that tells browsers which sources are allowed to load scripts, styles, images, fonts, and other resources. A well-configured CSP is one of the most effective defenses against XSS attacks — even if an attacker injects a script tag, the browser won't execute it unless the source is allowlisted.

default-src is the fallback for all resource fetch directives (script-src, style-src, img-src, etc.). Any directive you don't explicitly set falls back to default-src. Always set a restrictive default-src ('self' or 'none') and only loosen specific directives you need.

'unsafe-inline' allows inline <script> and <style> blocks. This defeats XSS protection because injected inline scripts execute freely. Use nonces (a random per-request value in script-src 'nonce-{value}') or hashes (sha256-{hash}) instead. For styles, move inline styles to external .css files.

report-uri (legacy) and report-to (modern) tell the browser where to POST violation reports when a resource is blocked by CSP. Use Content-Security-Policy-Report-Only header with report-to while auditing — no resources are blocked, only violations reported. Then switch to Content-Security-Policy when confident.

Use the Content-Security-Policy-Report-Only header first. Set report-to to a service like report-uri.com or your own endpoint. Monitor violations for 1-2 weeks. Iterate until violations stop, then switch to enforcing CSP. The Report-Only header never blocks anything — safe to test in production.