What is a Content Security Policy?

The problem it solves

If an attacker gets a script onto your page — through a comment field, a compromised dependency, a vulnerable plugin — the browser runs it with full access to your page, your cookies and your users' sessions. CSP means the browser refuses to run it because it did not come from an approved origin.

It is defence in depth. You should still sanitise input; CSP is what limits the damage when something gets through anyway.

How it is written

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self' https://api.example.com;
  frame-ancestors 'self';
  object-src 'none';
  base-uri 'self'

The directives that quietly defeat it

• 'unsafe-inline' in script-src. Allows any inline script, which is exactly what injection produces. This single value removes most of the protection. Use nonces or hashes instead.
• 'unsafe-eval'. Permits eval() and string-to-code conversion. Some older libraries need it; treat it as a debt to remove.
• * as a source. Allows everything, which is the same as having no policy for that directive.
• Broad CDN wildcards. Allowing an entire public CDN means allowing anything anyone has ever uploaded to it.

Rolling it out without breaking things

1. Deploy Content-Security-Policy-Report-Only with your intended policy and a report-uri. Nothing is blocked; violations are reported.
2. Collect for a week. You will find third-party scripts nobody remembered, an analytics tag added by marketing, and a font from a CDN.
3. Widen the policy to cover the legitimate ones and remove the rest.
4. Switch to enforcing mode.
5. Keep the report endpoint. It becomes an alert when someone injects something, which is the point.

Using nonces

To keep inline scripts without 'unsafe-inline', generate a random nonce per response:

Content-Security-Policy: script-src 'nonce-r4nd0mV4lu3' 'strict-dynamic'

<script nonce="r4nd0mV4lu3">…</script>

The nonce must be unpredictable and different on every response. A static one is worse than useless, because it looks like protection and provides none.