直接在innerhtml中插入未经校验的动态html是前端最危险的代码缺陷，必须在模块加载阶段就通过domparser解析校验，而非渲染时补救；校验逻辑应封装在es模块中，导出纯函数并强制包裹根节点，禁止跨模块隐式传递html字符串。
直接在 innerHTML 中插入未经校验的动态 HTML，是前端代码质量缺陷最隐蔽也最危险的入口——它不报错、不中断执行，却可能让整个页面结构崩坏、脚本失效、甚至引入 XSS。真正的防范必须从模块加载阶段就开始介入，而不是等数据渲染时再补救。
模块加载完成前就拦截非法 HTML 片段
很多项目把 HTML 字符串校验放在 fetch 回调里，但此时模块已加载、DOM 已挂载、事件监听器可能已注册。一旦注入异常 HTML（如未闭合标签、孤立 <script></script>），innerHTML 会静默破坏 DOM 树，后续 querySelector 失败、事件丢失、样式错乱，排查成本远高于预防。
- 所有模块（尤其是负责渲染的
renderer.js或template.ts）应在顶层import后立即定义校验函数，不依赖外部状态 - 校验必须使用
DOMParser().parseFromString(htmlStr, 'text/html')，而非正则或字符串判断——只有解析器能真实模拟浏览器行为 - 若
doc.body.children.length === 0 && htmlStr.trim()非空，说明 HTML 结构严重损坏，应直接 throw 错误，阻断后续执行，而不是 fallback 到空内容
ES 模块作用域内封装 HTML 安全校验逻辑
把校验逻辑写在全局或内联脚本里，等于放弃模块隔离优势。ES 模块的天然作用域边界，正是防止校验规则被意外覆盖或绕过的最佳防线。
- 导出纯函数如
safeHtmlParse，只接收字符串、返回DocumentFragment或抛出明确错误，不操作 DOM - 禁止在模块内直接调用
el.innerHTML = ...；渲染动作应由调用方显式传入目标元素，实现关注点分离 - 若服务端返回的是片段（如
<p>Hello</p> <div class="meta">...</div>），模块必须强制包裹一层根节点（如<div>${htmlStr}</div>），否则DOMParser会丢弃无父级的并列节点
避免 innerHTML 成为模块间隐式契约
当一个模块 A 导出 generateCardHtml(user)，另一个模块 B 直接 el.innerHTML = A.generateCardHtml(...)，就形成了脆弱的隐式契约：B 假设 A 返回的永远是合法 HTML。一旦 A 的模板引擎出错或后端返回脏数据，B 就崩溃——而错误堆栈指向 B，实际问题却在 A 的模块加载链路中。
- 模块 A 应导出
renderCard(el, user)，内部完成校验 + 插入，把 DOM 操作封闭在模块内 - 若需复用 HTML 字符串（如 SSR 场景），A 必须同时导出
isSafeHtml类型守卫函数，并在 JSDoc 中标注返回值约束 - 构建时可通过
eslint-plugin-no-innerhtml禁止跨模块直接使用innerHTML，强制走封装接口
真正健壮的 HTML 渲染，不是靠“兜底”和“容错”，而是靠模块加载阶段就切断非法 HTML 的传播路径——校验必须前置、必须隔离、必须可验证。一旦允许未经解析的字符串跨模块流动，代码质量缺陷就已经发生了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
