Content Security Policy (CSP)

A browser security mechanism that restricts which resources a page can load.

Content Security Policy is delivered as an HTTP header (or, less ideally, a <meta> tag). The browser compares every script, stylesheet, font, image, and connection against directives such as script-src, style-src, and default-src. Anything not allowed is blocked, which is why you see “refused to load” in DevTools when a CDN or inline snippet is missing from the policy.

Why developers care

A missing or loose CSP is the biggest single XSS attack surface on modern sites. If script-src allows 'unsafe-inline' or *, an injected script runs as first-party code. A tight CSP forces you to list real origins, use nonces or hashes for the inline bits you truly need, and think about frame-ancestors for clickjacking. Production apps increasingly face audits and enterprise buyers who ask for CSP by name.

Example

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'; base-uri 'self'; form-action 'self'

Spec

W3C Content Security Policy Level 3

Generate a CSP with CSPFixer →