浏览器是否会忽略从 React 设置样式属性的 style-src CSP 指令？

Question

我正在为我的网络应用程序设置以下内容安全策略指令：

style-src 'self' 'nonce-{NONCE_GOES_HERE}

。我希望不应用内联样式（使用

style

属性添加）。但实际上它们是这样的，尽管每个内联样式都会抛出有关 CSP 违规的错误消息。当我使用

style-src-attr

指令时，也会观察到同样的情况。最新版本的 Chrome、Firefox、Edge 和 Safari 中会出现这种情况。这种行为是预期的吗？如果是，是否在任何地方指定（CSP 规范说相反）？

UPD：这可以使用 React 重现。使用纯 HTML+CSS 指令可以按预期工作。请参阅示例：https://undeletable.name/CSP/ 最低重现条件：

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-bm9uY2U='" />

<meta http-equiv="Content-Security-Policy" content="style-src-attr 'none'" />

Answer 1

看起来这是可能的，因为React使用CSSOM（即设置像

document.getElementById('id').style.background = 'red'

这样的样式。事实上，这并不违反禁止内联样式的CSP指令。

但是，直接在元素的 style 属性上设置的样式属性不会被阻止，从而允许用户通过 JavaScript 安全地操作样式