HTML脏数据属性清洗与清理指南-html教程-PHP中文网

HTML脏数据清洗必须显式过滤style、class、data-及内联事件属性，因白名单工具仅校验标签与属性名，不校验属性值内容；如style中javascript:、class中布局类、data-中敏感字段或on*事件均可能引发XSS或样式异常。

html脏数据属性清洗与清理指南

HTML脏数据清洗不能只删标签，属性层污染才是隐藏最深的雷——style、class、onclick、data-类自定义属性，不清理就存库或渲染，轻则样式炸裂，重则XSS漏网。

为什么`style`和`class`必须显式过滤，而不是靠白名单标签自动带过

ponytail 或 sanitize-html 这类工具默认只管标签名和属性名，不管属性值内容。比如

，即使你白名单放行了 div 和 class、style 属性，里面的 javascript: 依然能执行；而 Tailwind 类名看似安全，实则可能被后端模板注入恶意 CSS 变量。
真正干净的 class 应该是空值，或仅限极少数语义化类（如 highlight、quote），不能放行整套 UI 框架类名

style 值必须做二次校验：只允许 color、font-weight 等有限属性，且值需匹配正则 ^#?[0-9a-fA-F]{3,6}|[0-9]+(px|em|%|rem)?$，禁止 url()、expression()、calc() 等可执行上下文
浏览器原生解析会忽略部分非法 style 值，但服务端 DOM 解析器（如 jsdom）可能照单全收，导致 SSR 渲染时触发


data-属性要不要留？留哪些？
data- 属性本身不危险，但它是前端逻辑和后端数据耦合的高发区。很多 CMS 导出 HTML 时会把原始 ID、版本号、编辑状态塞进 data-id、data-version、data-draft，这些信息不该暴露给终端用户，也不该参与富文本渲染流程。

默认策略：全部清除。除非业务明确要求保留某几个，比如 data-ref 用于锚点跳转、data-lang 用于多语言标记
若需保留，必须加前缀白名单，例如只放行 data-ref 和 data-lang，拒绝 data-user-id、data-src 等泛用型字段
注意 data- 后面跟的是任意字符串，正则匹配要写成 ^data-(ref|lang)$，不能写成 ^data-.*$，否则等于没设防

内联事件属性（onclick、onmouseover等）怎么防漏？
这类属性哪怕值为空、为 return false 或只是个变量名，也属于高危项。ponytail 的默认配置通常已禁用所有 on* 属性，但如果你手动扩展了白名单，或者用了旧版配置，极易遗漏。

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										

必须在白名单中显式排除：onclick、onload、onerror、onfocus、onsubmit……完整列表参考 MDN 的 HTML 全局事件属性页
注意大小写：有些爬虫输出的 HTML 里是 ONCLICK 或 OnCliCk，清洗器若只匹配小写会漏掉，ponytail 默认不区分大小写，但自定义正则需加 i 标志
更稳妥的做法是：用否定式白名单，例如允许所有属性名，但排除匹配 ^on[a-z]+ 的，比逐个列更可靠

清洗后还要检查什么？一个常被跳过的验证动作
清洗完别急着入库或渲染，先用 DOMParser（Node 端可用 jsdom）重新 parse 一遍输出 HTML，再遍历所有元素的 attributes 集合，人工确认是否还有残留的 style 值含 javascript:、class 含 hidden 或 absolute 等布局类、data- 属性超出白名单范围——这种“清洗后二次扫描”动作，能发现 80% 的配置疏漏。
尤其要注意那些看似无害的属性值，比如 class="u-hidden" 在某些 UI 库里会触发 display: none !important，导致正文段落莫名消失；又比如 style="opacity: 0" 虽不执行 JS，但会让内容不可见，等于变相丢数据。