javascript - 禁用内联样式 CSP 和 HTML 元素的动态定位

Question

客户更改了他们的 CSP 以禁止在他们的服务器上使用内联样式。据我所知，这意味着我们不能再使用 JS 来动态定位/动画/样式化 HTML 元素，例如我们无法通过 JS 检测 DOM 元素的位置并在其旁边放置另一个元素。

这是正确的吗？是否有一种变通方法可以让我们在存在此 CSP 限制的情况下为 DOM 元素动态设置动画？

Answer 1

此问题的正确解决方法是使用 CSS 对象模型 (CSSOM)。

给定以下样式设置方式:

1. <p style="left: 343px">...</p> // fails due to CSP
2. document.getElementById(id).setAttribute('style', 'left: 343px'); // fails due to CSP
3. document.getElementById(id).style.left = '343px';

只有最后一个才能成功遵守 style-src: self 的 CSP 指令(因为它使用了 CSSOM)。

这就是为什么要使用 jQuery's .css()功能有效:

When using .css() as a setter, jQuery modifies the element's style property. For example, $( "#mydiv" ).css( "color", "green" ) is equivalent to document.getElementById( "mydiv" ).style.color = "green".