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

Question

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

Answer 1

是的，有办法。

这里对此有很多讨论:https://github.com/w3c/webappsec-csp/issues/212

最后简要总结一下:

CSP is checked at parsing and blocks parsing the style attribute. Any direct operations go through.

使用 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/