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

Question

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

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

我们不能为此真正地创建类，想象一下例如剩下的可能是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属性都可用于在网站上创建误导性或其他意外内容。

我看到的选项是：

使用CSP nonce允许在选定元素上使用内联style属性。 这类似于unsafe-inline ，但是更具选择性（因此更安全）。
在所有常见浏览器中实现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> 
```
但是，请注意， 当前没有在任何浏览器中实现此功能 。 它存在于CSS3规范中，但尚未实现。 实际上可能要过几年（如果有的话）。