FAQ

How to debug CSP with Chrome DevTools

Chrome surfaces almost everything you need to debug a Content Security Policy. The trick is knowing which panel to look at, in which order, and which fields to copy into your policy draft.

1. Confirm the actual response header

Open DevTools and select the top-level document request in the Network panel.
Open the Headers section and scroll to Response Headers.
Confirm Content-Security-Policy is present and not truncated.
Note whether you shipped the enforcing header or Content-Security-Policy-Report-Only.

2. Read the console violation

Reload the page with the Console panel open.
Each blocked request produces a red entry that names the violated directive and the blocked resource.
Click the entry to expand the directive, the source, and (for inline blocks) the snippet position.
Copy the blocked origin exactly as the browser reports it. Do not normalize scheme, port, or path.

3. Use the Issues tab for grouped signals

Open the Issues tab. Chrome groups CSP-related findings alongside mixed content and cookie warnings.
Use the Learn more link to jump to the relevant document request in the Network panel.
Issues often surface misconfigurations (for example, a missing nonce on a meta tag) that the raw console hides.

4. Inspect inline blocks carefully

For blocked inline scripts or styles, the console shows the offending source line and column.
Check whether the inline content is generated by a framework (often a sign you want an external file or a nonce) or hand-written and stable (a candidate for a hash).
Never paste a hash that the browser reports back into a permissive directive; the hash is only valid for that exact byte sequence.

5. Reproduce with a clean profile

Extensions can inject scripts and break CSP in misleading ways.
Open an Incognito window (or a fresh profile) to confirm whether the violation is from the page itself or from an extension.
Service workers can also serve cached responses from a previous header version. Use Application > Service Workers > Unregister, then hard reload.

6. Lock changes in with a short report-only cycle

After fixing the most common origins, switch the header to Content-Security-Policy-Report-Only for a full traffic cycle, send reports to a log endpoint, then enforce.

Next step

Use the CSP Checker to confirm the real response header, then open the generator when you are ready to rewrite the policy.