DOMPurify:一个只针对 DOM 的、超快的、宽容的 HTML XSS清理工具

前端全栈开发者

共 2987字,需浏览 6分钟

 ·

2024-03-28 00:30

DOMPurify[1] 是一个只针对 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>
        

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

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

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

      
      const clean = DOMPurify.sanitize(dirty);

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

      
      import * as DOMPurify from "dompurify";

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

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

      
      const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { htmltrue } });

在服务器上运行 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>');

或者,如果你更喜欢使用导入:

      
      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>');

b420ccd421f9de1632597843c4e1a843.webp

最近文章

参考资料 [1]

DOMPurify: https://github.com/cure53/DOMPurify


浏览 13
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报