获取前端加密混淆后网页解密还原的真实HTML文档结构

应使用浏览器开发者工具在解密函数执行后、DOM写入前打断点，再执行document.documentElement.outerHTML获取真实结构；不可依赖curl或view-source协议，因其仅返回未执行JS的初始HTML。

混淆后 HTML 无法直接查看 DOM 结构怎么办

浏览器开发者工具里看到的 document.body.innerHTML 是混淆后的字符串，不是真实结构——因为混淆脚本在页面加载后动态解密并重写 DOM，你看到的只是“解密前”的静态 HTML 或“解密后”的最终渲染结果，中间过程被跳过。关键不是抓源码，而是拦截解密完成后的 DOM 快照。

• 不要用 curl 或服务端请求原始 HTML：它没执行 JS，拿不到解密后内容
• 别依赖 view-source: 浏览器协议：它显示的是初始 HTML，不包含 JS 动态生成的部分
• 真正有效的是在解密函数执行完、DOM 插入前的那一刻做快照——通常靠断点或钩子

如何定位前端解密函数并打上断点

多数混淆方案（如某加密 SDK 或自研 obfuscator）会在全局挂一个解密函数，比如 decryptHTML、_0xabc123、deobf，也可能藏在 eval 或 Function 构造调用里。目标是找到它被调用后立即修改 document.body 或 document.documentElement 的位置。

• 在 Sources 面板按 Ctrl+Shift+F 搜索关键词：innerHTML =、document.write、appendChild、replaceChild
• 重点关注 eval( 或 new Function( 后紧跟大段 base64 或 hex 字符串的地方
• 在疑似解密函数 return 前、DOM 写入前加断点；若函数被内联，可对 document.body 设置 DOM 断点（右键 → Break on → Subtree modifications）

用 DevTools 控制台提取解密后的完整 HTML 结构

断点停住后，DOM 已解密但尚未被后续脚本覆盖，此时执行 document.documentElement.outerHTML 才是真实结构。注意：不能只取 body，因为 里的资源引用、meta、script 标签往往也被还原了。

• 如果页面用了 Shadow DOM 或 iframe，需额外检查 shadowRoot 或 contentDocument
• 某些混淆会反复重写 DOM（防调试），此时要快速复制：右键 Elements 面板 → Copy → Copy outerHTML
• 若控制台报错 Cannot access 'document' of closed window，说明页面已跳转或 iframe 被销毁，得在跳转前触发断点

自动化还原时绕不开的几个坑

用 Puppeteer 或 Playwright 自动化时，page.content() 返回的仍是初始 HTML，除非你明确等待解密完成。但“解密完成”没有统一信号，只能靠副作用判断。

立即学习“前端免费学习笔记（深入）”；

• 别等 networkidle0：JS 混淆逻辑常在所有网络请求结束后才执行，但可能延迟几秒甚至异步定时触发
• 推荐监听特定 DOM 变化：比如等待某个被解密后才出现的 class 名（如 decrypted-root）或元素 ID
• 若解密函数返回字符串而非直接写 DOM，可用 page.evaluate 主动调用它并返回结果，但需先用 page.addScriptTag 注入钩子捕获该函数引用

混淆代码常把 DOM 操作和加密逻辑耦合得很紧，还原的关键不是逆向算法，而是卡准那个“刚解完、还没被二次污染”的时间窗口。错过这个点，拿到的要么是乱码字符串，要么是被后续脚本删改过的残缺结构。