Content Security Policy (CSP) blocking resources

After adding CSP headers, scripts, styles, images, or fonts stop loading. Browser console shows 'Refused to load' or 'Refused to execute' errors with CSP violation details.

(1) Start with Content-Security-Policy-Report-Only to test without breaking things. (2) Read the error: it tells you which directive blocked which resource. (3) Common directives: script-src for JS, style-src for CSS, img-src for images, connect-src for fetch/XHR/WebSocket. (4) For inline scripts: use nonces (script-src 'nonce-abc123') or hashes rather than 'unsafe-inline'. (5) For dynamic code execution: refactor to avoid it when possible. (6) For CDN resources: add the CDN domain to the appropriate directive. (7) Use report-uri or report-to to collect violation reports. (8) Incrementally tighten: start permissive, then restrict.

CSP tells the browser which resources are allowed to load and execute. It's the primary defense against XSS — even if an attacker injects a script tag, CSP prevents it from running if the source isn't whitelisted.