CSS 模块样式被 CSP 阻止，而 style-src 指令没有不安全内联

Question

我有一个使用 CRA 创建的 React 应用程序，并且我正在使用 CSS 模块来设置组件的样式。

我创建带有

.module.css

前缀的 CSS 文件。示例：

ComponentName.module.css

然后我将 CSS 文件导入到组件中，我想像这样使用它：

import styles from "./css/ComponentName.module.css";

最后我使用

className

属性应用样式：

const welcomeText = (
    <div className={styles["welcome-text"]}>
        <h1 className={styles.title}>Welcome</h1>
    </div>
);

但是，通过使用 CSP 并将

style-src

指令设置为

'self'

，所有样式都会被阻止。我还必须添加

'unsafe inline'

才能正常工作。

有没有办法定义

.module.css

文件及其使用

className

作为

style-src

指令的有效源？ 如果没有，还有哪些其他样式化 React 组件的方法也与

style-src 'self'

兼容而不需要

'unsafe-inline'

？样式化组件可以工作吗？

或者使用

unsafe-inline

通过 CSS 模块设置组件样式是否安全？

谢谢！

我尝试在 Google 上寻找有关如何使 CSS 模块的使用与 CSP 兼容的答案，但我还没有找到。

编辑： 我想使用的CSP配置是这个

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self' http://localhost:8090
img-src data: https: http:;
script-src 'self';
font-src 'self' https://fonts.gstatic.com;
style-src 'self' https://fonts.googleapis.com;"/>

但是，加载页面时，所有 CSS 都消失了，并且控制台多次记录这些错误：

 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). styleTagTransform.js:12
 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). insertBySelector.js:36

要消除错误并使应用的 CSS 正常工作，必须添加

unsafe-inline

：

 style-src 'self' https://fonts.googleapis.com 'unsafe-inline';"

Answer 1

即使您的 html 代码中没有内联样式，您也可以通过 javascript 文件注入内联样式。而是让 javascript 代码修改 css 选择器并将 css 代码本身移动到 css 文件。

Answer 2

您有没有找到解决方案？我也遇到同样的事情