DOMPurify.sanitize()是当前最可靠的选择，它基于HTML解析器重建DOM树并按白名单逐节点裁剪，能精准防御onerror、javascript:、等XSS绕过，但需显式配置ALLOWED_TAGS、ALLOWED_ATTR、FORBID_ATTR及ALLOWED_URI_REGEXP，并配合hook补rel="noopener"等安全措施。
DOMPurify.sanitize() 是当前最可靠的选择
直接用 innerHTML 渲染用户输入的 HTML，等于把解析权完全交给浏览器——<img src="x" onerror="alert(1)" alt="HTML怎么在前端渲染前清理危险属性" > 会立刻执行。DOMPurify 不是简单替换字符串，而是真正解析成 DOM 树，再按白名单策略重建，能精准剔除 onerror、javascript:、<script></script> 等所有已知危险模式。
基础用法极简：
import DOMPurify from 'dompurify'; const cleanHtml = DOMPurify.sanitize(dirtyHtml);
但默认配置太保守（只留 p、br 等），业务中通常要显式放行：
-
ALLOWED_TAGS：比如加'a'、'code'、'ul' -
ALLOWED_ATTR：必须限制为['href', 'title']，不能无脑放行class或data-* -
FORBID_ATTR：显式写['onclick', 'onload', 'onfocus']，避免依赖默认行为 -
ALLOWED_URI_REGEXP：必须设为/^(https?|ftp):/i，否则href="javascript:..."逃逸
为什么不能用正则或 removeAttribute 批量清理
正则匹配 on\w+\s*=\s*["'][^"']*["'] 看似快，但实际漏掉三类情况：
立即学习“前端免费学习笔记（深入）”；
- 换行或空格分隔的属性：
onerror\n="alert(1)"会被跳过 - 注释或 CDATA 中的伪代码被误杀，破坏结构
- 框架注入的
data-v-xxx属性可能被连带删掉，导致 Vue 组件失效
removeAttribute 本身没问题，但前提是你得先 querySelectorAll 到所有含事件属性的元素。而动态插入的内容（如 insertAdjacentHTML）不会自动触发清理——你得在每次插入前手动调用，极易遗漏。
Vue / React 里 v-html 和 dangerouslySetInnerHTML 必须套一层 sanitize
这两个 API 完全不校验内容，传什么就渲染什么。常见错误写法：
<div v-html="userContent"></div>
正确做法是：
<div v-html="DOMPurify.sanitize(userContent, config)"></div>
注意点：
- 配置对象
config必须提前定义好，不要每次调用都新建 - 如果允许
<a target="_blank"></a>，记得用 hook 补上rel="noopener"，否则有安全风险 - 服务端返回的 HTML 若已净化过，前端仍要再跑一遍——攻击者可绕过前端 JS 直接发请求
清理后还要检查 href/src 协议和 class 属性滥用
DOMPurify 默认不拦截 href="data:text/html;base64,..."，除非你显式设置 ALLOWED_URI_REGEXP。同样，放行 class 属性等于开放 CSS 注入入口——攻击者可用 class="xss-inject" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:red;" 覆盖整个页面。
真正难的不是“怎么删”，而是“删完之后是否还剩没料到的通道”：比如 style 属性里的 url() 函数、content 伪元素、甚至 SVG 中的 <animate></animate> 标签。这些都需要在配置中逐项关闭，而不是依赖“默认安全”。
