What is a Content Security Policy (CSP) and how does it work?

A Content Security Policy is an HTTP response header that tells the browser which sources are allowed to load scripts, styles, images, fonts, etc. Violations are blocked.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  frame-ancestors 'none';

Key directives:

• default-src — fallback for all resource types not explicitly listed.
• script-src — which origins can serve JavaScript.
• frame-ancestors — which origins can embed this page in an iframe (replaces X-Frame-Options).
• 'nonce-{random}' — whitelist an inline script by including a per-request nonce: <script nonce="r4nd0m">.
• 'strict-dynamic' — trust scripts loaded by trusted scripts (allows dynamic script injection from whitelisted scripts).

Reporting: Use Content-Security-Policy-Report-Only header to log violations without blocking — essential when rolling out a CSP to a production app.