Nextjs

If you use Clerk for auth, Content Security Policy gets awkward fast. Clerk is easy to drop into a React or Next.js app. CSP is not. The friction shows up the moment you try to lock down script-src, remove unsafe-inline, or support Clerk’s hosted flows, widgets, and frontend API calls without punching giant holes in your policy. I’ve dealt with this in production, and the pattern is always the same: auth works fine until someone turns on a real CSP, then sign-in modals break, frontend API calls fail, or a wildcard gets added “temporarily” and never leaves. ...

tRPC feels deceptively simple from a CSP perspective. There’s no <script> injection problem in the RPC layer itself, so people assume CSP barely matters. Then production hits. Queries fail only in the browser. Subscriptions work locally but die behind a proxy. SSR is fine, client-side navigation breaks. Someone tightens default-src and suddenly your API calls start throwing opaque network errors. I’ve seen this more than once: the app is “secure” on paper, but the CSP doesn’t actually match how tRPC talks over HTTP and WebSockets. ...

Next.js developers usually think about CSP at the page level: block inline scripts, add nonces, lock down third-party tags. That’s the right instinct, but API routes deserve attention too. Strictly speaking, CSP is mostly a browser-enforced policy for documents and some subresources. Your JSON API endpoint isn’t executing scripts in the browser, so a Content-Security-Policy header on /api/users won’t do much for a normal application/json response. That’s the part people skip. ...

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. ...