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

【问题标题】：How to set a content security policy for HTML attributes如何为 HTML 属性设置内容安全策略
【发布时间】：2021-07-28 09:24:27
【问题描述】：

我正在使用 node.js，我想为某些东西设置 CSP，例如 JavaScript 和 CSS。我可以使用随机数和散列，但我将如何允许 HTML 属性，例如：

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

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

【问题讨论】：

【解决方案1】：

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

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

在发送到浏览器之前，一定要在服务器上截取完成的 HTML 代码，以提取 style='...' 和 onclick='...' 构造，并用安全构造替换它们（样式类和脚本类 addEventListeners()） .
可能 NodeJS 有一些有用的插件。
使用样式，您可以将 style="color:blue;" 替换为 data-style="color:blue;" 和通过像that这样的脚本处理所有这些。
只需相应地调整它并使用像el.style.backgroundColor = ... 这样的安全结构，但不是不安全的Element.setAttribute(style)。
对于内联事件处理程序，您可以使用this techique（它用于 jQuery，重写它以使用 addEventListeners）。
使用最佳实践完全重写代码 - 分离标记和数据。
将所有 style="color:blue;" 移入类 (class='blueColor'`)。您可以指定类名称，如“color-blue”、“display-hidden”等，以便于理解。
在单独的脚本中将所有内联事件处理程序替换为 addEventListener()。

【讨论】：