Posts

Content Security Policy: The Complete Guide for 2026 Content Security Policy, usually called CSP, is one of the most effective browser-side defenses against cross-site scripting, malicious third-party script execution, data injection, and a wide range of content loading abuses. When configured well, CSP reduces the damage an attacker can do even if some unsafe markup or script reaches the page. CSP is not a replacement for output encoding, input validation, secure templating, sandboxing, dependency review, or HTTP-only cookies. It is a powerful second line of defense. It tells the browser which resources are allowed to load, which scripts may execute, where forms may submit, whether the page may be framed, and where violations should be reported. ...

WordPress and Content Security Policy have a complicated relationship. WordPress was built in an era before CSP existed, and it shows. The admin panel injects inline scripts constantly. Plugins do whatever they want. Themes include jQuery from who-knows-where. But here’s the thing: your WordPress site is a target. It powers 43% of the web, which means attackers have spent years finding ways to exploit it. Adding CSP is one of the most impactful things you can do to protect it. ...

Let me be blunt: if you’re not running Content Security Policy on your website, you’re leaving the front door wide open for Cross-Site Scripting (XSS) attacks. And no, input sanitization isn’t enough. It never has been. I’ve seen countless security audit reports where everything looks great on paper — input validation, output encoding, WAF rules — but one missing CSP header turns all of that into a suggestion rather than a guarantee. ...

I keep a copy of this page bookmarked because I can never remember the exact syntax for some of these directives. CSP has a lot of them, and most documentation either glosses over the details or buries them in paragraphs of text. Here’s every directive you’ll actually use, with examples and the gotchas that trip people up. Fetch Directives These control what the browser is allowed to load. They’re the core of any CSP policy. ...

Laravel is one of the easier frameworks to add CSP to, thanks to its middleware system and Blade templating. You can have a working nonce-based CSP policy in about 30 minutes — I’ve done it multiple times and it really is that straightforward. Here are two approaches: using the spatie package (fastest setup) and custom middleware (more control). Option 1: The spatie/laravel-csp Package If you want something that works out of the box: ...

React and Next.js make CSP harder than it needs to be. The development workflow assumes you can run inline scripts, eval is baked into Webpack’s hot module replacement, and your CSS-in-JS library is generating styles that CSP doesn’t like. But you can make it work. Here’s how, based on what I’ve seen actually work in production. The Core Challenge React apps commonly do things that CSP hates: Inline scripts for initial state hydration CSS-in-JS libraries (styled-components, emotion) generating inline styles Webpack HMR using eval() in development Third-party scripts (analytics, A/B testing) loaded dynamically The good news: in production, most of these issues go away. HMR doesn’t exist, scripts get bundled, and you have a build step that can generate nonces. ...

You can’t fix what you can’t see. CSP reporting is how you see what’s happening with your Content Security Policy in production — without blocking anything. Think of it as a canary in a coal mine. The canary doesn’t prevent problems. It tells you about them early enough to do something about it. report-uri vs report-to There are two ways to receive CSP violation reports. Confusingly, they coexist and serve slightly different purposes. ...

There’s nothing quite like deploying a CSP policy to production and watching your analytics break, your chat widget disappear, and your forms stop working. All at the same time. This guide is about surviving that experience and fixing things quickly. Where to Find CSP Violations Chrome Open DevTools (F12) → Console tab. CSP violations show up as red errors: R C e o f n u t s e e n d t t S o e c e u x r e i c t u y t e P o i l n i l c i y n e d i s r c e r c i t p i t v e b : e c " a s u c s r e i p i t t - s v r i c o l ' a s t e e l s f ' t " h e f o l l o w i n g For a more detailed view: DevTools → Application → Content Security Policy. This shows you the current policy and a log of violations. ...

I’ve seen too many CSP implementation guides that show you a perfect policy for a perfect application and pretend everything will just work. In the real world, implementing CSP is messy. You’ll hit issues you didn’t expect. Your CMS will inject inline scripts you forgot about. That analytics tool your marketing team added last quarter? It breaks everything. This guide is for people implementing CSP on real applications. Not demos. Not fresh create-react-app projects. The kind of application that has accumulated technical debt, third-party scripts, and “temporary” hacks that have been there for three years. ...