TLDR: Start with default-src 'self' and add exceptions as needed. Use report-only mode first to avoid breaking your site.

I added CSP to a production site recently and immediately broke half of it. Inline scripts stopped working, external fonts disappeared, analytics failed silently. Here’s what I learned debugging it.

A reasonable starter CSP Link to heading

This is a solid starting point for most projects:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{random}';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';

The nonce needs to be generated server-side and change on each request. If you can’t do nonces, unsafe-inline for scripts is your fallback, but it significantly weakens the protection.

Inline scripts and nonces Link to heading

CSP blocks inline scripts by default. To allow them safely, use nonces:

Content-Security-Policy: script-src 'self' 'nonce-abc123';

Then in HTML:

<script nonce="abc123">
  // your code
</script>

The nonce must be random and unique per request. If you use a static nonce, attackers can just include it in their injected scripts.

Common directives Link to heading

  • default-src - fallback for all types
  • script-src - JavaScript
  • style-src - CSS
  • img-src - images
  • connect-src - fetch/XHR/WebSocket
  • frame-src - iframes
  • frame-ancestors - who can embed your site (clickjacking protection)

Debugging Link to heading

CSP violations show up in the browser console with details about what was blocked and why. Open DevTools, load your page, and look for red errors.

To test without breaking anything, use report-only mode:

Content-Security-Policy-Report-Only: default-src 'self';

This logs violations without blocking. Run it for a few days in production before switching to enforcing mode.

Tools Link to heading

  • CSP Evaluator - paste your policy to check for weaknesses
  • Report URI - collect and analyse CSP violation reports
  • Browser DevTools - check console for violation messages

Further reading Link to heading