时间戳

首页 > 解决方案 > 如何为 HTML 属性设置内容安全策略

node.js - 如何为 HTML 属性设置内容安全策略

问题描述

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

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

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

标签： node.jshashattributescontent-security-policynonce

解决方案

'unsafe-hashes'令牌旨在用于 HTML 属性的 CSP 规范。但是 Safari 仍然不支持它。

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

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

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

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

  4. 使用最佳实践完全重写代码 - 单独的标记和数据。
    将所有style="color:blue;"内容移入类（class='blueColor'`）。您可以分配类名称，如“color-blue”、“display-hidden”等，以便于理解。在单独的脚本中用addEventListener()
    替换所有内联事件处理程序。

推荐阅读