HTML属性清理需分类处理：事件属性（如onclick）必须清除，style/class/id视场景白名单过滤，data-*等语义属性可保留；推荐DOM级removeAttribute()而非字符串正则，style须解析后校验放行。
清理 HTML 属性不能只靠正则或删光了事——真正要防的是 XSS、样式污染、语义丢失和后续 JS 引用失效。
哪些属性该留、哪些必须砍？按安全等级分三类
不是所有属性都一样危险，得分类处理：
-
onclick、onsubmit、onload等事件属性：必须清，XSS 高危，且属于内联执行，无法被 CSP 有效拦截 -
style、class、id：视场景而定。若用于渲染隔离（如富文本预览），style建议清；若需保留基础排版，可白名单过滤（如只留color、font-size） -
data-*、title、lang：通常可保留，它们不触发执行，且承载语义或业务数据
用 removeHtmlAttr() 清单式移除 vs 手动遍历 removeAttribute()
Hutool 的 removeHtmlAttr() 是字符串级操作，适合服务端批量清洗；浏览器端 DOM 操作推荐原生 removeAttribute() 配合 querySelectorAll：
-
removeHtmlAttr(htmlStr, "onclick,onsubmit")：快但有风险——若 HTML 字符串含注释、换行或伪代码（如），可能误删或漏删 -
document.querySelectorAll('[onclick], [onsubmit]').forEach(el => el.removeAttribute('onclick'))：精准、安全，只作用于真实 DOM 节点，不碰字符串结构 - 注意：
removeAttribute('onclick')必须传完整属性名（带on前缀），removeAttribute('click')无效
style 属性不能只删，得解析后白名单放行
直接删 style 会破坏必要排版（比如图文混排中的 float: right），但全留又等于开了 XSS 后门。正确做法是解析 CSS 声明并校验：
- 用正则提取
style值后，逐条拆分（以;分割），再按冒号切出属性名和值 - 只放行白名单属性：如
color、text-align、margin、padding；禁用background-image、url()、expression()、calc()（后者在旧 IE 中可执行 JS） - Hutool 的
filter()默认不处理style内容，需额外调用HtmlUtil.filterStyle()或自定义处理器
动态插入的内容最容易漏掉，得前置拦截
页面加载后通过 innerHTML、insertAdjacentHTML() 或框架 v-html 插入的 HTML，不会自动过你写的清理逻辑：
- 不要等它进 DOM 再扫——要在拼接前过滤，例如：
str.replace(/on\w+\s*=\s*["'][^"']*["']/gi, '') - 对
innerHTML赋值前做一次清洗，比事后补救更可靠；可用ponytail统一配置，在浏览器/Node 两端共用同一套规则 - 最常被忽略的是：
data-on-click这类自定义属性，正则/on\w+=/会误伤，应明确匹配on\w+\s*=\s*["']，避免匹配到data-前缀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
