如何为 HTML 属性设置内容安全策略

Question

我正在使用 node.js，我想为某些内容设置 CSP，例如 JavaScript 和 CSS。我可以使用 nonces 和 hashes，但是我如何允许 HTML 属性，例如：

<div style="color:blue;" onclick="myFunction()"></div>

由于这两个都是 CSS 或 JavaScript，我的 CSP 阻止了它们。我能做什么？我不想实现 unsafe-inline。

Answer 1

'unsafe-hashes' 令牌在 CSP 规范中用于 HTML 属性。但它在 Safari 中仍然是 not supported。

因此，您有很多程序员的选择，它们取决于您准备重写代码的深度：

1. 在将完成的 HTML 代码发送到浏览器之前，请务必在服务器上拦截它，以提取 style='...' 和 onclick='...' 构造，并将它们替换为安全构造（样式类和 addEventListeners() 用于脚本）。
   可能 NodeJS 有一些有用的插件。

2. 使用样式，您可以将 style="color:blue;" 替换为 data-style="color:blue;" 和 通过 that 之类的脚本处理所有这些。
   只需相应地调整它并使用安全的结构，如 el.style.backgroundColor = ... 但不是不安全的 Element.setAttribute(style)。

3. 对于内联事件处理程序，您可以使用 this 技术（用于 jQuery，将其重写为使用 addEventListeners）。

4. 使用最佳实践完全重写代码 - 分离标记和数据。
   将所有 style="color:blue;" 移动到类中 (class='blueColor'`)。为了便于理解，您可以指定类名称，如“颜色-蓝色”、“显示-隐藏”等。
   在单独的脚本中用 addEventListener() 替换所有内联事件处理程序。