CSP: Refused to Connect

What this error means

Your page has a Content Security Policy with a connect-src directive that doesn't include the domain your JavaScript is trying to fetch from. The browser blocked the request before it was sent.

This affects: fetch(), XMLHttpRequest, WebSocket connections, and EventSource.

The fix — add the domain to connect-src

# Current (too restrictive)
Content-Security-Policy: default-src 'self'; connect-src 'self';

# Fixed — add the API domain
Content-Security-Policy: default-src 'self'; connect-src 'self' https://api.example.com;

# For Google Analytics
Content-Security-Policy: connect-src 'self' https://www.google-analytics.com https://analytics.google.com;

# For Stripe
Content-Security-Policy: connect-src 'self' https://api.stripe.com;

Common APIs and their connect-src values

• Google Analytics 4: https://www.google-analytics.com https://analytics.google.com
• Stripe: https://api.stripe.com
• Intercom: https://api.intercom.io wss://nexus-websocket-a.intercom.io
• Hotjar: https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com
• Sentry: https://o{id}.ingest.sentry.io

WebSocket connections

WebSocket URLs use ws:// and wss:// schemes and must also be in connect-src:

connect-src 'self' wss://realtime.example.com;

Fallback from default-src

If you don't have an explicit connect-src, it falls back to default-src. Adding connect-src 'self' overrides this and blocks everything not listed — that's why adding a single domain breaks all other fetch calls if they're not also listed.