“治疗“xss攻击的“特效药“:DOMPurify，让HTML更安全

作者：布依前端【公众号同名】
时间：2024-5-17
版权所有，盗版必究
更多实用工具库已发布在公众号
  在浏览器情况中，处置惩罚HTML安全性题目通常是一件棘手的任务。然而，有一款强盛的JavaScript库–DOMPurify，能够帮助我们清洁和消毒HTML，确保它不包含任何恶意代码。DOMPurify是一个仅有几kb的轻量级库，使得在前端利用时并不会带来很大的负担。常见场景有富文本，textarea，SVG的foreignObject和markdown富文本等等。
什么是xss攻击？

跨站脚本（XSS）攻击是一种常见的网站安全威胁，它通过将恶意脚本注入到网站中以盗取用户数据或利用用户的身份执行未经授权的操纵。DOMPurify 是一个能够帮助前端开辟者制止 XSS 攻击的 Javascript 库。

DOMPurify介绍

DOMPurify是一个用于洗濯和消毒HTML、MathML和SVG的小型和快速的库。它的目的是防止跨站脚本攻击（XSS），并确保提供的HTML是安全的，可以在网页中插入利用。
npm周下载量：5,488,049
GitHub标星 star：12.9 k
DOMPurify 不但支持简朴的洗濯操纵，它还提供了详细的配置选项，使得开辟人员能够根据需求定制洗濯白名单，如答应某些标签、属性或者协议等。

如何利用DOMPurify？

利用DOMPurify非常简朴。它提供了一个名为 .sanitize 的方法，我们只需将要清洁的HTML传递给它，然后它就会返回一个消毒过的版本。

1. const dirty = '<a href="#"><img src="image.jpg"
2. onload="alert(\'XSS Attack\')"></a>';
3. const clean = DOMPurify.sanitize(dirty);
4. // Now, `clean` is safe to use
5. document.body.innerHTML = clean;

复制代码

在上面的示例中，我们尝试在图像的 onload 事件中注入一段JavaScript代码。然而，DOMPurify 检测到此并删除它，使得输出的HTML代码是安全的。
在官方提供的体验地址上，输入上面代码段，比较过滤效果，就明白利用DOMPurify的好处了。

更深入的配置

固然DOMPurify的默认设置已经能够应对大部分的场景，但有时我们也能须要更详细的配置。好比，如果你想保留一些默认会被扫除的属性如 class，你可以利用 ALLOWED_ATTR 配置：

1. const config = {
2. ALLOWED_ATTR: ['href', 'target', 'class']
3. };
4. const sanitizedHTML = DOMPurify.sanitize(dirtyHTML, config);

复制代码

在这个例子中，DOMPurify在清洁HTML时会保留所有 href, target 和 class 属性。

DOMPurify如何帮助前端开辟者制止XSS攻击？

DOMPurify 能够制止XSS工具，得益于它的核心工作原理。
DOMPurify 的工作原理是对输入的 HTML、MathML 或 SVG 进行解析和洗濯，消除任何可能执行的恶意脚本，然后返回安全的代码。
在上面例子有如许一段代码：

1. const dirty = '<a href="#"
2. onclick="alert(\'This is a XSS Attack!\')">Click me</a>';
3. const clean = DOMPurify.sanitize(dirty);
4. document.body.innerHTML = clean;

复制代码

在这个代码片段中，原始的字符串包含一个尝试注入恶意脚本的链接。但是，在 DOMPurify 的 sanitize 方法处置惩罚后，此恶意脚本被移除，返回的 clean 字符串就可以安全地用于网页内容。由于 DOMPurify 利用的是浏览器自带的 DOM 解析功能，而不是正则表达式，因此它的运行速度快，正确性高，而且可以轻松应对各种复杂的 XSS 攻击伎俩。
综上，DOMPurify 通过提供一种简朴易用但却高效可靠的方式，帮助前端开辟人员防止 XSS 攻击，提高安全性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。