真正有效的HTML属性清理需覆盖输入源头、运行时拦截和发布前校验三层：服务端用jsoup/bleach/DOMPurify白名单过滤，前端插入前强制sanitize，CI/CD中嵌入自动化扫描与ESLint检查。
清理 HTML 属性不能靠“一次点击、永久干净”，真正有效的方案必须覆盖输入源头、运行时拦截和发布前校验三层。临时用 removeAttribute 清一遍，不出三天又冒出来。
服务端输出阶段就过滤事件属性与危险协议
前端清洗只是兜底，后端模板或 API 返回的 HTML 若已含 onclick、javascript:、data: 等内容，前端再怎么删都晚了。关键是在服务端做白名单过滤：
- 使用成熟库（如 Java 的
jsoup、Python 的bleach、Node.js 的DOMPurify.sanitize()）对动态生成的 HTML 字符串做净化，而非简单字符串替换 - 配置中显式禁用所有
on\w+属性，并限制href/src只允许http://、https://、/、#开头 - 避免在模板中拼接用户可控内容到属性值里，例如
<a href="%24%7BuserInput%7D"></a>—— 这类写法必须改用编码后插入或完全绕过属性赋值
前端插入 HTML 前强制走 sanitize 流程
任何通过 innerHTML、insertAdjacentHTML、document.write 插入的 HTML 字符串，都必须先过净化。别信“我只插自己构造的字符串”——只要涉及变量拼接，风险就存在：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 禁止直接
el.innerHTML = unsafeHtml；统一走DOMPurify.sanitize(unsafeHtml)或封装后的安全函数 - 若用 Vue/React，确保 SSR 输出也经过去事件属性处理（Vue 3 的
v-html不自动净化，需手动 wrap） - 对富文本编辑器（如 Quill、Tiptap）导出的 HTML，不要跳过净化步骤——它们常保留
onpaste或内联style中的表达式
构建流程中嵌入自动化 HTML 检查
靠人肉检查 HTML 文件不现实。把清理和校验变成 CI/CD 的固定环节：
立即学习“前端免费学习笔记（深入）”；
- 用
html5-clear或markup-de-crapulator在构建时扫描所有 HTML/JSX/Templates，报告残留的on\w+、id=（若项目已弃用）、script标签等 - 配合自定义 ESLint 规则（如
eslint-plugin-html），在 JS 文件中检测innerHTML =、document.write(等高危调用 - 对历史遗留页面，用 Puppeteer 启动真实浏览器抓取渲染后 DOM，扫描是否仍有未被 JS 清理掉的事件属性（动态插入的元素常漏掉）
最难的不是写清楚哪几行代码能删掉 onsubmit，而是让每个新来的实习生、外包、甚至你自己三个月后加功能时，都默认走同一套过滤路径——这需要工具链卡点，而不是文档里写一句“请自觉净化”。
