Crisp is easy to drop into a site. Getting it past a strict Content Security Policy is where people usually lose an afternoon. The widget loads scripts, opens network connections, pulls images and fonts, and may embed frames depending on what features you enable. If your CSP is tight — and it should be — you need to explicitly allow what Crisp uses without blowing a hole in the rest of the policy. ...
Adyen is one of those integrations where CSP gets real fast. A normal marketing site can get away with a basic policy and a couple of allowlists. Payments are different. You’re loading third-party scripts, embedding frames, sending XHR requests to payment endpoints, and sometimes dealing with redirects or 3D Secure flows. If your CSP is too strict, checkout breaks. Too loose, and you’ve basically given up the point of having CSP. ...
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. ...