1

我想发布一个具有严格内容安全策略的 Web 应用程序。最后剩下的问题是：style-src 'self';

我在浏览器控制台中收到错误消息，指出根据 CSP 中的 style-src 指令阻止加载资源。该错误引用了 main..js 文件中的代码，该文件由ng build --prod.

如果我添加'unsafe-inline'到style-srcCSP 中的指令，一切正常，但是，我不想这样做。

我可以在我的代码或构建选项中做些什么来使 Web 应用程序与更严格的 CSP 一起工作吗？

我使用的是 Angular 11，刚刚升级到 12 并且有同样的错误。

谢谢！

4

2 回答 2

3

分辨率选项：

1. 使用 SHA-256 哈希

如果此类违规的数量相对较少，您可以添加它们的哈希值。例如，如果您在日志中看到此内容：

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'report-sample'". Either the 'unsafe-inline' keyword, a hash ('sha256-YpcdPia2p132TdnpnY8zwrWWSqByEKGZBY5iqsLBkSg='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

添加'sha256-YpcdPia2p132TdnpnY8zwrWWSqByEKGZBY5iqsLBkSg=' 您可能还需要'unsafe-hashes'- 取决于上下文。 注意：这种方法不容易维持。样式的微小变化将迫使您重新创建散列。仅当您拥有少量此类内联脚本时，它才有用。

2. 随机数

您可以使用 nonce 来“祝福”内联样式并批准它们。但是，即使是提倡 CSP 随机数的 Google 专家通常也不会将它们部署在style-src- 仅在script-src. 注意：这种方法很难部署。需要为每个页面加载生成一个唯一的随机数。

3. 使用'unsafe-inline'- 很好style-src（不适合script-src）

确实，即使设置 CSP style-src 'unsafe-inline' 'self' someurl.com;也比 99.9% 的站点安全得多。超过完全不限制的accounts.google.comstyle-src。 Github有一个很棒的高质量 CSPstyle-src: 'unsafe-inline'

祝你好运！

于 2021-07-20T20:25:09.660 回答
1

如果我添加'unsafe-inline'到style-srcCSP 中的指令，一切正常，但是，我不想这样做。

目前看来这是不可能的。根据 Angular 在 Github 上的支持线程，Angular 应用程序需要在 style-src 中允许“unsafe-inline”（请查看“建议步骤”1。“我们应该明确声明允许在 style-src 中使用 'unsafe-inline'） src 是 Angular 应用程序所必需的。”）。

于 2021-07-21T03:01:46.467 回答