如何让脚本在不破坏 CSP 的情况下使用 setAttribute 'style'

我正在努力使我的 CSP 政策尽可能严格。我需要在我的捆绑包中包含 3d 派对组件。但它使用element.setAttribute('style'...)破坏CSP的方法。有没有办法允许这个特定的脚本以这种方式内联样式？

是的，有办法。

这里有很多关于这个的讨论：https://github.com/w3c/webappsec-csp/issues/212

最后简单总结一下：

CSP 在解析时进行检查并阻止解析样式属性。任何直接操作都会进行。

Using setAttribute调用 HTML 解析器并触发 CSP。

所以，而不是：

.setAttribute("style","background:red"); // needs HTML parsing

你需要：

.style.background = "red"; // direct manipulation

一种方法有效而另一种方法无效，这听起来可能很奇怪，我认为这里的理解是 HTML 属性和 DOM 属性之间存在细微的区别。https://joji.me/en-us/blog/html-attribute-vs-dom-property/