Requires unsafe-inline style-src?

[blackcathacker]

I thoroughly enjoy the direction this is headed, but I am concerned about the potential security implications this might have. With jss's use of <style>css</style>, this will require allowing CSP's style-src unsafe-inline correct? It actually seems unlikely, but is there any potential to precompile the CSS required into a separate file to avoid this? I much prefer inline styles, but I'm not convinced this trade-off is worth the performance improvements over direct inline styles or the necessity of using css-modules. Any thoughts or insights? Am I off base here?

[nathanmarks]

@blackcathacker

You're 💯 correct. Many people will want to precompile the CSS into a separate file and that's totally a possibility. Not unlikely at all.

There's actually a bunch of options... it depends on the use case. But technically there's no reason why you wouldn't be able to generate .css files if that's what you needed. There would probably be cases where you would have to skip out on exploiting certain features (since the static css is precompiled...) but if you wanted to optimize for generating a static css asset there's also the potential that the prod build could further optimize by replacing the client side css processing with just class strings from the static css generation.

[blackcathacker]

Ok. That makes some sense, and while I haven't looked into it, sounds like a fairly difficult problem since the styles seem to be created in the render methods. To generate a CSS file you'd have to somehow find all possible components and all possible styles? And that would make dynamic styles fairly difficult(diff-ing pre-built styles with dynamic styles and setting inline styles for the remainder)? Am I just not seeing the easy route to a build step?

[nathanmarks]

@blackcathacker

If you're not planning on doing anything fancy such as customizing the theme on the fly, it should be possible to precompile all the CSS. I think this will require some tooling to help users.

Also, FWIW, at Shopify we have unsafe-inline allowed in the CSP headers (not for CSS in JS specifically, we aren't using CSS in JS yet). I think unsafe-inline is only unsafe if your other CSP rules aren't up to snuff.