There’s nothing quite like deploying a CSP policy to production and watching your analytics break, your chat widget disappear, and your forms stop working. All at the same time.

This guide is about surviving that experience and fixing things quickly.

Where to Find CSP Violations

Chrome

Open DevTools (F12) → Console tab. CSP violations show up as red errors:

R C e o f n u t s e e n d t t S o e c e u x r e i c t u y t e P o i l n i l c i y n e d i s r c e r c i t p i t v e b : e c " a s u c s r e i p i t t - s v r i c o l ' a s t e e l s f ' t " h e f o l l o w i n g

For a more detailed view: DevTools → Application → Content Security Policy. This shows you the current policy and a log of violations.

Firefox

DevTools (F12) → Console tab. Firefox uses slightly different wording:

C o o f n t a e n r t e s S o e u c r u c r e i t a y t P i o n l l i i c n y e : ( T " h s e c r p i a p g t e - ' s s r c s " e ) t . t i n g s b l o c k e d t h e l o a d i n g

Safari

Web Inspector → Console tab. Similar to Firefox.

The 8 Most Common Violations (And How to Fix Them)

1. “Refused to execute inline script”

R C e o f n u t s e e n d t t S o e c e u x r e i c t u y t e P o i l n i l c i y n e d i s r c e r c i t p i t v e b : e c " a s u c s r e i p i t t - s v r i c o l ' a s t e e l s f ' t " h e f o l l o w i n g

What happened: You have a <script> tag with code directly in it, and your CSP doesn’t allow inline scripts.

Fix options:

  • Move the code to an external .js file: <script src="/js/my-script.js"></script>
  • Add a nonce to the script tag: <script nonce="YOUR_NONCE">...</script>
  • Add 'unsafe-inline' to script-src (least secure, avoid if possible)

2. “Refused to apply inline style”

R C e o f n u t s e e n d t t S o e c a u p r p i l t y y i P n o l l i i n c e y s d t i y r l e e c t b i e v c e a : u s " e s t i y t l e v - i s o r l c a t ' e s s e l t f h ' e " f o l l o w i n g

What happened: A style="..." attribute or <style> tag is being blocked.

Fix: Add 'unsafe-inline' to style-src. This is a common and generally accepted compromise — CSS can’t execute JavaScript.

3. “Refused to evaluate a string as JavaScript”

R i e s f u n s o e t d a t n o a e l v l a o l w u e a d t e s o a u r s c t e r i o n f g s a c s r i J p a t v a S c r i p t b e c a u s e ' u n s a f e - e v a l '

What happened: Something is calling eval(), new Function(), setTimeout("string"), or setInterval("string").

Fix: Find the code using eval and refactor it. Common culprits:

  • Old jQuery plugins
  • Template engines (handlebars without precompilation)
  • JSON parsing (use JSON.parse() instead of eval())

If you absolutely can’t remove it, add 'unsafe-eval' to script-src. But understand this significantly weakens XSS protection.

4. “Refused to load the script”

R b e e f c u a s u e s d e t i o t l v o i a o d l a t t h e e s s t c h r e i p f t o l ' l h o t w t i p n s g : / C / o c n d t n e . n e t x a S m e p c l u e r . i c t o y m / P s o c l r i i c p y t . d j i s r ' e c t i v e

What happened: A script is being loaded from a domain not in your script-src.

Fix: Add the domain to script-src:

s c r i p t - s r c ' s e l f ' h t t p s : / / c d n . e x a m p l e . c o m

5. “Refused to load the image”

R v e i f o u l s a e t d e s t o t h l e o a f d o l t l h o e w i i n m g a g C e o n ' t d e a n t t a : S i e m c a u g r e i / t p y n g P ; o b l a i s c e y 6 4 d , i . r . e . c ' t i b v e e c a u s e i t

What happened: A data URI image (base64 encoded, inline SVG) is being blocked.

Fix: Add data: to img-src:

i m g - s r c ' s e l f ' d a t a : h t t p s :

6. “Refused to connect to”

R v e i f o u l s a e t d e s t o t h c e o n f n o e l c l t o w t i o n g ' h C t o t n p t s e : n / t / a S p e i c . u e r x i a t m y p l P e o . l c i o c m y / d d a i t r a e ' c t b i e v c e a u s e i t

What happened: A JavaScript fetch() or XMLHttpRequest is trying to reach a domain not in connect-src.

Fix: Add the domain to connect-src:

c o n n e c t - s r c ' s e l f ' h t t p s : / / a p i . e x a m p l e . c o m

7. “Refused to load the font”

R i e t f u v s i e o d l a t t o e s l o t a h d e t f h o e l l f o o w n i t n g ' h C t o t n p t s e : n / t / f S o e n c t u s r . i g t s y t a P t o i l c i . c c y o m d / i s r / e . c . t . i ' v e b e c a u s e

What happened: Google Fonts (or another font service) is being blocked.

Fix: Add font domains:

f s o t n y t l - e s - r s c r c ' s ' e s l e f l ' f ' h t h t t p t s p : s / : / / f f n o t n s t . s g . s g t o a o t g i l c e . a c p o i m s . c o m

8. “Refused to frame”

R b e e f c u a s u e s d e t i o t d v i i s o p l l a a t y e s ' h t t h t e p s f : l / l y o o w u i t n u g b e C . o c n o t m e / n e t m b S e e d c / u . r . i . t ' y i P n o l a i c f y r a d m i e r e c t i v e

What happened: An iframe is trying to load content from a domain not in frame-src.

Fix: Add the domain to frame-src:

f r a m e - s r c ' s e l f ' h t t p s : / / w w w . y o u t u b e . c o m

Systematic Debugging Approach

When you have dozens of violations, don’t try to fix them one by one. Use this approach:

1. Filter by directive. Group violations by the directive they violate (script-src, style-src, etc.). This shows you which part of your policy needs the most work.

2. Filter by source. Group by the blocked URI. You’ll often find that a single third-party service causes most violations.

3. Check if it’s necessary. Before adding a domain to your policy, ask: do we actually need this? I’ve found analytics scripts from discontinued A/B tests, old chat widgets that were replaced months ago, and tracking pixels nobody remembers adding. Remove the dead code first.

4. Add one domain at a time. Don’t bulk-add domains. Add one, test, move on.

Using the Browser’s CSP Report

Both Chrome and Firefox can send detailed violation reports. In Chrome:

  1. DevTools → Application → Content Security Policy
  2. Click “Send violation reports” (a checkbox)
  3. Open the “View reports” panel

This shows you structured violation data that’s much easier to analyze than console errors.

Server-Side Reporting

For ongoing monitoring, set up a report endpoint:

C o n t e n t - S e c u r i t y - P o l i c y : . ; r e p o r t - u r i / a p i / c s p - r e p o r t

And log the reports server-side. This way you catch violations from real users, not just yourself in DevTools.

Quick Reference: Common Services and Their CSP Requirements

Service script-src style-src img-src connect-src frame-src
Google Analytics googletagmanager.com google-analytics.com google-analytics.com
Google Tag Manager googletagmanager.com googletagmanager.com googletagmanager.com
Stripe js.stripe.com api.stripe.com js.stripe.com
Intercom widget.intercom.io, intercomcdn.com intercomcdn.com api-iam.intercom.io intercom-sheets.com
Hotjar static.hotjar.com, script.hotjar.com static.hotjar.com *.hotjar.com
hCaptcha js.hcaptcha.com, hcaptcha.com *.hcaptcha.com *.hcaptcha.com

Verify Your Fix

After fixing violations, use headertest.com to confirm your CSP is properly configured.