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

Posted 2023-02-22

【中文标题】如何为 HTML 属性设置内容安全策略

【英文标题】：How to set a content security policy for HTML attributes

【发布时间】：2021-07-28 09:24:27

【问题描述】：

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

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

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

【问题讨论】：

您可以查看this。

@ApoorvaChikara 所以你说这里没有我想做的选择。

是的，这是在 MDN-web 文档中指定的。可能有一些技巧可以做到这一点。

【参考方案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()。