search

trezy / next-safe

https://trezy.gitbook.io/next-safe/
BSD 3-Clause "New" or "Revised" License
172 stars 20 forks source link

What is the best policy if you use a css-in-js framework like emotion? #37

Closed nibtime closed 2 years ago

nibtime commented 2 years ago

I use emotion for CSS-in-js in my apps, which has a variety of benefits over traditional CSS for non-security reasons (no blocking roundtrip to fetch a stylesheet, minimal CSS per page for the components it uses) Together with Tailwind (via twin.macro) it's the best thing I have ever used for web design by a far margin, in results, development speed, and dev experience. So not using this is not an option for me.

However, it produces a batch of inline style tags containing all the styles a page is going to use and places them in the head tag. So for making this work with CSP, I have to set { 'style-src': ['\'unsafe-inline\''] }

Is that the best way of doing it or is there another recommended configuration for setups like that?

nibtime commented 2 years ago

atm, there is no other way than going with 'unsafe-inline' for this, which imposes an opportunity for serious attacks (like. CSS keylogging).

I am working on it to enable a strict approach for this case without 'unsafe-inline': https://github.com/nibtime/next-safe-middleware/issues/6