JavaScript 逆向基础篇：浏览器调试与 Hook 技术

🛠️ JavaScript 逆向基础篇：浏览器调试与 Hook 技术

在进行 JavaScript 逆向工程时，浏览器的开发者工具和各种调试技术是必不可少的。以下内容将详细介绍如何利用浏览器的开发者工具进行调试，以及如何编写各种 Hook 技术，以便深入分析和操控 JavaScript 代码。

🔍 浏览器控制台

浏览器控制台是进行 JavaScript 调试和测试的重要工具。通过控制台，可以执行 JavaScript 代码、查看日志信息、以及与页面交互。

执行 JavaScript 代码

在浏览器的控制台中，可以直接输入和执行 JavaScript 代码。这对于测试代码片段、调试问题、以及实时查看变量值非常有用。

// 打印当前页面的标题
console.log(document.title);

// 执行 JavaScript 代码
let num = 10;
let result = num * 2;
console.log(result); // 输出: 20

查看日志信息

控制台提供了 console.log、console.warn、console.error 等方法来记录信息、警告和错误。这对于跟踪代码执行流程和诊断问题非常有帮助。

console.log('This is a log message');
console.warn('This is a warning message');
console.error('This is an error message');

实时监控和调试

控制台还可以用来实时监控变量的值和函数的执行。例如，设置断点并使用 debugger 语句可以暂停代码执行并进入调试模式。

function testFunction() {
    let value = 100;
    debugger; // 设置断点
    console.log(value);
}
testFunction();

🌐 Network 面板

Network 面板用于监控和分析网页中的网络请求。这对于调试 AJAX 请求、查看请求和响应数据、以及优化页面性能非常有用。

XHR 调试

XHR（XMLHttpRequest）调试允许监控 AJAX 请求的发送和响应。可以查看请求的 URL、请求方法、响应状态码以及返回的数据。

// 发起一个 XHR 请求
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

在 Network 面板中，找到并点击相关的 XHR 请求，可以查看请求头、响应数据、以及请求的详细信息。

查看请求和响应

可以通过 Network 面板查看请求的详细信息，包括请求头、响应头、请求体和响应体。这对于调试网络请求和分析数据非常重要。

// 发送带有自定义头的请求
let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ key: 'value' }));

分析请求性能

Network 面板提供了请求的加载时间和响应时间数据，帮助分析页面的性能瓶颈。通过这些数据，可以优化网络请求，提高页面加载速度。

🧩 Source 面板

Source 面板用于查看和调试网页中的源代码，包括 JavaScript、CSS 和其他资源。可以用来设置断点、逐步执行代码、查看堆栈信息等。

代码调试

在 Source 面板中，可以打开 JavaScript 文件并设置断点。当代码执行到断点处时，调试器会暂停执行，允许检查变量值和调用栈。

function sampleFunction() {
    let x = 5;
    let y = 10;
    let sum = x + y; // 设置断点在此行
    console.log(sum);
}
sampleFunction();

在 Source 面板中，点击左侧行号可以设置断点，并在代码执行到该行时暂停。

堆栈调试

堆栈调试允许查看当前函数的调用堆栈，从而了解代码的执行流程和函数调用链。这对于追踪问题的根源非常有帮助。

function a() {
    b();
}
function b() {
    c();
}
function c() {
    debugger; // 设置断点
}
a();

在调试模式下，查看 Call Stack 部分可以看到函数的调用顺序。

控制台调试

Source 面板中的控制台允许实时执行 JavaScript 代码，检查变量值，以及调用函数。这对于调试和测试非常实用。

let testVar = 'Hello, World!';
console.log(testVar); // 输出: Hello, World!

⚙️ Application 面板

Application 面板用于查看和管理浏览器存储的数据，包括 Cookies、Local Storage、Session Storage、IndexedDB 等。

Cookies 管理

Cookies 是用于存储小量数据的机制，可以在 Application 面板中查看和管理。

// 设置 Cookie
document.cookie = "user=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";

// 读取 Cookie
console.log(document.cookie);

在 Application 面板中，可以查看所有 Cookies 的详细信息，并可以进行删除和修改操作。

Local Storage 和 Session Storage

Local Storage 和 Session Storage 用于存储较大的数据，并且 Local Storage 数据在浏览器关闭后仍然存在，而 Session Storage 数据会在页面会话结束时删除。

// Local Storage 操作
localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 输出: value

// Session Storage 操作
sessionStorage.setItem('sessionKey', 'sessionValue');
console.log(sessionStorage.getItem('sessionKey')); // 输出: sessionValue

IndexedDB

IndexedDB 是一种更复杂的存储机制，用于存储大量结构化数据。可以在 Application 面板中查看和管理 IndexedDB 数据库。

let request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
    let db = event.target.result;
    db.createObjectStore('myStore', { keyPath: 'id' });
};

🔄 XHR 调试与 Hook 技术

XHR 调试与 Hook 技术用于深入分析和操控网络请求。通过这些技术，可以监控、修改或阻止 XHR 请求，实现更复杂的逆向操作。

XHR Hook 编写

通过编写 XHR Hook，可以拦截和修改 XHR 请求和响应数据。这对于分析和调试网络请求非常有用。

// 保存原始 XHR 发送方法
const originalSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.send = function() {
    console.log('XHR request intercepted');
    this.addEventListener('load', function() {
        console.log('XHR response:', this.responseText);
    });
    originalSend.apply(this, arguments);
};

Header Hook 编写

Header Hook 允许拦截和修改请求头和响应头，帮助分析和调试请求和响应的详细信息。

const originalOpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, url) {
    console.log('Request URL:', url);
    this.setRequestHeader('X-Custom-Header', 'CustomValue');
    originalOpen.apply(this, arguments);
};

Debugger Hook

Debugger Hook 用于自动触发 debugger 语句，从而中断执行并进入调试模式。这对于自动化调试过程非常有用。

const originalFunction = Function.prototype.toString;

Function.prototype.toString = function() {
    debugger; // 自动触发调试
    return originalFunction.apply(this, arguments);
};

Eval Hook

Eval Hook 允许拦截和修改 eval 函数的执行，帮助分析和调试动态代码的执行。

const originalEval = eval;

eval = function(code) {
    console.log('Eval code:', code);
    return originalEval.apply(this, arguments);
};

JSON Hook

JSON Hook 用于拦截和修改 JSON 数据的解析和字符串化操作，帮助调试和分析 JSON 数据处理。

const originalParse = JSON.parse;
const originalStringify = JSON.stringify;

JSON.parse = function(text) {
    console.log('Parsing JSON:', text);
    return originalParse.apply(this, arguments);
};

JSON.stringify = function(value) {
    console.log('Stringifying JSON:', value);
    return originalStringify.apply(this, arguments);
};

Cookie Hook

Cookie Hook 允许拦截和修改 Cookies 的读取和写入操作，帮助调试和分析 Cookies 的使用。

const originalSetCookie = document.cookie;

Object.defineProperty(document, 'cookie', {
    get: function() {
        console.log('Getting cookie:', originalSetCookie);
        return originalSetCookie;
    },
    set: function(value) {
        console.log('Setting cookie:', value);
        originalSetCookie = value;
    }
});

WebSocket Hook

WebSocket Hook 用于拦截和修改 WebSocket 的数据传输，帮助调试和分析实时通信。

const originalSendWS = WebSocket.prototype.send;

WebSocket.prototype.send = function(data) {
    console.log('WebSocket sending data:', data);
    originalSendWS.apply(this, arguments);
};

Canvas Hook

Canvas Hook 允许拦截和修改 Canvas 元素的绘图操作，帮助分析和调试图形渲染。

const originalFillRect = CanvasRenderingContext2D.prototype.fillRect;

CanvasRenderingContext2D.prototype.fillRect = function(x, y, width, height) {
    console.log('Drawing rectangle:', x, y, width, height);
    return originalFillRect.apply(this, arguments);
};

通过掌握这些调试技术和 Hook 方法，可以更加深入地分析和逆向工程 JavaScript 代码，为解决复杂问题和进行安全测试提供强有力的支持。