Nonce

Emotion is great until you turn on a real Content Security Policy and your app suddenly looks naked. That’s the usual collision: Emotion injects styles at runtime with <style> tags, while CSP blocks inline styles unless you explicitly allow them. A lot of teams “fix” that by adding 'unsafe-inline' to style-src, which defeats a big chunk of why you enabled CSP in the first place. If you’re using Emotion on a production app, the right fix is usually a nonce-based CSP and making sure Emotion attaches that nonce to every injected style tag. ...

Ariakit is a headless UI toolkit, which is good news for CSP. It doesn’t force a CSS-in-JS runtime, it doesn’t need eval, and it generally stays out of your way. That means you can run a pretty strict Content Security Policy without fighting your component library. The tricky part usually isn’t Ariakit itself. It’s your app shell, analytics, consent tools, inline bootstrapping scripts, and whatever your framework injects during hydration. ...

If you’re serious about XSS prevention, nonce-based CSP is the way to go. It’s stronger than hash-based CSP, more maintainable than domain whitelisting, and once you understand the pattern, it’s not that complicated. What Is a Nonce? A nonce (Number Used Once) is a random string generated by your server for each HTTP request. You include it in your CSP script-src directive AND in every <script> tag on the page. Scripts without the correct nonce are blocked. ...