Content-Security-Policy Violation — CSP Blocked Resource Loading Error

Fix Content-Security-Policy violation errors that block scripts, styles, images, and other resources from loading due to restrictive CSP headers. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.

Here are the key things to understand: Content-Security-Policy (CSP) is an HTTP header that restricts which resources the browser can load. CSP violations appear in the browser console as 'Refused to load/execute' errors. Directives include script-src, style-src, img-src, connect-src, font-src, frame-src, and default-src. CSP helps prevent cross-site scripting (XSS) attacks by whitelisting allowed content sources. Using Content-Security-Policy-Report-Only allows testing policies without blocking resources. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.

The most common reasons this occurs include: Inline scripts or styles blocked by a CSP that does not include 'unsafe-inline'. Third-party resources (analytics, fonts, CDN) not listed in the appropriate CSP directive. Script using eval() blocked by default CSP (requires 'unsafe-eval' which is not recommended). CSP policy too restrictive after being copy-pasted without customization for the specific site. Identifying the root cause is the first step toward finding the right solution.

To resolve this, follow these recommended steps: Check the browser console for the specific CSP violation message — it tells you which directive was violated. Add the blocked resource's domain to the appropriate CSP directive (script-src, style-src, etc.). Use nonces or hashes for inline scripts instead of 'unsafe-inline': script-src 'nonce-randomValue'. Start with Content-Security-Policy-Report-Only to test your policy without breaking the site. Set up a CSP report-uri endpoint to collect violation reports and iteratively refine your policy. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.

This article is part of our HTTP Status Codes collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.