很简单，我可以添加指令unsafe-inline并完成它，但是我正在摸索着如何以其他方式控制变量数据（例如，按像素定位元素）。
简而言之，我消除了所有内联的东西，只有一件事，即用于平移和缩放图像的转换：
document.getElementById("img")
.setAttribute("style","transform:translate("+x+"px,"+y+"px) scale("+z+")");
这是必需的功能，但是除了为每个可能的像素位置和每个可能的缩放值创建疯狂数量的CSS定义之外，我无法想象要做什么才能替代。那显然是火车残骸。
我当前的解决方案是放宽该特定页面上的CSP并允许内联样式，因为它位于2FA登录访问的后面，因此黑客自然无法访问。显示的所有数据也都由登录用户添加，因此限制了XSS有效负载的可能性。
最佳答案
这里有很多关于此的讨论：https://github.com/w3c/webappsec-csp/issues/212
总结如下：
解析时检查CSP，并阻止解析样式属性。任何直接操作都会通过。
使用setAttribute调用HTML解析器，并触发CSP。
因此，代替：
.setAttribute("style","transform:translate("+x+"px,"+y+"px) scale("+z+")");
您将需要：
.style.transform = "translate("+x+"px,"+y+"px) scale("+z+")";
一种方法有效而另一种无效，这听起来很奇怪，我认为这里的理解是HTML属性和DOM属性之间存在细微的差异。 https://joji.me/en-us/blog/html-attribute-vs-dom-property/
关于javascript - 内容安全策略与可变内联样式(CSP与CSS)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57632373/