CSP in React and Next.js: The Developer's Guide
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. ...