禁止内联样式CSP和HTML元素的动态定位

Question

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

它是否正确？有没有一种解决方法可以让我们动态地为这些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';

只有最后一个才能成功符合CSP指令style-src: self(因为它使用的是CSSOM).

这就是使用jQuery的.css()函数的原因:

使用时.css()作为一个setter,jQuery修改了元素的style属性.例如,$( "#mydiv" ).css( "color", "green" )相当于document.getElementById( "mydiv" ).style.color = "green".

Answer 2

JavaScript 在客户端执行。除非过滤软件非常聪明，否则您仍然可以添加动态内联样式，因为服务器不知道浏览器中发生了什么。但是，您不能将内联样式添加为发送给客户端的 HTML 的一部分。