HTML属性清理需保留alt、href、src、data-、role、aria-、type等必需属性以保障功能与合规，同时优先过滤on*事件处理器、javascript:伪协议、未限制的style等高危项，并避免正则误删、忽略Shadow DOM及自定义元素专有属性。
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（在<input>、<button></button>中）：不设默认为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标签，攻击者仍可通过<svg><rect onbegin="alert(1)"></rect></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('*')拿不到影子树内的节点，清理范围天然缺失 - 对自定义元素（如
<my-button></my-button>）的属性不做识别，可能误删其必需的size、variant等专有属性
属性清理真正难的不是“删什么”，而是“怎么知道删了之后页面还正常”。建议在清理后做三件事：检查控制台是否报 Failed to execute 'setAttribute' on 'Element' 类错误；用 axe 或 Lighthouse 扫描可访问性回归；对含用户输入的字段（如评论、富文本）做 XSS fuzz 测试。否则，表面干净的 HTML 可能暗藏运行时崩塌风险。
