什么是 React 应用程序中“样式化组件”的良好替代品以生成安全的 Web 应用程序？答案

【问题标题】：What is a good replacement for 'styled-components' in React application to produce secure web app?什么是 React 应用程序中“样式化组件”的良好替代品以生成安全的 Web 应用程序？
【发布时间】：2021-02-05 16:36:23
【问题描述】：

我遇到了一个在前端使用 React 编写的 styled-components 的项目。

使用它的决定似乎很不幸，因为该组件忽略了安全方面并生成内联样式。

目前，为了让应用程序运行，必须通过在内容安全策略中指定style-src 'unsafe-inline' 来削弱安全性，这在企业应用程序中是不可接受的（至少在我们公司中）。

似乎除了在服务器端渲染时使用 nonce 之外，这个库没有解决方法，但我们目前有静态 web，不希望添加 SSR，所以这对我们来说似乎不是正确的方向。

代码非常多，完全重写应用程序需要几周甚至几个月的时间。有没有逐渐远离样式化组件的经验？有没有一些不那么痛苦的方法来恢复安全性？

【问题讨论】：

标签： styled-components content-security-policy

【解决方案1】：

内联样式可以有 3 种：

<style>...</style> 块，可以通过 'hash-value' 来允许。
<tag style='color:green; padding:0;'> 等标签中的样式属性，除了'unsafe-inline' 令牌之外没有其他方法允许。
HTMLElement.setAttribute('style') 的 Javascript 调用。有一个workaround 将系统HTMLElement.setAttribute(style) 替换为HTMLElement.style.property = val。

【讨论】：