Guide

Fix Content-Security-Policy

CSP problems can be frustrating because the fix is rarely one magic header. The safest path is to find what the page really loads, tighten one directive at a time, and test before enforcing.

01

Find The Broken Directive

Start with the browser console. CSP errors usually name the directive that blocked something, such as script-src, style-src, img-src, connect-src, or frame-src.

Do not loosen the whole policy because one image or API call was blocked. Fix the smallest directive that explains the error.

02

Use Report-Only Mode First

If the site is already live, use Content-Security-Policy-Report-Only while you tune the policy. Visitors will not be blocked, but you can still see what would fail.

Once the reports look clean, move the policy to Content-Security-Policy and recheck the final response with /security-headers-checker.

03

Common Fixes

If scripts are blocked, add only the exact script sources you trust, or use nonces or hashes for inline scripts. Avoid unsafe-inline unless you truly cannot remove it yet.

If API calls are blocked, update connect-src. If fonts or images are blocked, update font-src or img-src instead of widening default-src.

04

Example Workflow

A dashboard might start with default-src 'self'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'. Then add connect-src for the API and script-src with nonces for trusted scripts.

A marketing site may need analytics, image CDN, and font domains. Add those exact domains, test, then remove anything the page no longer uses.

05

When To Ask For Help

If a CSP change breaks checkout, login, or admin flows, roll back and test in report-only mode. Those areas are too important for guesswork.

Share the blocked URL, directive name, and current policy with your developer, hosting provider, or security reviewer.

Next
CSP examples

Start from a policy shape that fits your site.

Check the CSP header

Verify the final response after deployment.

Learn CSP basics

Understand the directives before tightening them.

FAQ

Common questions

Why is CSP blocking my JavaScript?

The script source is probably not allowed by script-src, or an inline script needs a nonce or hash. Add the smallest safe rule instead of loosening the whole policy.

Can I use unsafe-inline temporarily?

Sometimes, but treat it as temporary. Nonces, hashes, or moving inline code into bundled files are safer.

How do I test CSP safely?

Use Content-Security-Policy-Report-Only first, watch for blocked resources, fix the policy, then enforce it.

Should CSP be the same on every page?

A shared baseline helps, but sensitive app pages may need stricter rules than public content pages.