当前位置：首页 > news >正文

补环境-JS原型链检测：在Node.js中完美模拟浏览器原型环境

news 2025/9/20 5:33:49

前言

在JavaScript逆向工程和爬虫开发中，我们经常遇到网站使用原型链检测来识别运行环境。这种检测机制能够区分代码是在真实浏览器中运行还是在Node.js等服务器环境中运行。本文将详细讲解原型链检测的原理，并教您如何在Node.js中完美模拟浏览器的原型环境。

一、什么是原型链检测？

1.1 JavaScript原型链基础

JavaScript是一种基于原型的语言，每个对象都有一个原型对象，对象从原型继承属性和方法。原型链是JavaScript实现继承的机制。

// 简单的原型链示例
function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log(`Hello, I'm ${this.name}`);
};const person = new Person('Alice');
person.sayHello(); // 输出: Hello, I'm Alice// 原型链关系
console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

1.2 为什么网站要使用原型链检测？

网站使用原型链检测的主要目的：

反爬虫机制：防止自动化脚本访问
安全防护：检测是否在真实浏览器环境中运行
环境验证：确保代码在预期的环境中执行
防止调试：阻止开发者工具的分析

二、常见的原型链检测方式

2.1 构造函数检测

// 检测document对象的构造函数
if (document.constructor.toString() !== function Document() { [native code] }.toString()) {console.log('环境异常：document构造函数被修改');
}

2.2 原型链深度检测

// 检测原型链的完整性
function checkPrototypeChain(obj, expectedChain) {let current = obj;for (const expected of expectedChain) {if (!current.__proto__ || current.__proto__.constructor.name !== expected) {return false;}current = current.__proto__;}return true;
}// 示例：检测navigator对象的原型链
const navigatorChain = ['Navigator', 'Object'];
if (!checkPrototypeChain(navigator, navigatorChain)) {console.log('navigator原型链异常');
}

2.3 toString检测

// 使用toString方法检测原生对象
function isNativeObject(obj) {return Object.prototype.toString.call(obj) === '[object Object]' &&obj.constructor.toString().includes('[native code]');
}// 检测window对象
if (!isNativeObject(window)) {console.log('window对象被篡改');
}

2.4 属性描述符检测

// 检测属性的configurable、writable等特性
function checkPropertyDescriptor(obj, prop) {const descriptor = Object.getOwnPropertyDescriptor(obj, prop);if (descriptor.configurable !== false || descriptor.writable !== false) {console.log(`属性 ${prop} 的描述符异常`);return false;}return true;
}// 检测window对象的window属性
checkPropertyDescriptor(window, 'window');

三、Node.js环境与浏览器环境的差异

3.1 全局对象差异

特性	浏览器环境	Node.js环境
全局对象	window	global
document对象	存在	不存在
navigator对象	存在	不存在
location对象	存在	不存在

3.2 原型链差异示例

// 在浏览器中
console.log(document.constructor.name); // "HTMLDocument" 或 "Document"
console.log(document.__proto__.constructor.name); // "Document"
console.log(document.__proto__.__proto__.constructor.name); // "Node"// 在Node.js中（如果没有模拟）
console.log(document); // ReferenceError: document is not defined

四、在Node.js中模拟浏览器原型环境

4.1 使用jsdom库创建基本环境

npm install jsdom

const { JSDOM } = require('jsdom');// 创建完整的浏览器环境
function createBrowserEnvironment() {const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {url: 'https://www.example.com/',referrer: 'https://www.google.com/',contentType: 'text/html',userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',includeNodeLocations: true,storageQuota: 10000000});const { window } = dom;// 将全局对象暴露到globalglobal.window = window;global.document = window.document;global.navigator = window.navigator;global.location = window.location;global.HTMLElement = window.HTMLElement;global.Element = window.Element;global.Node = window.Node;global.Document = window.Document;global.HTMLDocument = window.HTMLDocument;return dom;
}// 使用环境
const dom = createBrowserEnvironment();

4.2 修复原型链检测

// 修复常见的原型链检测
function fixPrototypeChecks() {// 修复constructor检测const originalToString = Function.prototype.toString;Function.prototype.toString = function() {if (this === document.constructor) {return 'function Document() { [native code] }';}if (this === window.constructor) {return 'function Window() { [native code] }';}if (this === navigator.constructor) {return 'function Navigator() { [native code] }';}return originalToString.call(this);};// 修复toString检测const originalObjectToString = Object.prototype.toString;Object.prototype.toString = function() {if (this === window) {return '[object Window]';}if (this === document) {return '[object HTMLDocument]';}if (this === navigator) {return '[object Navigator]';}return originalObjectToString.call(this);};
}// 应用修复
fixPrototypeChecks();

4.3 深度模拟原型链

// 深度模拟浏览器原型链
function deepSimulatePrototypeChain() {// 保存原始原型const originalObjectProto = Object.getPrototypeOf(Object.prototype);// 模拟完整的原型链function createNativeLikeFunction(name, toStringValue) {const func = function() {};func.toString = () => toStringValue;Object.defineProperty(func, 'name', {value: name,configurable: false,writable: false,enumerable: false});return func;}// 创建原生类似的构造函数const NativeNode = createNativeLikeFunction('Node', 'function Node() { [native code] }');const NativeElement = createNativeLikeFunction('Element', 'function Element() { [native code] }');const NativeHTMLElement = createNativeLikeFunction('HTMLElement', 'function HTMLElement() { [native code] }');const NativeDocument = createNativeLikeFunction('Document', 'function Document() { [native code] }');const NativeHTMLDocument = createNativeLikeFunction('HTMLDocument', 'function HTMLDocument() { [native code] }');// 设置原型链关系NativeHTMLElement.prototype.__proto__ = NativeElement.prototype;NativeElement.prototype.__proto__ = NativeNode.prototype;NativeNode.prototype.__proto__ = originalObjectProto;NativeHTMLDocument.prototype.__proto__ = NativeDocument.prototype;NativeDocument.prototype.__proto__ = NativeNode.prototype;// 替换现有对象的原型Object.setPrototypeOf(global.HTMLElement.prototype, NativeHTMLElement.prototype);Object.setPrototypeOf(global.Element.prototype, NativeElement.prototype);Object.setPrototypeOf(global.Node.prototype, NativeNode.prototype);Object.setPrototypeOf(global.HTMLDocument.prototype, NativeHTMLDocument.prototype);Object.setPrototypeOf(global.Document.prototype, NativeDocument.prototype);// 修复构造函数引用global.HTMLElement.prototype.constructor = NativeHTMLElement;global.Element.prototype.constructor = NativeElement;global.Node.prototype.constructor = NativeNode;global.HTMLDocument.prototype.constructor = NativeHTMLDocument;global.Document.prototype.constructor = NativeDocument;
}

4.4 处理属性描述符检测

// 修复属性描述符检测
function fixPropertyDescriptors() {// 修复window对象的属性描述符Object.defineProperty(global.window, 'window', {value: global.window,configurable: false,writable: false,enumerable: true});Object.defineProperty(global.window, 'document', {value: global.document,configurable: false,writable: false,enumerable: true});Object.defineProperty(global.window, 'navigator', {value: global.navigator,configurable: false,writable: false,enumerable: true});Object.defineProperty(global.window, 'location', {value: global.location,configurable: false,writable: false,enumerable: true});// 修复document对象的属性描述符Object.defineProperty(global.document, 'documentElement', {value: global.document.documentElement,configurable: false,writable: false,enumerable: true});
}

五、完整的浏览器环境模拟方案

5.1 完整的环境模拟类

const { JSDOM } = require('jsdom');class BrowserEnvironmentSimulator {constructor(options = {}) {this.options = {url: 'https://www.example.com/',userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',...options};this.dom = null;this.init();}init() {// 创建JSDOM实例this.dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {url: this.options.url,referrer: 'https://www.google.com/',contentType: 'text/html',userAgent: this.options.userAgent,includeNodeLocations: true,storageQuota: 10000000,runScripts: 'dangerously',resources: 'usable'});const { window } = this.dom;// 暴露全局对象this.exposeGlobals(window);// 修复原型链this.fixPrototypeChain();// 修复属性描述符this.fixPropertyDescriptors();// 修复其他检测this.fixOtherDetections();}exposeGlobals(window) {const globals = ['window', 'document', 'navigator', 'location', 'history','HTMLElement', 'Element', 'Node', 'Document', 'HTMLDocument','HTMLCollection', 'NodeList', 'Image', 'Audio', 'Video','CanvasRenderingContext2D', 'WebGLRenderingContext'];globals.forEach(globalName => {if (window[globalName]) {global[globalName] = window[globalName];}});// 特殊处理global.self = global.window;}fixPrototypeChain() {// 修复构造函数toStringconst nativeFunctions = {'Document': 'function Document() { [native code] }','HTMLDocument': 'function HTMLDocument() { [native code] }','Window': 'function Window() { [native code] }','Navigator': 'function Navigator() { [native code] }','Location': 'function Location() { [native code] }'};const originalToString = Function.prototype.toString;Function.prototype.toString = function() {const functionName = this.name;if (nativeFunctions[functionName]) {return nativeFunctions[functionName];}return originalToString.call(this);};// 修复Object.prototype.toStringconst originalObjectToString = Object.prototype.toString;Object.prototype.toString = function() {if (this === window) return '[object Window]';if (this === document) return '[object HTMLDocument]';if (this === navigator) return '[object Navigator]';if (this === location) return '[object Location]';return originalObjectToString.call(this);};}fixPropertyDescriptors() {// 修复window属性const windowProperties = ['window', 'document', 'navigator', 'location', 'self'];windowProperties.forEach(prop => {if (prop in window) {Object.defineProperty(window, prop, {value: window[prop],configurable: false,writable: false,enumerable: true});}});}fixOtherDetections() {// 修复常见的环境检测if (!('ontouchstart' in window)) {Object.defineProperty(window, 'ontouchstart', {value: null,configurable: true,writable: true,enumerable: true});}// 添加常见的浏览器特性if (!('chrome' in window)) {Object.defineProperty(window, 'chrome', {value: {},configurable: false,writable: false,enumerable: false});}}// 执行代码在模拟环境中executeInContext(code) {const script = this.dom.window.document.createElement('script');script.textContent = code;this.dom.window.document.head.appendChild(script);}// 清理环境cleanup() {if (this.dom) {this.dom.window.close();}}
}// 使用示例
const simulator = new BrowserEnvironmentSimulator();
simulator.executeInContext(`console.log('Window constructor:', Window.toString());console.log('Document constructor:', Document.toString());console.log('Object toString window:', Object.prototype.toString.call(window));
`);
simulator.cleanup();

5.2 检测和绕过原型链检测的实用函数

// 检测当前环境是否被识别为浏览器
function isEnvironmentDetectedAsBrowser() {try {// 常见的检测点const tests = [() => window.constructor.toString().includes('[native code]'),() => document.constructor.toString().includes('[native code]'),() => Object.prototype.toString.call(window) === '[object Window]',() => Object.prototype.toString.call(document) === '[object HTMLDocument]',() => 'ontouchstart' in window,() => 'chrome' in window,() => navigator.userAgent === simulator.options.userAgent];return tests.every(test => test());} catch (error) {return false;}
}// 动态修复检测到的漏洞
function dynamicallyFixEnvironment() {const detectedIssues = [];// 检查并修复各种检测if (!window.constructor.toString().includes('[native code]')) {detectedIssues.push('Window constructor detection');// 动态修复...}if (Object.prototype.toString.call(document) !== '[object HTMLDocument]') {detectedIssues.push('Document toString detection');// 动态修复...}return detectedIssues;
}

六、实战案例：绕过京东H5ST检测

6.1 分析京东的检测机制

京东H5ST通常会检测：

navigator对象的属性和方法
document对象的原型链
window对象的特殊属性
性能API的相关特性

6.2 针对性的环境补全

// 专门针对京东H5ST的补环境方案
function fixForJDH5ST() {// 补全performance APIif (!window.performance) {window.performance = {timing: {navigationStart: Date.now(),connectEnd: Date.now(),connectStart: Date.now(),domComplete: Date.now(),domContentLoadedEventEnd: Date.now(),domContentLoadedEventStart: Date.now(),domInteractive: Date.now(),domLoading: Date.now(),domainLookupEnd: Date.now(),domainLookupStart: Date.now(),fetchStart: Date.now(),loadEventEnd: Date.now(),loadEventStart: Date.now(),requestStart: Date.now(),responseEnd: Date.now(),responseStart: Date.now(),secureConnectionStart: 0,unloadEventEnd: 0,unloadEventStart: 0},now: () => Date.now() - performance.timing.navigationStart};}// 补全屏幕信息if (!window.screen) {window.screen = {width: 1920,height: 1080,availWidth: 1920,availHeight: 1040,colorDepth: 24,pixelDepth: 24};}// 补全插件信息if (navigator.plugins.length === 0) {navigator.plugins = [{name: 'Chrome PDF Plugin',filename: 'internal-pdf-viewer',description: 'Portable Document Format',length: 1}];}
}

七、调试和测试技巧

7.1 使用调试工具检测环境

// 环境检测调试工具
class EnvironmentDebugger {static checkCommonDetections() {const results = {};// 检查各种常见的检测点results.windowConstructor = Window.toString();results.documentConstructor = Document.toString();results.windowToString = Object.prototype.toString.call(window);results.documentToString = Object.prototype.toString.call(document);results.navigatorProperties = Object.getOwnPropertyNames(navigator).slice(0, 10);results.documentProperties = Object.getOwnPropertyNames(document).slice(0, 10);results.prototypeChain = this.getPrototypeChain(document);return results;}static getPrototypeChain(obj) {const chain = [];let current = obj;while (current) {chain.push({constructor: current.constructor ? current.constructor.name : 'null',toString: Object.prototype.toString.call(current)});current = Object.getPrototypeOf(current);}return chain;}
}// 使用调试工具
console.log('环境检测结果:', EnvironmentDebugger.checkCommonDetections());

7.2 自动化测试环境模拟

// 自动化测试套件
function runEnvironmentTests() {const tests = [{name: 'Window constructor check',test: () => Window.toString().includes('[native code]'),fix: () => { /* 修复代码 */ }},{name: 'Document prototype chain',test: () => {const proto = Object.getPrototypeOf(document);return proto.constructor.name === 'Document';},fix: () => { /* 修复代码 */ }}// 更多测试...];const results = tests.map(test => {const passed = test.test();if (!passed) {console.warn(`Test failed: ${test.name}`);test.fix();}return { name: test.name, passed };});return results;
}