Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
787 views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...