CodePark/ questions / Content Security Policy in depth
START PRACTICINGPRACTICE
Frontend question · Frontend security › Content Security Policy in depth

How do you roll out a Content Security Policy on an existing app without breaking it?

Start in report-only mode, fix what it reports, then enforce. The header Content-Security-Policy-Report-Only makes the browser report violations without blocking anything.

Steps:

  • List what runs. Note your scripts, styles, fonts, frames, API hosts and third-party tools such as analytics and chat widgets.
  • Write a strict policy. Use nonces or hashes with 'strict-dynamic', plus object-src 'none' and base-uri 'none'. Send it as report-only.
  • Collect reports. Point the report-to directive at an endpoint you name in the Reporting-Endpoints header. Many teams also add the older report-uri for wider browser support.
  • Fix the violations. Move inline handlers like onclick="..." into addEventListener. Add the nonce to inline scripts. Remove eval-style code.
  • Filter the noise. Browser extensions cause many reports that aren't your bugs.
  • Enforce. Switch to Content-Security-Policy. You can send both headers at once: the enforced policy, plus a stricter report-only one for the next step.

One limit: a <meta http-equiv> tag can hold a policy, but it can't do report-only, frame-ancestors or reporting. Use real headers for those.

  • Content-Security-Policy-Report-Only reports violations without blocking anything.
  • Start with a strict nonce- or hash-based policy and collect reports with report-to or report-uri.
  • Move inline event handlers into addEventListener and add nonces to inline scripts.
  • Expect noise from browser extensions.
  • Enforce once the reports are clean, and keep a stricter report-only policy for the next step.