Content Security Policy (CSP) is an HTTP response header that tells the browser exactly where it is allowed to load scripts, styles, images, and other resources from — and blocks everything else.

The idea: even if an attacker injects a script tag, the browser will not execute it unless the script comes from an approved source. CSP is designed as a second line of defence after output encoding fails.

What a CSP header looks like

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jquery.com;
  style-src 'self' 'unsafe-inline'

Breaking this down:

• default-src 'self' — by default, only load resources from the same origin
• script-src 'self' https://cdn.jquery.com — scripts can only come from this origin or jQuery's CDN
• style-src 'self' 'unsafe-inline' — styles can be inline (common but risky)

What CSP blocks

<!-- Without CSP — this executes -->
<script>alert(1)</script>

<!-- With CSP script-src 'self' — browser blocks it:
     Refused to execute inline script because it violates
     Content Security Policy directive: "script-src 'self'" -->

Report-Only vs enforced CSP

Developers often deploy CSP in report-only mode first — violations are logged but not blocked. It is useful for testing but provides zero protection:

Content-Security-Policy-Report-Only: ...  # Logs but does not block
Content-Security-Policy: ...               # Actually enforces