HTML属性清理的关键细节讲解-html教程-PHP中文网

HTML属性清理需保留alt、href、src、data-、role、aria-、type等必需属性以保障功能与合规，同时优先过滤on*事件处理器、javascript:伪协议、未限制的style等高危项，并避免正则误删、忽略Shadow DOM及自定义元素专有属性。

html属性清理的关键细节讲解

HTML 属性清理不是“删掉所有不认识的属性”就完事，而是有明确目标：移除潜在安全隐患（如 onerror、javascript:）、剔除冗余干扰（如过时的 align、border）、保留语义与功能必需项（如 alt、href、role）。盲目清空或一刀切会破坏可访问性、SEO 或交互逻辑。

哪些 HTML 属性必须保留，不能随便删

清理前先确认这些属性是否承担实际功能或合规要求：

alt：图片替代文本，影响可访问性和 SEO，空字符串 alt="" 可保留（表示装饰图），但绝不能直接删掉 alt 属性本身
href、src、data-*：功能核心，删除即导致链接失效、资源加载失败或 JS 逻辑中断
role、aria- 系列（如 aria-label、aria-hidden）：直接影响屏幕阅读器行为，清理时需按 WCAG 规则校验，而非简单放行或清除
type（在、中）：不设默认为 text 或 submit，可能引发表单意外提交，必须显式保留

哪些属性是高危项，应优先过滤

这些属性常被用于 XSS 注入或绕过 CSP，且现代标准中已废弃或无正当用途：

on* 类事件处理器：如 onclick、onmouseover、onload —— 即使内容看似“安全”，也应移除；JS 逻辑应统一收口到外部脚本中
javascript: 伪协议：出现在 href 或 src 中（如 href="javascript:alert(1)"），必须剥离，替换为 # 或 void(0)（仅限内部可控场景）
style 属性：若清理目标是防样式篡改或统一主题，需限制允许的 CSS 属性子集（如只允 color、font-size），而非全量保留；否则易被用于隐藏恶意内容
class 和 id：看似无害，但在富文本编辑器输出或用户投稿场景中，可能被用来 hook 恶意 JS（如 class="js-track-click" 被第三方脚本监听），需按白名单机制控制值范围

使用 DOMPurify 清理时容易忽略的配置点

DOMPurify 是目前最可靠的 HTML 属性清理方案，但默认配置不等于安全配置：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

不启用 ALLOWED_ATTR 白名单模式：默认只删高危项，但会放过大量遗留属性（如 align、valign），应显式声明允许的属性列表
忽略 FORBID_TAGS 和 FORBID_ATTR 的组合效果：比如设了 FORBID_ATTR: ['style']，但没关掉 svg 标签，攻击者仍可通过触发 XSS
未处理 data-* 的通配规则：DOMPurify 默认保留所有 data- 属性，若业务依赖 data-user-id，但又不希望 data-onclick 存活，就得用 ADD_DATA_ATTRIBUTES 配合正则精确匹配
服务端调用时未设 SAFE_FOR_TEMPLATES: true：该选项禁用 {{}} 类模板语法解析，避免与 Vue/Handlebars 等框架冲突，漏设会导致清理后残留表达式

手动清理 `innerHTML` 的陷阱

不用库、靠正则或 setAttribute 循环清理，极易出错：

正则无法正确解析嵌套引号或转义字符：例如 title="He said "don't""，简单 replace(/on\w+="[^"]*"/g, '') 会截断中间的 "don't" 导致 DOM 解析失败
用 element.removeAttribute() 删除后再遍历子节点，可能漏掉动态插入的元素（如通过 document.write 或 insertAdjacentHTML 加入的）
未考虑 Shadow DOM 场景：querySelectorAll('*') 拿不到影子树内的节点，清理范围天然缺失
对自定义元素（如）的属性不做识别，可能误删其必需的 size、variant 等专有属性

属性清理真正难的不是“删什么”，而是“怎么知道删了之后页面还正常”。建议在清理后做三件事：检查控制台是否报 Failed to execute 'setAttribute' on 'Element' 类错误；用 axe 或 Lighthouse 扫描可访问性回归；对含用户输入的字段（如评论、富文本）做 XSS fuzz 测试。否则，表面干净的 HTML 可能暗藏运行时崩塌风险。