◆Error Codes Wiki

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

Warning4xx client error

Overview

Fix Content-Security-Policy violation errors that block scripts, styles, images, and other resources from loading due to restrictive CSP headers.

Key Details

  • 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

Common Causes

  • 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

Steps

  1. 1Check the browser console for the specific CSP violation message — it tells you which directive was violated
  2. 2Add the blocked resource's domain to the appropriate CSP directive (script-src, style-src, etc.)
  3. 3Use nonces or hashes for inline scripts instead of 'unsafe-inline': script-src 'nonce-randomValue'
  4. 4Start with Content-Security-Policy-Report-Only to test your policy without breaking the site
  5. 5Set up a CSP report-uri endpoint to collect violation reports and iteratively refine your policy

Tags

cspsecuritycontent-security-policyxssheaders

More in 4xx Client Error

http-400-bad-requestHTTP 400 Bad Request — What It Means & How to Fix It
Error
http-401-unauthorizedHTTP 401 Unauthorized — What It Means & How to Fix It
Error
http-402-payment-requiredHTTP 402 Payment Required — What It Means & How to Fix It
Error
http-403-forbiddenHTTP 403 Forbidden — What It Means & How to Fix It
Error
http-404-not-foundHTTP 404 Not Found — What It Means & How to Fix It
Error
http-405-method-not-allowedHTTP 405 Method Not Allowed — What It Means & How to Fix It
Error

Frequently Asked Questions

Avoid it if possible. 'unsafe-inline' significantly weakens CSP protection against XSS. Use nonces (per-request random values) or hashes (SHA-256 of the inline script content) instead.