怎么说呢，

DOMPurify 完整介绍

一、一句话定义

DOMPurify 是业界最主流、使用较稳定的 JS HTML 清洗库。专门用来过滤脏 HTML、防御 XSS 跨站脚本攻击把使用者输入的危险代码清理干净，输出可安全插入页面的纯净 HTML，同时支持 SVG、MathML 清洗。

二、主要作用

使用者痛点：在实际项目中，最常见的安全漏洞就是 XSS 攻击。很多开发者习惯直接把使用者输入或后端富文本通过 innerHTMLVue 的 React 的 渲染到页面这时候恶意使用者可以注入脚本窃取 cookie、劫持账号甚至植入后门。

典型攻击代码示例：

DOMPurify 的方法：自动删除或清空所有可执行代码，只保留安全标签与属性。

清洗效果示例

// 脏内容
const dirty = '';// 清洗后
const clean = DOMPurify.sanitize;// 输出：
console.log;

三、工作原理

1. 不用正则匹配：正则很容易被攻击者绕过。

2. 调用浏览器原生 DOM API，把 HTML 解析成真实 DOM 树。

3. 遍历所有节点，对照内置安全白名单

   • 再看删除危险标签，

     . 自定义配置

     // 允许 iframe 并放行 data:image
     const clean = DOMPurify.sanitize(html。{
     ADD_TAGS:,ADD_ATTR:,ALLOWED_DATA_URI_IMAGES: true,});

     七、常见误区

     1. "只在后端过滤。前端不用 DOMPurify": 前端一样会面临 URL 参数、本地存储等来源的 XSS，必须在前端再做一次清洗。
     2. "自己写正则过滤 script/onerror": 攻击者拥有上百种变形写法，正则根本防不住。
     3. "清洗一次永久安全": 每次渲染动态 HTML 都要重新走 .sanitize,否则旧数据可能 被注入。
     4. "框架自带防护": Vue/React 默认只转义普通文本，

     八、功能概览

     If your page needs to **dynamically render untrusted HTML**。DOMPurify is industry‑standard security solution— most universal and low‑cost way to defend against stored and DOM‑based XSS.