为什么我可以在JS中设置样式而不违反内容安全策略的style-src'self'？

Question

设置style-src为'self'禁用通过style标记或style属性使用内联样式.这按预期工作.style通过JS 添加元素也被阻止.

但我真的很惊讶,我仍然可以设置一个属性HTMLElement的style对象.例如,这不会触发CSP违规:

document.getElementById('test').style.backgroundImage = 'url("image.png")';

这如何防止诸如此处或此处描述的攻击？

Answer 1

大概是因为如果您已经允许脚本注入，那么样式修改是您最不用担心的。

样式元素和属性被阻止，以防止无需JS 即可完成的恶意破坏。如果有人修改 DOM 本身（而不仅仅是表示），那么无论如何，情况都会严重得多。

您提供的第二个链接与此无关；该演示已不再启动，但显然它所做的是链接到引用页面，就好像它是样式表一样，并利用一些有效的 css 已植入引用页面中的两个位置来处理中间文本的事实作为图像 URL。CSP 在那里不相关，因为攻击来自另一个方向；攻击链接页面将被故意设置为允许加载外部样式表。（我不认为可以在 css 文件本身（或被视为 CSS 的其他文件）的 HTTP 响应上设置 CSP 标头，以禁止外部链接到它，尽管我可能是错的。）