DOMPurify：一个只针对 DOM 的、超快的、宽容的 HTML XSS清理工具_purify.js

DOMPurify 是一个只针对 DOM 的、超快的、超容忍的 HTML、MathML 和 SVG 跨站脚本清理器。

DOMPurify 于 2014 年 2 月发布，目前已经达到 v3.0.8 版本。

DOMPurify 是用 JavaScript 编写的，在所有现代浏览器(Safari(10 )，Opera(15 )，Edge,Firefox 和 Chrome - 以及几乎所有使用 Blink,Gecko 或 WebKit 的浏览器)上都可以运行，它不会在 MSIE 或其他旧版浏览器上崩溃。

注意 DOMPurify v2.4.7 是支持 MSIE 的最新版本。对于兼容 MSIE 的重要安全更新，请使用 2.x 分支。

我们的自动化测试现在覆盖了 19 个不同的浏览器，未来还会覆盖更多。我们还覆盖了 Node.js v16.x, v17.x, v18.x 和 v19.x，在 jsdom 上运行 DOMPurify。已知的旧版本也能工作，但是嘿…不保证。

DOMPurify 是由在 Web 攻击和 XSS 方面有广泛背景的安全人员编写的。不要害怕。更多细节请阅读我们的安全目标和威胁模型。

它有什么作用？

DOMPurify 净化 HTML 并防止跨站脚本攻击。你可以用充满脏 HTML 的字符串来喂养 DOMPurify，它会返回一个干净的 HTML 字符串(除非另外配置)。DOMPurify 会剥离所有包含危险 HTML 的内容，从而防止跨站脚本攻击和其他脏东西。它也非常快。我们使用浏览器提供的技术，并将它们转换为跨站脚本过滤器。你的浏览器越快，DOMPurify 就会越快。

我如何使用它?

这很简单，只需要在你的网站上包含 DOMPurify。

使用未压缩的开发版本

<script type="text/javascript" src="src/purify.js"></script>
1

使用压缩并测试过的生产版本(源码映射可用)

<script type="text/javascript" src="dist/purify.min.js"></script>
1

之后，您可以通过执行以下代码来清理字符串：

const clean = DOMPurify.sanitize(dirty);
1

或者，如果你喜欢使用 Angular 或类似的框架，可以这样：

import * as DOMPurify from "dompurify";

const clean = DOMPurify.sanitize("<b>hello there</b>");
1
2
3

可以使用 innerHTML 将生成的 HTML 写入 DOM 元素，或者使用 document.write() 将结果写入 DOM。这完全取决于你。请注意，默认情况下，我们允许 HTML、SVG 和 MathML。如果您只需要 HTML（这可能是一个非常常见的用例），您也可以轻松进行设置：

const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });
1

在服务器上运行 DOMPurify

DOMPurify 技术上也支持 Node.js 服务器端，我们的支持会尽量跟随 Node.js 的发布周期。

在服务器上运行 DOMPurify 需要一个 DOM，这可能并不奇怪，通常，jsdom 是首选工具，我们强烈推荐使用最新版本的 jsdom。

为什么？因为旧版本的jsdom在某些方面有漏洞，即使DOMPurify100%正确，也会导致跨站脚本攻击。例如，jsdom v19.0.0中的攻击向量在jsdom v20.0.0中得到了修复 - 因此，我们强烈建议使用最新的jsdom。

对于 jsdom(请使用最新版本)，这应该可以做到：

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);
const clean = DOMPurify.sanitize('<b>hello there</b>');
1
2
3
4
5
6

或者，如果你更喜欢使用导入：

import { JSDOM } from 'jsdom';
import DOMPurify from 'dompurify';

const window = new JSDOM('').window;
const purify = DOMPurify(window);
const clean = purify.sanitize('<b>hello there</b>');
1
2
3
4
5
6