Common CSP Issues & Troubleshooting
Content Security Policy errors can break your site if misconfigured. This guide covers the most common CSP issues, explains what causes them, and shows you how to fix each one.
CSP Header Builder
Build Content Security Policy headers visually with framework presets, security analysis, and multi-format output.
Directives
Fetch Directives
Document Directives
Navigation Directives
Output Format
Generated Policy
Content-Security-Policy: upgrade-insecure-requests
Security Analysis
Policy Stats
Refused to execute inline script
This error means your CSP blocks inline <script> tags and on* event handlers. Fix options: (1) Move inline scripts to external files (best), (2) Add a nonce to each script tag and include 'nonce-{value}' in script-src, (3) Add 'unsafe-inline' to script-src (weakens security). Using nonces with 'strict-dynamic' is the recommended modern approach.
Refused to load the stylesheet
Your CSP is blocking a CSS file or inline style. Check style-src — does it include the stylesheet's origin? For CSS-in-JS libraries (styled-components, Emotion), you need 'unsafe-inline' in style-src. For external stylesheets (Google Fonts), add the CDN domain: style-src 'self' https://fonts.googleapis.com.
Refused to connect
Your fetch(), XHR, or WebSocket call is blocked. The connect-src directive controls these. Add your API endpoint domain: connect-src 'self' https://api.example.com. Don't forget WebSocket URLs (wss://), analytics endpoints, and any third-party APIs your app calls.
Frequently Asked Questions
How do I debug CSP errors?
Open your browser's Developer Tools Console — CSP violations appear as errors with the blocked resource URL and the directive that blocked it. Use Content-Security-Policy-Report-Only header to test without breaking your site. You can also set up report-uri to collect violations server-side.
What is Content-Security-Policy-Report-Only?
Report-Only mode logs CSP violations to the console (and optionally to a report-uri endpoint) without actually blocking anything. Use it to test a new CSP before enforcing it. Once you see no unexpected violations, switch to the enforcing Content-Security-Policy header.
Why does my CSP work locally but break in production?
Common causes: (1) Third-party scripts loaded in production but not locally (analytics, chat widgets, ads), (2) CDN domains not in your allowlist, (3) Inline scripts added by your hosting platform, (4) Different URL schemes (http vs https). Always test with Report-Only in production first.
Related Generate Tools
package.json Generator
Generate package.json visually with framework presets, dependency editor, scripts, and module config
Security Headers Generator
Generate HTTP security headers for Nginx, Apache, Vercel, Netlify, and Cloudflare with presets, security scoring, and multi-format output
Hash Generator
Generate SHA-1, SHA-256, SHA-384, SHA-512 hashes
UUID Generator
Generate random UUID v4 identifiers in bulk