Content Security Policy (CSP) Explained: A Complete Beginner's Guide

What Is Content Security Policy?

Content Security Policy (CSP) is an HTTP response header that tells the browser exactly which resources are allowed to load on your page. It's the single most effective defense against Cross-Site Scripting (XSS) attacks — the most common web vulnerability.

Without CSP, if an attacker manages to inject a malicious script tag into your page, the browser will happily execute it. With CSP, the browser blocks any script that isn't explicitly whitelisted.

How CSP Works

CSP works through directives — each one controls a specific type of resource:

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

Here's what each directive means:

default-src 'self' — By default, only allow resources from the same origin
script-src 'self' https://cdn.example.com — Scripts can load from your domain and your CDN
style-src 'self' 'unsafe-inline' — Styles from your domain plus inline styles
img-src * — Images can load from anywhere

Common CSP Directives

default-src — Fallback for all resource types
script-src — JavaScript files and inline scripts
style-src — CSS files and inline styles
img-src — Images
font-src — Web fonts
connect-src — API calls (fetch, XHR, WebSocket)
frame-src — Embedded iframes
media-src — Audio and video
object-src — Plugins (Flash, Java) — always set to 'none'
base-uri — Restricts the base URL
form-action — Restricts where forms can submit to

Building Your First CSP

Start strict and relax as needed:

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'

This is a very strict policy that only allows resources from your own domain.

Using Report-Only Mode

Test before enforcing! Use the report-only header to log violations without blocking anything:

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

Check your browser console for CSP violations and adjust your policy accordingly.

Common CSP Mistakes

Using 'unsafe-inline' for scripts — This defeats the purpose of CSP. Use nonces or hashes instead
Using 'unsafe-eval' — Allows eval(), which is dangerous. Refactor code to avoid it
Overly permissive script-src — Don't whitelist entire CDN domains like *.cloudflare.com
Forgetting object-src 'none' — Old plugins are a major attack vector
Not setting frame-ancestors — This replaces X-Frame-Options for modern browsers

CSP for Popular Frameworks

Next.js

Add CSP in your next.config.js security headers or middleware.

WordPress

Use a plugin like "HTTP Headers" or add headers in your server config (not via PHP header() — that's too late for some resources).

Static Sites (Netlify, Vercel, Cloudflare Pages)

Use _headers files or platform-specific config to set CSP on all HTML responses.

Test Your CSP

Run a WebSentry audit to check if your CSP is properly configured. The scanner detects missing CSP headers, overly permissive policies, and common misconfigurations.