JavaScript Hook · 十招實戰詳解

01JSON stringify / parse

看清楚「加密前」和「解密後」的明文資料——排查介面參數最常用的一招。

網站要把資料發出去之前，通常會先把物件轉成 JSON 字串。所以「轉換的那一刻」就是資料最完整、最可讀的那一刻。在這裡攔下來，等於在包裹封箱之前先開箱看一眼。

var _stringify = JSON.stringify;
var _parse = JSON.parse;

JSON.stringify = function () {
    var result = _stringify.apply(this, arguments);
    console.log('[JSON.stringify] 輸入 →', arguments[0]);
    console.log('[JSON.stringify] 輸出 →', result);
    return result;
};

JSON.parse = function () {
    console.log('[JSON.parse] 輸入 →', arguments[0]);
    var result = _parse.apply(this, arguments);
    console.log('[JSON.parse] 輸出 →', result);
    return result;
};

02XHR 與 fetch 網路請求

頁面到底往哪個地址、發了什麼、收到什麼——一個腳本全交代。

這是十個腳本裡最實用的一個。因為網站絕大多數的行為，最後都要變成一個網路請求。抓住了請求，就抓住了主線。

它同時鉤了兩種東西：XMLHttpRequest（老式寫法，但至今仍大量存在）和 fetch（現代寫法）。兩個都蓋住，才不會漏。

XHR 的部分

XHR 需要鉤兩個方法，因為資訊分散在兩處：open 負責記錄「往哪發」，send 負責記錄「發了什麼」。

var _open = XMLHttpRequest.prototype.open;
var _send = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.open = function (method, url) {
    // 先把 method 和 url 記在這個實例身上，send 的時候才拿得到
    this.__hookInfo = { method: method, url: url };
    return _open.apply(this, arguments);
};

XMLHttpRequest.prototype.send = function (body) {
    var self = this;
    var info = this.__hookInfo || {};
    console.log('[XHR 請求] ' + info.method + ' ' + info.url, '\n參數:', body);

    // 等回應回來了再印
    this.addEventListener('load', function () {
        console.log('[XHR 回應] ' + info.url, '\n結果:', self.responseText);
    });

    return _send.apply(this, arguments);
};

fetch 的部分

fetch 有一個很關鍵的細節：回應內容只能被讀取一次。你讀走了，頁面自己就拿不到了，功能會直接壞掉。所以必須先 clone() 一份再讀。

var _fetch = window.fetch;

window.fetch = function () {
    var args = arguments;
    var url = args[0];
    var init = args[1] || {};

    console.log('[fetch 請求] ' + url, '\n參數:', init.body);

    return _fetch.apply(this, args).then(function (response) {
        // 必須 clone 一份再讀！直接讀會把資料流用掉，頁面就拿不到結果了
        response.clone().text().then(function (text) {
            console.log('[fetch 回應] ' + url, '\n結果:', text);
        });
        return response;
    });
};

03document.cookie Cookie 讀寫

看 cookie 在什麼時候、被哪一行程式碼寫進去。

很多網站的關鍵憑證藏在 cookie 裡，而且是由 JavaScript 動態生成的——每次請求前算一次，寫進 cookie，再發出去。你想知道它是怎麼算的，就得先知道它什麼時候被寫入。

但 document.cookie 不是普通方法，它是屬性。屬性不能用賦值的方式換掉，要用 Object.defineProperty 重新定義它的讀取（get）和寫入（set）行為。

// 關鍵：先拿到原生的 getter / setter（它們定義在 Document.prototype 上）
var desc = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie');

Object.defineProperty(document, 'cookie', {
    configurable: true,

    get: function () {
        var value = desc.get.call(document);
        console.log('[cookie 讀取] →', value);
        return value;
    },

    set: function (value) {
        console.log('[cookie 寫入] →', value);
        // 轉交給原生 setter，保證頁面原本的 cookie 邏輯不受影響
        return desc.set.call(document, value);
    }
});

04eval 與 Function 動態程式碼

揪出「加密函式」的原文——很多混淆過的網站，祕密就藏在這裡。

有些網站為了防分析，會把關鍵邏輯寫成一段字串，等到執行时才用 eval 或 new Function 把它變成真正能跑的程式碼。

這種情況下，你在 Sources 面板裡翻遍所有檔案都找不到——因為那段程式碼根本不在任何檔案裡，它是臨時拼出來的。

var _eval = window.eval;

window.eval = function (code) {
    console.log('[eval 執行] →', code);
    debugger;                  // 直接在這裡斷下
    return _eval.call(this, code);
};

var _Function = window.Function;

function HookedFunction() {
    console.log('[new Function] →', arguments);
    debugger;
    return _Function.apply(this, arguments);
}

// 保持原型鏈，否則 instanceof 之類的判斷會出問題
HookedFunction.prototype = _Function.prototype;
window.Function = HookedFunction;

裝上之後重新整理頁面，主控台會直接把那段「隱形程式碼」整段印出來。這往往是整個分析過程中最有突破性的一刻。

05localStorage / sessionStorage 瀏覽器儲存

看 token、使用者資訊、快取資料「什麼時候」被存進去。

Application 面板可以看到 localStorage 裡有什麼，但看不到什麼時候寫進去的。而時機往往才是關鍵——因為寫入的那一刻，就是資料產生的那一刻。

這裡有個很漂亮的技巧：localStorage 和 sessionStorage 都是 Storage 的實例，所以只要改 Storage.prototype，兩個就一起管住了，不用寫兩遍。

var _setItem = Storage.prototype.setItem;

function which(storage) {
    return storage === window.localStorage ? 'localStorage' : 'sessionStorage';
}

Storage.prototype.setItem = function (key, value) {
    console.log('[' + which(this) + ' 寫入] ' + key + ' =', value);
    return _setItem.apply(this, arguments);
};

06WebSocket 即時通訊

聊天、直播、股價走的是 WebSocket——這些資料在 Network 面板裡藏得很深。

WebSocket 建立連線之後，資料是雙向持續流動的，不像普通請求一問一答。在 Network 面板裡要一條一條手動點開訊息，很繁琐。裝上這個腳本，每一條訊息都會自動即時印出來。

它需要鉤兩個地方：發送用 send 方法，接收則要在連線建立時掛上監聽。

// 發送：改原型上的 send
var _send = WebSocket.prototype.send;

WebSocket.prototype.send = function (data) {
    console.log('[WS 發送] →', data);
    return _send.apply(this, arguments);
};

// 接收：要攔截建構式，才能在連線建立時掛監聽
var _WebSocket = window.WebSocket;

function HookedWebSocket(url, protocols) {
    var ws = (protocols === undefined)
      ? new _WebSocket(url)
      : new _WebSocket(url, protocols);

    ws.addEventListener('message', function (event) {
        console.log('[WS 接收] ←', event.data);
    });

    return ws;
}

// 原型鏈和靜態常數都要搬過去，否則會破壞頁面對 WebSocket 的判斷
HookedWebSocket.prototype = _WebSocket.prototype;
HookedWebSocket.CONNECTING = 0;
HookedWebSocket.OPEN = 1;
HookedWebSocket.CLOSING = 2;
HookedWebSocket.CLOSED = 3;

window.WebSocket = HookedWebSocket;

07atob / btoa Base64 編解碼

看到一串以 eyJ 開頭的亂碼？這招直接變回明文。

Base64 不是加密，它只是一種編碼方式，任何人都能還原。但很多網站會用它來讓參數「看起來像亂碼」，順便避開一些簡單的字串過濾。

var _atob = window.atob;
var _btoa = window.btoa;

window.atob = function (str) {
    var result = _atob.call(window, str);
    console.log('[atob 解碼]', '\n輸入:', str, '\n輸出:', result);
    return result;
};

window.btoa = function (str) {
    var result = _btoa.call(window, str);
    console.log('[btoa 編碼]', '\n輸入:', str, '\n輸出:', result);
    return result;
};

08setTimeout / setInterval 定時器

看定時器裡跑的究竟是什麼程式碼——常常是核心業務邏輯的入口。

定時器有個特性：程式碼是以「函式」的形式傳進去的。而函式可以透過 .toString() 把自己變成原始碼字串——所以我們能直接把「待會要執行的程式碼」印出來。

這個腳本還做了一個貼心設計：用一張表記住「定時器編號 → 對應的程式碼」，這樣 clearTimeout 清除時，能直接告訴你被清掉的是哪一段程式碼。

var _setTimeout = window.setTimeout;
var idMap = new Map();    // 定時器編號 → 函式原始碼

function sourceOf(fn) {
    return (typeof fn === 'function') ? fn.toString() : String(fn);
}

window.setTimeout = function (fn, delay) {
    var id = _setTimeout.apply(this, arguments);
    var src = sourceOf(fn);
    idMap.set(id, src);
    console.log('[setTimeout] ' + delay + 'ms', '\n', src);
    return id;
};

window.clearTimeout = function (id) {
    console.log('[clearTimeout] 清除 ' + id, '\n對應程式碼:', idMap.get(id) || '(未知)');
    idMap.delete(id);
    return _clearTimeout.apply(this, arguments);
};

09Math.random / Date.now 隨機數與時間戳

把隨機值和時間戳固定住，同一個請求就能反覆複現。

很多簽名演算法會故意摻入隨機數和時間戳，目的是防止請求被重放。但對做測試的人來說，這正是最煩的地方——每次算出來的簽名都不同，根本沒辦法比對。

把這兩個值固定住，同一個請求的簽名就會每次都一樣，於是就能反覆複現、逐步比對了。

var _random = Math.random;

Math.random = function () {
    var value = _random.apply(this, arguments);
    console.log('[Math.random] → ' + value);
    // 想固定就改成：return 0.123456;
    return value;
};

var _now = Date.now;

Date.now = function () {
    var value = _now.apply(this, arguments);
    console.log('[Date.now] → ' + value + '  (' + new Date(value).toLocaleString() + ')');
    // 想固定就改成：return 1735689600000;
    return value;
};

怎麼固定

把腳本裡那兩行註解打開、改成直接回傳定值就好：

Math.random = function () { return 0.123456; };
Date.now    = function () { return 1735689600000; };

10Object.defineProperty 隱藏的 getter / setter

抓出「讀取某個屬性時偷偷觸發加密」這種隱藏邏輯。

JavaScript 允許給物件定義「訪問器屬性」——表面上是一個普通屬性，但實際上每次讀取或寫入都會執行一段函式。

這意味著網站可以做到：你讀 obj.sign 的時候，它才現場算一遍加密。這種邏輯在程式碼裡用肉眼很難發現，因為它長得就像一個普通屬性。

var _defineProperty = Object.defineProperty;

Object.defineProperty = function (target, prop, descriptor) {
    // 只記錄「訪問器屬性」，也就是有 get 或 set 的
    if (descriptor && (descriptor.get || descriptor.set)) {
        console.log('[defineProperty] 定義訪問器屬性：' + String(prop),
                    '\n目標物件:', target,
                    '\n描述符:', descriptor);
    }
    return _defineProperty.apply(this, arguments);
};