How do I find all resources my page loads?

Use browser DevTools > Network tab to see all loaded resources and their origins. Then build your CSP to include these origins.

Why do browser extensions trigger CSP violations?

Extensions inject scripts into pages. These injected scripts may not match the page's CSP. These violations are normal and can be ignored for extensions you trust.

Browser CSP Violations — Content Security Policy Error Guide

Warningsecurity

Overview

Fix Content Security Policy (CSP) violation errors including 'Refused to execute inline script', blocked resource loading, and CSP header misconfiguration.

Key Details

CSP is an HTTP header that controls which resources a page can load and execute
CSP violations appear in the browser console as 'Refused to...' messages
Common directives: script-src, style-src, img-src, connect-src, font-src, frame-src
Inline scripts and eval() are blocked by default unless explicitly allowed
CSP report-uri or report-to sends violation reports to a specified endpoint

Common Causes

CSP policy blocking legitimate scripts or resources (too restrictive policy)
Inline scripts blocked by script-src not including 'unsafe-inline' or nonces
Third-party resources (CDN, analytics, ads) not listed in the CSP
eval() used in code but not allowed by script-src
Browser extension injecting scripts that violate the page's CSP

Steps

1Read the console error — it specifies which directive blocked which resource
2Add the resource origin to the appropriate CSP directive (e.g., script-src https://cdn.example.com)
3For inline scripts: use nonces (script-src 'nonce-RANDOM') or hashes ('sha256-HASH')
4Test with Content-Security-Policy-Report-Only header to test without blocking
5Use CSP Evaluator (csp-evaluator.withgoogle.com) to check your policy for issues