问题描述
我想发布具有严格内容安全策略的 Web 应用程序。最后剩下的问题是：style-src 'self';
我在浏览器控制台中收到一条错误消息，指出根据 CSP 中的 style-src 指令阻止加载资源。错误引用了从 ng build --prod 生成的 main..js 文件中的代码。
如果我将 'unsafe-inline' 添加到 CSP 中的 style-src 指令，一切正常，但是，我不想这样做。
我可以在我的代码或构建选项中做些什么来使网络应用程序与更严格的 CSP 一起工作？
我使用的是 Angular 11，刚刚升级到 12 并且出现了同样的错误。
谢谢！
解决方法
分辨率选项：
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.随机数
您可以使用随机数来“祝福”内联样式并批准它们。但是，即使是 Google experts who advocate for CSP nonces 通常也不会在 style-src 上部署它们 - 仅在 script-src 上。
注意：这种方法很难部署。需要为每个页面加载生成一个唯一的随机数。
3.使用 'unsafe-inline' - 对 style-src 很好（对 script-src 不好）
真的，即使设置一个 CSP
style-src 'unsafe-inline' 'self' someurl.com; 比 99.9% 的网站安全得多。超过 accounts.google.com 根本不限制 style-src。
Github 拥有出色的高质量 CSP 与 style-src: 'unsafe-inline'
祝你好运！
,如果我将 'unsafe-inline' 添加到 CSP 中的 style-src 指令，一切正常，但是，我不想这样做。
目前看来这是不可能的。根据 Angular 在 Github 上的支持线程，allowing 'unsafe-inline' in style-src is required for Angular applications（查看“建议步骤”1。“我们应该明确指出，Angular 应用程序需要在 style-src 中允许 'unsafe-inline'。”）。