使用“style-src 'self'”CSP策略时如何在React应用程序中应用样式？

Question

我已经在我的 React 应用程序中实现了 CSP 策略：

CSP政策：

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self';">

它阻止了我的 React 组件中的所有 @import 语句，因为在 React 中渲染期间，它从包中获取了样式。但是，从捆绑包中，它提供了样式作为标签来在组件中实现样式。但是 CSP 策略屏蔽了该标签，所以我的样式没有实现。

如何在 React 组件中不使用 @import 语句来实现 CSS 文件？

我的 CSP 政策阻止它们实施。

对于极少数情况，我实现了内联 CSS 来应用样式。但是，对于较大的 CSS 文件，我无法使所有样式内联。如何应用较大 CSS 文件中的样式？

Answer 1

它阻止了所有@import语句？

因为，wepack 尝试将样式添加为内联。

因此您必须通过在

unsafe-inline

指令中添加

style-src

来指定津贴

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self' 'unsafe-inline';">

Answer 2

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self';">

这样，如果原点相同，

@import

应该可以工作。

尝试设置特定域

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://example.com/..;">

或者如果可以的话尝试导入为链接标签

<link href="https://css.example.com/some-file.css" rel="stylesheet">