添加 CSP 标头时，样式标签中的 Nonce 值为空

Question

我们已经使用Java过滤器类实现了在Angular中添加CSP标头的代码。在角度方面，我们也实现了

shared_styles_hosts.ts

。现在，我们可以看到 CSP 标头，但不知何故，样式标签上的随机数值变为空，因此我们在多个元素上收到以下错误 -

“拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' https://fonts.googleapis.com”。“unsafe-inline”关键字、哈希值或随机数是需要。”

当我们检查开发者控制台时，我们注意到在

shared_styles_host.ts

文件中的以下行收到此错误 -

styleNodes.push(host.appendChild(styleEl));

我们不能使用不安全内联或散列。此外，由于项目结构的原因，我们无法将所有内联样式移动到其他文件。所以剩下的唯一选择就是正确实现nonce。有谁知道为什么样式标签中的随机数值为空？

Answer 1

我知道这可能已经太晚了，但我们也遇到了这个问题，我无法通过互联网搜索找到答案。

这实际上是浏览器的预期行为，与 Angular 无关。随机数仍然存在，只是您看不到它：Google Chrome 从脚本标签中剥离随机数值

在我们的例子中，解决方案是，CSP 中的 nonce-... 指令没有用“”引用（如“nonce-...”）。