CSP - 如何解决 style-src unsafe-inline - 当具有动态定位的页面元素时

Question

在我们的应用程序代码中，我们允许一些对象在页面上拖放。此外，我们还有诸如弹出窗口之类的东西，它们需要定位在我们在页面中定位的按钮和对话框下方。

为此，我们需要允许以下内联 css 属性

• z-索引
• 上、下、左、右
• 高度宽度

我们真的不能为此创建类，想象一下，例如左边可能是 0 到 20000，所以我们需要数百万个类。

除了内联css之外，我看不到任何其他方式。

所以要解决 CSP ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ) 那么这意味着我们需要完全允许style-src: unsafe-inline

我确定这是一个常见的场景。人们如何看待这个案子？我们还使用 veracode 来扫描我们的软件，所以我认为我们只是通过解释我们只允许一组内联 css 属性来“模仿”这一点。

但我认为也许 CSP 应该允许动态 css 属性的某个子集。

有没有人遇到过这种情况并有任何想法？

Answer 1

当您使用 CSSOM 通过 JavaScript 将 CSS 写入元素时，这与字面编写 style="..." 不同；相反，您直接操作 DOM [更正：CSSOM]。即使不允许不安全的内联样式，CSP 也允许这些类型的样式。

（见这里的一个例子你。不要想字面的“风格”属性添加到元素，但使用CSSOM - /sf/answers/2036297931/）