JS逆向浏览器脱环境专题：事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决

// 获取按钮元素
const button = document.getElementById('myButton');

// 定义点击事件处理函数
function handleClick(event) {
    alert('按钮被点击了！');
}

// 为按钮添加点击事件监听器
button.addEventListener('click', handleClick);

// 定义点击事件处理函数
function handleClick(event) {
    console.log('事件类型:', event.type); // 事件类型
    console.log('触发事件的元素:', event.target); // 触发事件的元素
    console.log('鼠标坐标:', event.clientX, event.clientY); // 鼠标坐标
}

// 为按钮添加点击事件监听器
button.addEventListener('click', handleClick);

// 获取父元素
const container = document.getElementById('container');

// 定义事件处理函数
function handleClick(event) {
    if (event.target && event.target.matches('button')) {
        alert('按钮被点击了！');
    }
}

// 为父元素添加点击事件监听器
container.addEventListener('click', handleClick);

// 获取文档中的标题元素
const title = document.getElementById('title');

// 修改标题的文本内容
title.textContent = '新的标题';

// 创建新的段落元素
const paragraph = document.createElement('p');
paragraph.textContent = '这是一个新的段落';

// 将新的段落添加到文档中
document.body.appendChild(paragraph);

// 访问浏览器的历史记录
function goBack() {
    window.history.back();
}

// 控制窗口的大小
function resizeWindow() {
    window.resizeTo(800, 600);
}

// 获取当前页面的 URL
const currentUrl = window.location.href;
console.log('当前 URL:', currentUrl);

// 获取用户代理
const userAgent = navigator.userAgent;

// 获取屏幕分辨率
const screenWidth = screen.width;
const screenHeight = screen.height;

// 获取浏览器语言
const language = navigator.language;

console.log('用户代理:', userAgent);
console.log('屏幕分辨率:', screenWidth, 'x', screenHeight);
console.log('浏览器语言:', language);

// 检测 WebGL 支持
function detectWebGL() {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    return !!gl;
}

// 检测 Canvas 渲染
function detectCanvas() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    ctx.textBaseline = 'alphabetic';
    ctx.font = '12px Arial';
    ctx.fillText('Hello', 0, 0);
    return canvas.toDataURL();
}

console.log('WebGL 支持:', detectWebGL());
console.log('Canvas 渲染数据:', detectCanvas());

// 设置代理
const proxy = new Proxy(target, handler);

// 目标对象
const target = {
    message: 'Hello, world!'
};

// 处理器对象
const handler = {
    get: function(target, property) {
        return property in target ? target[property] : 'Property not found';
    }
};

// 使用代理
console.log(proxy.message); // 输出: Hello, world!

// 脱环境框架示例
const environment = {
    detect() {
        // 检测环境的各种特征
        return {
            userAgent: navigator.userAgent,
            screenResolution: `${screen.width}x${screen.height}`
        };
    },
    spoof() {
        // 隐藏真实环境特征
        Object.defineProperty(navigator, 'userAgent', {
            get: () => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
        });
    }
};

// 使用脱环境框架
console.log('检测到的环境:', environment.detect());
environment.spoof();
console.log('伪装后的环境:', environment.detect());

// 示例插件代码
(function() {
    const plugin = {
        modifyHeaders() {
            // 修改请求头
            XMLHttpRequest.prototype.open = (function(open) {
                return function(method, url) {
                    this.setRequestHeader('X-Custom-Header', 'value');
                    open.apply(this, arguments);
                };
            })(XMLHttpRequest.prototype.open);
        },
        modifyNavigator() {
            // 修改 navigator 对象
            Object.defineProperty(navigator, 'platform', {
                get: () => 'Win32'
            });
        }
    };

    // 使用插件
    plugin.modifyHeaders();
    plugin.modifyNavigator();
})();