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

【问题标题】：Banned inline style CSP and dynamic positioning of HTML elements禁止内联样式 CSP 和 HTML 元素的动态定位
【发布时间】：2014-07-12 13:31:47
【问题描述】：

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

这是正确的吗？是否有一种解决方法可以让我们使用此 CSP 限制动态地为 DOM 元素设置动画？

【问题讨论】：

动画不需要javascript，可以使用css3关键帧和过渡设置动画类，只需将类附加到相关元素。然而，可悲的是，无论如何都必须使用 javascript 来执行附加。如果不使用 javascript，不刷新整个页面，就无法为 dom 元素设置动画...
谢谢，但我确实需要能够通过设置 CSS 位置来使用 JavaScript 动态定位元素。例如。我需要查找元素的位置（左），然后通过 JavaScript 更改该位置。所以我需要设置一个像 style="left:343px; 这样的线条样式。在页面加载之前我不知道这个位置是什么。我唯一能想到的就是创建一个涵盖所有类的完整负载这些位置中，（例如left1：left：1px；）还有其他方法吗？
没有人不这样做，如果不是三倍的话，它可能会使您的流量翻倍。看看Here，它可能会给你一个方向：

标签： javascript html css content-security-policy

【解决方案1】：

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

鉴于以下设置样式的方式：

<p style="left: 343px">...</p> // fails due to CSP
document.getElementById(id).setAttribute('style', 'left: 343px'); // fails due to CSP
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"。

【讨论】：

也可以使用document.getElementById(id).style.cssText = 'left: 343px' 与setAttribute 非常相似的API

【解决方案2】：

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

【讨论】：

是的，我没有意识到你可以使用 JS/jQuery 添加样式，例如.css() 等谢谢。
可以修改样式属性，但是使用JS插入样式元素还是违反了CSP。
这是误导，不应被标记为答案。 @MikePost 有正确答案