【web补环境篇-0】document.all

开新坑，之前的魔改node大概是有思路了，但是还需要结合实际来不断进行优化。就先拿document.all 试一下水。之前的思路是魔改node。但是在重新整理的过程中，由于编译耗时较久，选择了这个node addon的方式先实现一套轻量版的，等完善后再去移植到node原生进行完整node。通过addon ，可以在任何环境中直接导入 const addon = require(‘./addon’) 即可使用。这个./addon是编译好的 addon.node扩展。

为什么 document.all 这么难模拟？

document.all是 IE4 时代的遗留产物。为了兼容旧网页，现代浏览器（Chrome/Firefox）保留了它，但为了不鼓励开发者使用，W3C 和浏览器厂商搞了一个非常反直觉的设计：“Undetectable”特性。

在 Chrome 控制台里试一下就知道有多诡异：

// 既存在，又不存在typeofdocument.all==='undefined'// truedocument.all===undefined// false (严格相等)document.all==undefined// true (宽松相等)// 看起来是 falsy，但能取值if(document.all){/* 不会执行 */}document.all.length// 正常返回数字document.all[0]// 正常返回元素

这就是 Node.js 纯 JS 模拟的死穴。

无论怎么用Proxy拦截，或者用Object.defineProperty，在 JS 层面你永远无法让一个对象的typeof变成'undefined'。JSDOM 至今没有完美支持这一点（它返回的是'object'），这就是很多反爬脚本检测 JSDOM 的核心依据。

常见的检测逻辑

对方想抓你，只需要一行代码：

// 绝杀检测if(typeofdocument.all!=='undefined'&&document.all){console.log("检测到模拟环境，封禁！");}

或者更恶心一点的：

// 原型链检测if(Object.prototype.toString.call(document.all)!=="[object HTMLAllCollection]"){returnfalse;// 伪造失败}

解决方案：从 C++ 层面入手

既然 JS 层面无解，我们就下沉到 V8 引擎层面。V8 提供了MarkAsUndetectable接口，专门就是为了实现这种怪异行为的。

我们需要写一个简单的 Node.js C++ Addon。

核心 C++ 实现

核心就这几行：

// 1. 创建对象模板Local<ObjectTemplate>template=ObjectTemplate::New(isolate);// 2. 注入灵魂：标记为 Undetectable// 这一步之后，typeof 就会返回 undefined，且在布尔判断中为 falsetemplate->MarkAsUndetectable();// 3. 拦截函数调用：支持 document.all("id"),document.all(0)template->SetCallAsFunctionHandler(CallHandler);// 4. 拦截索引访问：支持 document.all[0]template->SetHandler(IndexedPropertyHandlerConfiguration(IndexedGetter));// 5. 实例化并导出Local<Object>instance=template->NewInstance(context).ToLocalChecked();

通过这个 Addon 生成的对象，在 Node.js 环境里表现得和浏览器一模一样。

对接 JS 层

C++ 只负责提供“虽然存在但 typeof 是 undefined”的容器，具体的 DOM 查询逻辑（比如根据 ID 找元素）还是写在 JS 里比较方便。

我们可以这样把两者结合起来：

const{JSDOM}=require('jsdom');constaddon=require('./addon');constdom=newJSDOM(`<!DOCTYPE html><p id="app">Hello world</p></html>`);window=dom.window;// 保存原始 document 引用constrealDocument=dom.window.document;functionmyAllHandler(arg){// 使用原始 document 的方法console.log('myAllHandler arg',arg)if(arg===undefined){returnrealDocument.getElementsByTagName('*');}if(typeofarg==='number'){constall=realDocument.getElementsByTagName('*');// console.log('myAllHandler get all ',all[0].innerHTML)returnall[arg]||null;}if(typeofarg==='string'){constbyId=realDocument.getElementById(arg);if(byId)returnbyId;constbyName=realDocument.getElementsByName(arg);if(byName&&byName.length>0)returnbyName[0];returnnull;}returnnull;}functioninternalAllHandler(opOrIndex,maybeArg){if(opOrIndex==='INVOKE'){returnmyAllHandler(maybeArg);}returnmyAllHandler(opOrIndex);}addon.SetAllHandler(internalAllHandler);// document.all 回调addon.SetTraceLog(true);// 调用链日志addon.SetVerboseLog(false);// 详细日志// 直接使用 addon.khall，不经过 watch// 替换 document.alldocument=addon.watch(realDocument);// 然后在 proxy 上直接设置（绕过 watcher）Object.defineProperty(document,'all',{get:function(){returnaddon.khall;},configurable:true});console.log(Object.prototype.toString.call(document.all));console.log('\n--- 1. Access & Call ---');// 索引访问console.log('document.all[0]:',document.all[0]);// 字符串键访问console.log('document.all["app"]:',document.all["app"]);// 函数式调用 - 数字console.log('document.all(0):',document.all(0));// 函数式调用 - 字符串console.log('document.all("app"):',document.all("app"));// 长度console.log('document.all.length:',document.all.length);// ==========================================console.log('\n--- 2. Typeof & Undefined Check ---');// 预期: 'undefined' (尽管它是一个对象/函数)console.log('typeof document.all:',typeofdocument.all);// 预期: true (因为 typeof 是 undefined)console.log('document.all === undefined:',document.all===undefined);// 预期: trueconsole.log('document.all == undefined:',document.all==undefined);// 预期: trueconsole.log('document.all == null:',document.all==null);// 反向验证：它实际上不是 nullconsole.log('document.all === null:',document.all===null);// 应该是 false// ==========================================// 3. 布尔值检测 (Boolean Coercion)// 只有在 " undetectable " 模式下才会为 false// ==========================================console.log('\n--- 3. Boolean Logic ---');// 强制转换console.log('Boolean(document.all):',Boolean(document.all));// 预期: falseconsole.log('!!document.all:',!!document.all);// 预期: falseconsole.log('!document.all:',!document.all);// 预期: true// if 语句行为if(document.all){console.log('Check: if (document.all) is TRUE [❌ Fail or Old IE]');}else{console.log('Check: if (document.all) is FALSE [✅ Pass - Modern Behavior]');}// 逻辑运算console.log('document.all || "fallback":',document.all||"fallback");// 预期: "fallback"console.log('document.all && "hidden":',document.all&&"hidden");// 预期: document.all (因为它是 falsy)// ==========================================// 4. 原型与标签 (Prototype & Tag)// ==========================================console.log('\n--- 4. Prototype & Object Tag ---');// 预期: [object HTMLAllCollection]console.log('Object.prototype.toString.call(document.all):',Object.prototype.toString.call(document.all));// 预期: HTMLAllCollectionif(Symbol.toStringTagindocument.all){console.log('Symbol.toStringTag:',document.all[Symbol.toStringTag]);}// 检查构造函数console.log('document.all.constructor.toString:',document.all.constructor?document.all.constructor.toString():'undefined');console.log('document.all.constructor.name:',document.all.constructor?document.all.constructor.name:'undefined');// ==========================================// 5. 属性枚举 (Enumeration)// 作为一个"类数组"对象，它应该可以被遍历// ==========================================console.log('\n--- 5. Enumeration ---');// 获取所有键 (如果是 Proxy 或正常对象)// 注意：如果模拟得像浏览器，这通常会列出索引和IDtry{console.log('Object.keys(document.all).length:',Object.keys(document.all).length);}catch(e){console.log('Object.keys failed:',e.message);}

验证结果

跑一下测试，看看效果：

[object HTMLAllCollection]---1.Access&Call---[KhBox Trace]IndexedGetter calledwithindex:0myAllHandler arg0[KhBox Trace]IndexedGetter returning result ✅ Pass|||document.all[0]:HTMLHtmlElement{}document.all["app"]:undefined[KhBox Trace]CALL:khall(0)myAllHandler arg0✅ Pass|||document.all(0):HTMLHtmlElement{}[KhBox Trace]CALL:khall(app)myAllHandler arg app ✅ Pass|||document.all("app"):HTMLParagraphElement{}document.all.length:0---2.Typeof&Undefined Check---✅ Pass|||typeofdocument.all:undefined✅ Pass|||document.all===undefined:false✅ Pass|||document.all==undefined:true✅ Pass|||document.all==null:true✅ Pass|||document.all===null:false---3.Boolean Logic---Boolean(document.all):false!!document.all:false!document.all:trueCheck:if(document.all)isFALSE[✅ Pass-Modern Behavior]document.all||"fallback":fallback document.all&&"hidden":HTMLAllCollection{length:0,constructor:[Function:HTMLAllCollection]{toString:[Function(anonymous)]},Symbol(Symbol.toStringTag):'HTMLAllCollection'}---4.Prototype&Object Tag---Object.prototype.toString.call(document.all):[object HTMLAllCollection]Symbol.toStringTag:HTMLAllCollection document.all.constructor.toString:functionHTMLAllCollection(){[native code]}document.all.constructor.name:HTMLAllCollection---5.Enumeration---Object.keys(document.all).length:2

新的问题

这个length 目前是0很好改，改成document.getElementsByTagName(‘*’).length的值就可以了，但是这个length方法应该是在原型链上，不是实例对象上。在HTMLAllCollection)里面。

所以，这个addon思路和魔改node的最大缺陷就是不知道某个方法是在实例，还是在它的哪一层原型上。这个必须要在js层来处理。

不过，如果是和之前的思路结合，应该能省下非常多的代码。比如

consthandler=function(obj,prop,args){constclassName=obj.constructor.name;constkey=`${className}_${prop}`;// 1. 日志console.log(`{get:${key}}`);// 2. 如果有自定义实现if(khBox.envFuncs[key]){returnkhBox.envFuncs[key].apply(obj,args);}// 3. 否则走JSDOMreturnReflect.get(khBox.memory.jsdom[className],prop);};// 转到c层去拦截使用khboxAddon.setupInterceptor(document,handler);