如何利用静态分析AST技术，自动识别并转换老旧项目中的不安全DOM操作？

本文共计780个文字，预计阅读时间需要4分钟。

直接使用AST（抽象语法树）进行静态分析，识别并替换非原生化DOM操作，通过正则或字符串替换提升安全性、可验证性和稳定性。关键不在于全换成innerHTML，而是根据语义判断是否可合并、是否需保留中间状态、是否涉及用户输入——这些都需要在AST层面进行引导。

定位非原子化 DOM 操作节点

遍历所有 CallExpression 节点，重点匹配常见危险模式：

• element.appendChild()、element.insertBefore()、element.removeChild() 连续调用（同一父节点下出现 ≥2 次）
• element.innerHTML = ... 后紧跟 element.querySelector() 或事件绑定（说明存在竞态读取）
• document.write()、document.writeln()（直接禁用，无条件替换）
• 对同一元素反复设置 textContent + style + className（未封装为单次更新）

判断是否可安全合并为原子操作

不能一刀切替换成 innerHTML，需结合上下文做语义判定：

• 若连续 append 的节点均来自字面量或静态模板（如 t.span({children: 'ok'})），且无运行时分支，则可聚合成一个 DocumentFragment 或单次 innerHTML 插入
• 若某次操作依赖前一次的 DOM 状态（例如：先 append A，再用 A.getBoundingClientRect() 计算位置，再 append B），则不可合并，应封装为带生命周期钩子的组件逻辑
• 若插入内容含用户输入（如 el.innerHTML = userInput），必须拦截并强制走 textContent 或 createTextNode()，禁止降级为 innerHTML

生成安全等效代码

替换时不拼字符串，而用 AST 节点构造：

• 用 @babel/types 创建 t.callExpression(t.identifier('renderAtomic'), [fragmentArg]) 替代多行 append
• 对 innerHTML = x 赋值，若 x 是纯文本变量，自动转为 textContent = x；若 x 是模板字符串且不含用户数据，可转为 innerHTML = sanitizeTemplate(x)（注入预定义 sanitizer 调用）
• 保留原节点注释与 sourcemap 位置：调用 path.node.leadingComments 和 path.node.loc 迁移元信息，避免调试断点偏移

规避常见陷阱

静态分析无法覆盖的部分必须显式跳过或告警：

• 含 eval()、with 或 Function constructor 的作用域，禁止任何 DOM 操作重构（动态代码可能绕过 AST 判断）
• 第三方库调用（如 jQuery.append()、Vue.set()）需白名单校验，未注册的库调用打标为 UNSAFE_DOM_USAGE 并生成人工复核报告
• 跳过测试文件（**/*.test.js）、构建产物（dist/）、node_modules 目录，防止误改