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

木觞清2025-09-25 1:07

前言

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

一、什么是原型链检测？

1.1 JavaScript原型链基础

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 为什么网站要使用原型链检测？

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

  1. 反爬虫机制：防止自动化脚本访问

  2. 安全防护：检测是否在真实浏览器环境中运行

  3. 环境验证：确保代码在预期的环境中执行

  4. 防止调试：阻止开发者工具的分析

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

2.1 构造函数检测

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

2.2 原型链深度检测

javascript 复制代码 
// 检测原型链的完整性
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检测

javascript 复制代码 
// 使用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 属性描述符检测

javascript 复制代码 
// 检测属性的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 原型链差异示例

javascript 复制代码 
// 在浏览器中
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库创建基本环境

bash 复制代码 
npm install jsdom
javascript 复制代码 
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;

    // 将全局对象暴露到global
    global.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 修复原型链检测

javascript 复制代码 
// 修复常见的原型链检测
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 深度模拟原型链

javascript 复制代码 
// 深度模拟浏览器原型链
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 处理属性描述符检测

javascript 复制代码 
// 修复属性描述符检测
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 完整的环境模拟类

javascript 复制代码 
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() {
        // 修复构造函数toString
        const 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.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]';
            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 检测和绕过原型链检测的实用函数

javascript 复制代码 
// 检测当前环境是否被识别为浏览器
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通常会检测：

  1. navigator对象的属性和方法

  2. document对象的原型链

  3. window对象的特殊属性

  4. 性能API的相关特性

6.2 针对性的环境补全

javascript 复制代码 
// 专门针对京东H5ST的补环境方案
function fixForJDH5ST() {
    // 补全performance API
    if (!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 使用调试工具检测环境

javascript 复制代码 
// 环境检测调试工具
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 自动化测试环境模拟

javascript 复制代码 
// 自动化测试套件
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;
}

八、总结与最佳实践

8.1 最佳实践

  1. 分层模拟：从基础对象开始，逐步构建完整的原型链

  2. 动态检测：实时监测环境检测并动态修复

  3. 最小化修改：只修改必要的部分，避免过度工程

  4. 持续更新：随着网站检测机制的变化而更新模拟策略

8.2 注意事项

  • 避免直接修改原生对象的原型，这可能导致不可预见的副作用

  • 使用Object.defineProperty来精确控制属性特性

  • 定期检查环境模拟的有效性

  • 考虑使用沙箱环境来隔离模拟代码

8.3 未来趋势

随着Web技术的不断发展，环境检测技术也在不断进化。未来的趋势包括：

  1. WebAssembly检测：使用WASM进行更复杂的环境验证

  2. 硬件特性检测：检测GPU、CPU等硬件特性

  3. 行为分析：通过分析用户行为模式来识别自动化脚本

  4. 机器学习检测：使用ML算法识别异常环境模式

通过本文的详细讲解，您应该已经掌握了在Node.js中模拟浏览器原型环境的完整技术栈。记住，环境模拟是一个持续的过程，需要根据目标网站的具体检测机制进行相应的调整和优化。

相关推荐
或与且与或非3 小时前
rust使用sqlx示例
开发语言·数据库·rust
知识分享小能手3 小时前
React学习教程，从入门到精通，React Router 语法知识点及使用方法详解(28）
前端·javascript·学习·react.js·前端框架·vue·react
黄毛火烧雪下3 小时前
React中Class 组件 vs Hooks 对照
前端·javascript·react.js
gnip4 小时前
工作常用设计模式
前端·javascript
软件黑马王子4 小时前
C#练习题——泛型实现单例模式和增删改查
开发语言·单例模式·c#
前端达人5 小时前
「React实战面试题」useEffect依赖数组的常见陷阱
前端·javascript·react.js·前端框架·ecmascript
嵌入式小李.man5 小时前
C++第十篇：const关键字
开发语言·c++
码界筑梦坊5 小时前
194-基于Python的脑肿瘤患者数据分析可视化
开发语言·python·数据分析·sqlite·毕业设计·echarts·fastapi
郝学胜-神的一滴5 小时前
基于Linux，看清C++的动态库和静态库
linux·服务器·开发语言·c++·程序人生
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Spec-Kit 使用指南0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源062025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）08解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题09KGG转MP3工具|非KGM文件|解密音频10Linux下V2Ray安装配置指南