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: { html: true } });
在服务器上运行 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>');
最近文章
- 推文微博分享11:thoughtworks 出品的技术写作手册
- htmx 只是另一个 JavaScript 框架吗?
- Flutter Tree Shaking:优化应用程序的性能
- Rough.js:创建手绘、草图外观的图形
- 在 Flutter 中创建圆角图像和圆形图像有多少种方法?
- 分享几条推文微博10:全国的 IT 就业都蹦了
- 【强烈推荐】如何为开源项目做出贡献——你应该知道的非技术性的事情
DOMPurify: https://github.com/cure53/DOMPurify