Guide

What is CSP

CSP, or Content Security Policy, tells the browser which scripts, styles, images, connections, and embeds are allowed to load. Everything not explicitly allowed can be blocked.

Why it matters

CSP is one of the few browser-side controls that can reduce the blast radius of XSS, risky third-party scripts, and accidental resource loading from the wrong origin.

  • It limits where code can load from.
  • It makes unsafe inline code more visible.
  • It gives you violation reports while you tighten policy.

A minimal starting policy

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

This is not perfect, but it is a clear starting point for many static sites.

How to roll it out

  1. Generate a baseline policy.
  2. Ship it in Content-Security-Policy-Report-Only first.
  3. Review violations and add only real dependencies.
  4. Replace 'unsafe-inline' with nonce or hash when possible.
  5. Switch to enforcement once the page is stable.