🛠️ 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 代码，为解决复杂问题和进行安全测试提供强有力的支持。
