DOMPurify时一款专门用于防御XSS攻击的库,通过净化HTML的内容,移除恶意脚本,同时保留安全的HTML标签和数学。以下是基础使用指南,涵盖基础的安装与用法。
1,安装DOMPurify
通过npm或yarn安装
npm install dompurify --save
# 或
yarn add dompurify
或通过CDN引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js"></script>
2,基础用法
常常设置在表单的提交中,或者需要根据用户改变html内容的时候,净化字符串,放置隐藏恶意脚本
import DOMPurify from 'dompurify'const success = await login(DOMPurify.sanitize(username.value), DOMPurify.sanitize(password.value));
// 在提交表单时 净化表单内容 放置恶意信息或脚本
效果举例:
DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // 变成 <img src="x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // 变成<svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe//src=jAva	script:alert(3)>def</p>'); // 变成 <p>abc</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // 变成 <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // 变成 <table><tbody><tr><td>HELLO</td></tr></tbody></table>
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // 变成 <ul><li><a href="//google.com">click</a></li></ul>
3,进阶用法
配置config,允许或禁止特定的标签或者属性跳过净化
const config = {ALLOWED_TAGS: ['b', 'i', 'a', 'p'], // 只允许这些标签ALLOWED_ATTR: ['href', 'title'], // 只允许这些属性FORBID_TAGS: ['script', 'style'], // 禁止 script 和 style 标签FORBID_ATTR: ['onclick', 'onerror'] // 禁止事件属性
};const dirtyHTML = '<b onclick="alert(1)">点击我</b>';
const cleanHTML = DOMPurify.sanitize(dirtyHtml, config);// 输出结果: <b>点击我</b>
自定义钩子函数
在净化过程中插入自定义逻辑:
DOMPurify.addHook('beforeSanitizeElements', (node) => {// 移除所有图片的 src 属性if (node.tagName === 'IMG') {node.removeAttribute('src');}return node;
});const dirtyHtml = '<img src="x" onerror="alert(1)">';
const cleanHtml = DOMPurify.sanitize(dirtyHtml); // 输出结果: <img>
4. 处理特殊场景
允许 SVG 内容
默认情况下,DOMPurify 会移除 SVG 中的潜在危险内容。若需允许 SVG:
const config = {USE_PROFILES: { svg: true, svgFilters: true, html: true },
};const dirtySvg = '<svg><script>alert(1)</script></svg>';
const cleanSvg = DOMPurify.sanitize(dirtySvg, config); // 移除 <script> 后的安全 SVG
净化 URL 属性(如 href/src)
防止 javascript:
协议:
const config = {ALLOWED_URI_REGEXP: /^(https?|ftp|mailto):/i, // 只允许 http/https/ftp/mailto
};const dirtyLink = '<a href="javascript:alert(1)">点击</a>';
const cleanLink = DOMPurify.sanitize(dirtyLink, config); // href 被移除
处理富文本编辑器(如 CKEditor、Quill)
在提交富文本内容前净化:
// 假设 editor 是富文本编辑器实例
const rawContent = editor.getHtml();
const cleanContent = DOMPurify.sanitize(rawContent, {ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'a', 'img'],ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],
});
5. 常见问题解答
Q1:DOMPurify 能防御所有 XSS 吗?
-
不能。它主要防御 HTML 注入型 XSS,但无法处理:
-
URL 中的 JavaScript 协议(需配合正则校验)。
-
CSS 表达式(如
expression(...)
)。 -
非 HTML 上下文(如 JSON 注入)。
-
Q2:如何处理用户上传的 HTML 文件?
-
使用 DOMPurify 解析并净化内容,同时限制文件类型和大小。
Q3:DOMPurify 是否影响性能?
-
对于常规内容(如评论、文章),性能影响可忽略。
-
处理大型 HTML(如 10MB 以上)时,建议在服务端异步处理。
6, 完整配置示例
const config = {ALLOWED_TAGS: ['p', 'b', 'i', 'a', 'img', 'br'],ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],FORBID_ATTR: ['style', 'class'],ALLOWED_URI_REGEXP: /^(https?|ftp):/i,FORBID_TAGS: ['script', 'iframe'],RETURN_TRUSTED_TYPE: true, // 返回 TrustedHTML 对象(支持 Trusted Types)
};const cleanHtml = DOMPurify.sanitize(dirtyHtml, config);
7. 官方相关
-
官方文档:DOMPurify GitHub
-
XSS 测试工具:OWASP XSS Filter Evasion Cheat Sheet