HTML属性清理的最佳实践-html教程-PHP中文网

HTML属性清理需有选择地保留语义、移除冗余、阻断风险：保留class/id（无恶意注入时）、data-（确认JS读取）、aria-（保障无障碍）及src/href/alt（校验值合法性）；无条件剥离on*事件、危险协议URL和不受控style；DOMPurify须定制配置，服务端净化为必需，动态插入HTML须每次重新净化。

html属性清理的最佳实践

HTML 属性清理不是“删掉所有没听说过的属性”——而是有选择地保留语义、移除冗余、阻断风险。盲目清空 class、data- 或 aria- 可能直接破坏样式、交互或无障碍支持；而放任 onerror、javascript:、内联 style 则可能引入 XSS 或布局失控。关键在「控制粒度」和「明确上下文」。

哪些属性必须保留？看用途而非名字

属性是否该留，取决于它当前承担的角色，而不是它是否“标准”：

class 和 id：只要没被用于恶意 JS 注入（比如 id="xss-onload" 配合 eval），就应保留——CSS 和框架（如 Alpine、HTMX）严重依赖它们
data- 系列：多数是业务逻辑载体（data-user-id、data-track），清理前需确认是否被 JS 读取；若不确定，宁可先加白名单而非全删
aria- 属性：如 aria-label、aria-hidden，删掉会直接导致屏幕阅读器失效，除非你确定页面完全不需无障碍支持
src、href、alt：属于核心语义属性，不可删；但需校验值是否合法（如 href="javascript:alert(1)" 必须拦截）

哪些属性要无条件剥离？警惕三类高危模式

以下属性一旦出现，无论上下文都建议默认清除，除非你有明确且受控的使用理由：

事件处理器：onclick、onload、onerror 等所有 on* 属性——它们执行任意 JS，是 XSS 主要入口
危险协议 URL：href="javascript:..."、src="data:text/html;base64,..."、formaction="vbscript:..." ——必须正则匹配并截断或替换为 #
不受控的 style：内联样式易被注入 expression()（IE）或 url(javascript:...)，建议只允许极简白名单（如 color、text-align），其余转为 CSS 类处理

用 DOMPurify 还是手写正则？别迷信自动工具

DOMPurify 是目前最可靠的 HTML 清理库，但它不是“开箱即用”的银弹：

DeepBI DHTML 页面生成器

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

下载

默认配置不清理 data- 属性，需显式启用 ALLOW_DATA_ATTR: true，否则可能误删业务数据
对自定义元素（如）和非标准属性（如 is="custom-element"）默认放行，若你不用 Web Components，反而要手动禁用
若输入来自富文本编辑器（如 TinyMCE、Quill），务必开启 FORBID_TAGS: ['script', 'object', 'embed'] 和 FORBID_ATTR: ['onerror', 'onload']，否则可能漏掉嵌套 payload
不要把 DOMPurify.sanitize() 当作最终输出直接 innerHTML —— 它返回的是字符串，若你后续还要用 DOM API 操作，应先 parse 成 document fragment 再处理

服务端 vs 前端清理：时机决定安全水位

前端清理只是用户体验层防护，真正可信的清理必须落在服务端：

用户提交的 HTML（如评论、文章正文）必须在入库前完成净化，且净化逻辑与前端一致（同版本 DOMPurify + 同配置），避免前后端行为不一致导致绕过
若服务端用 Node.js，推荐搭配 jsdom + DOMPurify 构建隔离环境，避免直接用 innerHTML 解析不可信内容
CDN 或边缘函数（如 Cloudflare Workers）不适合做深度 HTML 清理——缺乏完整 DOM 环境，正则又容易被绕过，仅适合做简单关键词过滤（如删 <script></script> 标签）
特别注意：富文本粘贴（paste 事件）产生的 HTML 常含 Word 导出残留（如 xmlns:o、style="mso-..."），这些虽不危险，但会污染结构；可在前端用 stripWordHtml() 类工具预处理，再交由 DOMPurify