content security policy - What is a good replacement for 'styled-components' in React application to produce secure web app?

Question

I came to a project that uses styled-components in the frontend written in React.

It seems the decision to use it was quite unfortunate as this component ignores security aspects and generates inlined styles.

Currently, in order to have the app running, there must be weakened security by specifying style-src 'unsafe-inline' in Content Security Policy, which is not acceptable in enterprise applications (at least in our corporate).

It seems there is no workaround with this library except using nonce when server side rendering but we have currently static web and would prefer not to add SSR so this does not seem to be the right direction for us.

There is quite lot of code and rewriting the app completely would require weeks maybe even a few month. Any experience with gradual moving away from styled-components? Is there some less painful way to get the security back?

question from:https://stackoverflow.com/questions/66067089/what-is-a-good-replacement-for-styled-components-in-react-application-to-produ

Answer 1

Inline styles could be of 3 kinds:

1. <style>...</style> blocks, they can be allowed with 'hash-value'.
2. style attribute in tags like <tag style='color:green; padding:0;'>, there is no way to allow them other than 'unsafe-inline' token.
3. Javascript calls of HTMLElement.setAttribute('style'). There is a workaround by substitutes the system HTMLElement.setAttribute(style) with HTMLElement.style.property = val.