Content Security Policy Headers: The Security Feature That Breaks Everything Until You Configure It Right

Content Security Policy is arguably the most powerful browser security feature available, and also the most likely to break your site the moment you enable it. I have seen production deployments go sideways because someone added a CSP header without understanding the cascading effects. The concept is simple. The implementation is where it gets interesting. What CSP does A CSP header tells the browser which sources of content are allowed on your page. Scripts, styles, images, fonts, frames, connections -- every type of resource can be restricted to specific origins. Without CSP, a cross-site scripting (XSS) vulnerability lets an attacker inject any script from any source. With a properly configured CSP, even if an attacker finds an injection point, the browser refuses to execute the script because it does not come from an allowed source. Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline' This header says: by default,