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

Question

在我们的应用程序代码中，我们允许在页面周围拖放一些对象。我们还有一些东西，比如弹出窗口需要放在按钮下面，我们在页面中放置对话框等。

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

• z-index
• 上、下、左、右
• 高度、宽度

我们真的不能为此创造 类，假设 left 例如可以是 0 到 20000，所以我们需要数百万 类.

除了内联 css。

我看不到任何其他方式

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

我相信这是一个常见的场景。人们如何看待这个案子？我们还使用 veracode 扫描我们的软件，所以我认为我们只是 "mitagate" 通过解释我们只允许一组内联 css 属性。

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

有没有人遇到过这种情况，有什么想法？

Answer 1

遗憾的是，目前没有 "clean" 方法可以做到这一点。 CSP 目前没有任何方法可以检查 style 属性以确定它们是否安全；目前还不清楚这是否可能，因为几乎任何 CSS 属性都可用于在网站上创建误导性或其他非预期内容。

我看到的选项是：

1. 使用 CSP 随机数允许选定元素上的内联 style 属性。这类似于 unsafe-inline，但更具选择性（因此更安全）。

2. 当CSS attr()在所有常见浏览器中实现时，您：

   /* ATTENTION: This is not a working example; see below */
   .position-by-attr {
       left: attr(data-left px);
       top: attr(data-top px);
   }
   

   <div class="position-by-attr" left="123" top="456"> … </div>
   

   但是，请注意 this feature is not currently implemented in any browser。它存在于 CSS3 规范中，但尚未实现。它可能需要数年（如果有的话）才能实际使用。

Answer 2

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

（示例见此处。您不想向元素添加文字“样式”属性，但使用CSSOM — )