禁止内联样式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';

只有最后一个会成功遵守style-src: self的CSP指令（因为它使用的是CSSOM）。

这就是使用jQuery's .css()函数的原因：

  

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

Answer 2

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