前端安全之DOMPurify基础使用

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&Tab;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);