前端安全之DOMPurify基础使用
DOMPurify时一款专门用于防御XSS攻击的库，通过净化HTML的内容，移除恶意脚本，同时保留安全的HTML标签和数学。以下是基础使用指南，涵盖基础的安装与用法。
1，安装DOMPurify
通过npm或yarn安装
npm install dompurify --save
# 或
yarn add dompurify
或通过CDN引入
2，基础用法
常常设置在表单的提交中，或者需要根据用户改变html内容的时候，净化字符串，放置隐藏恶意脚本
import DOMPurify from \'dompurify\'const success = await login(DOMPurify.sanitize(username.value), DOMPurify.sanitize(password.value));// 在提交表单时 净化表单内容 放置恶意信息或脚本效果举例：
DOMPurify.sanitize(\'
\'); // 变成 DOMPurify.sanitize(\'<g/onload=alert(2)//\'); // 变成DOMPurify.sanitize(\'
abcdef
\'); // 变成 abc
DOMPurify.sanitize(\'<mi//xlink:href=\"data:x,alert(4)\">\'); // 变成 DOMPurify.sanitize(\'HELLO HELLO
DOMPurify.sanitize(\'\'); // 变成
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 = \'点击我\';const cleanHTML = DOMPurify.sanitize(dirtyHtml, config);// 输出结果： 点击我
自定义钩子函数
在净化过程中插入自定义逻辑：
DOMPurify.addHook(\'beforeSanitizeElements\', (node) => { // 移除所有图片的 src 属性 if (node.tagName === \'IMG\') { node.removeAttribute(\'src\'); } return node;});const dirtyHtml = \'\';const cleanHtml = DOMPurify.sanitize(dirtyHtml); // 输出结果: ![]()
4. 处理特殊场景
允许 SVG 内容
默认情况下，DOMPurify 会移除 SVG 中的潜在危险内容。若需允许 SVG：
const config = { USE_PROFILES: { svg: true, svgFilters: true, html: true },};const dirtySvg = \'alert(1)\';const cleanSvg = DOMPurify.sanitize(dirtySvg, config); // 移除 后的安全 SVG
净化 URL 属性（如 href/src）
防止 javascript: 协议：
const config = { ALLOWED_URI_REGEXP: /^(https?|ftp|mailto):/i, // 只允许 http/https/ftp/mailto};const dirtyLink = \'点击\';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
