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 字符串含注释、换行或伪代码(如<!-- onclick="xss()" -->),可能误删或漏删 -
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-前缀



















