颜色选择器中的 CSP 和内联样式

Question

我在我的网站上使用 CSP 来尽可能保持锁定状态。我的网站上有一个 HTML 编辑器，我希望允许用户从颜色选择器中选择文本颜色。这涉及将

style="color:#XXXXXX"

添加到受影响的元素，其中

XXXXXX

是来自颜色选择器的 24 位值。我暂时在测试设备上使用

style-src 'self' 'unsafe-inline'

来允许使用内联样式来定义颜色。但如果我在实时系统上这样做，这会让我面临 CSS 注入攻击。

是否有任何方法可以可靠地清理 CSS 以允许在这种情况下安全地使用内联样式，或者是否有另一种方法来保护内联样式，以便只有编辑器可以定义它们（也许使用随机数，我用它来添加 JS 事件HTML 元素的处理程序）？

Answer 1

如果您已经在使用 JavaScript，请勿使用

style

HTML 属性设置颜色。相反，直接使用 JavaScript 设置颜色：

document.getElementById('some-element').style.color = "#123456";