Complete Guide to Content Security Policy (CSP)

Content Security Policy (CSP) is an HTTP header that tells the browser which sources of scripts, styles, images, and other resources are allowed. If an attacker injects a malicious <script>, a well-written CSP simply refuses to run it — which is why CSP is the most effective single defense against cross-site scripting (XSS).

A starter policy

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'self'

• default-src 'self' — only load resources from your own origin by default.
• object-src 'none' — block Flash/legacy plugins.
• frame-ancestors 'self' — modern replacement for X-Frame-Options.

Roll it out without breaking your site

Deploy in report-only mode first:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

Collect violation reports for a week, add the legitimate sources you actually use (your CDN, analytics, fonts), then switch to the enforcing header.

Common gotchas

• Inline scripts are blocked unless you add a nonce or hash. Move JS into files.
• Third-party widgets need their domains explicitly allowed.
• 'unsafe-inline' defeats most of CSP's value for scripts — avoid it.