动态加载CSS的CSP策略

Question

我正在将来自第三方的JavaScript文件加载到我的应用程序中，该文件会在页面上注入一个iframe。当该iframe加载时，它会加载自己的JavaScript代码，并在父窗口中创建一个内联样式标签。

由于这种流程，我必须在内容安全策略的style-src指令中添加"unsafe-inline"。是否有类似于strict-dynamic的东西可以用于加载这种样式？或者是否有某种解决方案，使我不必在CSP中列出"unsafe-inline"，但仍允许加载这个样式表？

我能想到的最好的办法是每隔几小时扫描此重定向文件并为其生成子资源完整性哈希，以便定期将其注入到我的CSP中，但这似乎非常脆弱。

- kddeisz

---

您的页面上是否有其他内联样式或脚本？如果没有，是否有选项可以禁用此样式标签的“注入”，并由您自己显式地包含这些样式？或者安德·巴特（Anand Bhat）答案末尾提到的安全措施是否足够满足您的需求？ - Dan Macak

您可以生成一个“nonce”，需要将其包含在CSP头和样式标签中。 - allo

@DanMacák 很遗憾，厂商没有禁用注入的选项。那里提到的安全措施对于我们所寻求的并不足够。 - kddeisz

@kddeisz，那么我认为你可以做两件事情。首先，向第三方库（顺便问一下，它是哪个库？）提交文件功能或拉取请求，以便能够排除该样式注入并指定 style-src，例如 'self' https://3rdparty.lib/styles/* 'unsafe-inline'。由于你现在必须使用内联样式标签而不能使用哈希或随机数，缩小从样式标签中加载的内容是我所看到的唯一解决方案。虽然这不像完全排除不安全的内联源那样安全，但仍比根本没有 style-src CPS 措施要好得多。 - Dan Macak

@DanMacák 是的，这正是我担心的。供应商是Intercom。我已经向他们提交了一张工单，并正在等待他们提供某种解决方案。不幸的是，它是封闭源代码，否则我会尝试自己构建它。 - kddeisz

Answer 1

通过CSS对象模型（CSSOM）设置CSS可以与CSP一起使用。 因此：

document.getElementById(id).style.left = '343px';

在这种情况下，您可能需要说服第三方供应商更改其JavaScript。

来源：https://dev59.com/zoHba4cB1Zd3GeqPRXbg#29089970

- Stephen R

---

在这种情况下，它们实际上是将样式表注入到DOM中，而不是修改元素。 - kddeisz

你说：“一个JavaScript文件……它将在页面上注入一个iframe。当该iframe加载时，它会加载自己的JavaScript，该JavaScript会在父窗口中创建内联样式标签。”这意味着样式是由JavaScript创建的，而不是从样式表中读取的。我并不是说说服第三方供应商改变做事方式很容易；仅仅是说从技术上讲实现你要求的事是可能的。（话虽如此，如果他们同意的话，对他们来说改变也不应该太难！） - Stephen R

谢谢Stephen。我明白你的意思，我只是在说他们没有使用JavaScript在DOM元素上设置CSS属性，而是加载一个内联样式标签，由浏览器处理。 - kddeisz

没错，这就是为什么CSP正在阻止它。 - Stephen R