CSP-当动态放置页面元素时，如何解决style-src unsafe-inline

Question

在我们的应用程序代码中，我们允许一些对象在页面中拖放。此外，我们还需要将弹出窗口之类的内容放置在我们在页面等中放置的按钮和对话框的下方。

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

• z-index
• 顶部，底部，左侧，右侧
• 高度，宽度

我们真的不能为此创建类，例如，假设剩下的数字可能是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仍允许这些类型的样式。

（请参见此处的示例。您不要要向元素添加文字“ style”属性，但要使用CSSOM — https://stackoverflow.com/a/29089970/339440）

Answer 2

不幸的是，目前尚无“干净”的方法可以做到这一点。 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规范中，但尚未实现。可能要花上几年（如果有的话）。