CSP Directive Violated

How to read a CSP violation

The error message tells you three things:

1. What was blocked: the URL of the blocked resource
2. Which directive: which CSP directive caused the block
3. Current policy: what value the directive currently has

Example: "Refused to load script 'https://cdn.example.com/script.js' because it violates script-src 'self'" means you need to add https://cdn.example.com to your script-src.

Common violations and their fixes

Script blocked — script-src violation

# Blocked URL: https://www.googletagmanager.com/gtag/js
# Fix — add to script-src:
Content-Security-Policy: script-src 'self' https://www.googletagmanager.com;

Style blocked — style-src violation

# Blocked URL: https://fonts.googleapis.com/css2
# Fix — add to style-src:
Content-Security-Policy: style-src 'self' https://fonts.googleapis.com;

Font blocked — font-src violation

# Blocked URL: https://fonts.gstatic.com/s/roboto/...
# Fix — add to font-src:
Content-Security-Policy: font-src 'self' https://fonts.gstatic.com;

Image blocked — img-src violation

# Blocked URL: https://images.example.com/photo.jpg
# Fix — add to img-src:
Content-Security-Policy: img-src 'self' data: https://images.example.com;

Finding ALL violations before switching from report-only

Deploy as Content-Security-Policy-Report-Only first. Check the browser console for a few days to collect all violations before switching to enforcing mode. Missing even one source breaks part of your site.

Automate — generate from your live page

CSPFixer fetches your page and finds all resource sources automatically — no manual hunting through the console.