【JS逆向百例】某音樂網分離式 webpack 非 IIFE 改寫實戰

K哥爬蟲發表於2021-11-04

關注微信公眾號:K哥爬蟲,QQ交流群:808574309,持續分享爬蟲進階、JS/安卓逆向等技術乾貨!

宣告

本文章中所有內容僅供學習交流,抓包內容、敏感網址、資料介面均已做脫敏處理,嚴禁用於商業用途和非法用途,否則由此產生的一切後果均與作者無關,若有侵權,請聯絡我立即刪除!

逆向目標

  • 目標:KW音樂搜尋引數
  • 主頁:aHR0cDovL3d3dy5rdXdvLmNuLw==
  • 介面:aHR0cDovL3d3dy5rdXdvLmNuL2FwaS93d3cvc2VhcmNoL3NlYXJjaE11c2ljQnlrZXlXb3Jk
  • 逆向引數:Query String Parameters:reqId: 15c31270-32e8-11ec-a637-0b779ce474e4

本次的逆向目標是搜尋介面的一個引數 reqId,注意這個引數並不是必須的,本文的主要目的是介紹分離式 webpack,即模組載入器與各個模組不在同一個 JS 檔案裡時,該如何改寫 webpack,以及如何通過非 IIFE(立即呼叫函式表示式、自執行函式)的方式對 webpack 進行改寫,本篇文章是對往期文章的一個擴充:

逆向過程

抓包分析

來到搜尋頁面,隨便搜尋一搜歌曲,抓包到介面類為 aHR0cDovL3d3dy5rdXdvLmNuL2FwaS93d3cvc2VhcmNoL3NlYXJjaE11c2ljQnlrZXlXb3Jk,GET 請求,Query String Parameters 裡有個 reqId 加密引數,如下圖所示:

01.png

引數逆向

直接全域性搜尋 reqId,僅在 app.4eedc3a.js 檔案裡面有 4 個結果,如下圖所示:

02.png

很明顯 t.data.reqId = rt.data.reqId = n 是比較可疑的,嘗試在這兩個地方埋下斷點,會發現重新整理網頁或者重新搜尋無法斷下,我們觀察一下這兩個地方,rn 的定義語句 var r = c()();var n = c()(); 都是 由 c()() 得到的,我們嘗試在這兩個位置埋下斷點,重新搜尋,可以發現成功斷下,而 c()() 的值正是 reqId 的值,如下圖所示:

03.png

繼續往上找,看看 c 是怎麼來的,可以看到一下邏輯:

var l = n(109)
  , c = n.n(l)
var r = c()();

埋下斷點進行除錯,可以看到 n 其實是 runtime.d5e801d.js 裡面的一個方法,如下圖所示:

04.png

觀察這個 function d(n){},return 語句用到了 .call 語法,裡面還有 exports 關鍵字,通過 K 哥往期文章的介紹,很容易知道這是一個 webpack 的模組載入器,那麼 e 就包含了所有模組,如下圖所示:

05.png

我們再觀察一下 n(109),點選進入這個函式,可以發現和前後函式用逗號分隔,劃到這個檔案的結尾,可以看到有 ] 符號,這說明 webpack 的所有模組都封裝在一個陣列裡面,那麼這個 109 就代表這個函式是第 109 個函式,如下圖所示:

06.png

再看看 c = n.n(l) 語句,選中 n.n 點選會發現同樣來到模組載入器這裡,那麼到時候扣程式碼的時候把 d.n 也扣下來即可。

07.png

那麼總結一下邏輯,語句 l = n(109),利用模組載入器,載入了第 109 個函式,返回值賦值給 l,然後 c = n.n(l) 呼叫模組載入器的 n 方法,返回值賦值給 c,然後執行 c()() 就得到 reqId 的值了。

webpack 改寫

在 K 哥往期的文章已經介紹過 webpack 的改寫方法,本次案例 K 哥將會介紹三種方法,也可以分為兩種,一種是 IIFE(立即呼叫函式表示式、自執行函式) 方式,只不過傳的引數,也就是模組的格式,分為陣列和字典兩種,第二種是非 IIFE 方式,比較常規的改寫方法,看起來也比較容易理解一點。PS:完整程式碼不太好看清楚整個的結構,可以使用 VSCode 等工具摺疊所有程式碼,就可以清楚地看到不同改寫方法下,程式碼的不同結構了。

通過前面的分析,我們知道模組載入器裡用到了 d.n,實際除錯還用到了 d.dd.o,所以都要一起扣下來。

模組部分,我們已經知道呼叫了 109 這個模組,而觀察 109 的程式碼, 發現還呼叫了 202 和 203 模組,所以需要將這三個模組都 copy 下來,copy 的時候,我們首先斷點執行到模組載入器,由於 e 儲存了所有模組,所以我們可以直接在 Console 裡呼叫 e[109]e[202]e[203] 輸出一下,然後點選就可以跳到原函式的位置,然後再 copy 下來即可,如下圖所示:

08.png

IIFE 傳陣列

在 K 哥往期的文章中已經介紹過 IIFE 的改寫方法,同樣的,我們首先定義一個全域性變數,比如 var kuwo;,然後匯出模組載入器 kuwo = d,然後將 109、202、203 這三個模組組成的陣列傳入 IIFE,那麼這裡不再是第 109、202、203 個模組,而是第 0、1、2 個模組,所以在呼叫模組的時候也要將對應的 109、202、203 改為 0、1、2,完整程式碼如下所示:

var kuwo;

!function (e){
    var t = {};

    function d(n) {
        if (t[n]) return t[n].exports;
        var r = t[n] = {
            i: n,
            l: !1,
            exports: {}
        };
        return e[n].call(r.exports, r, r.exports, d),
            r.l = !0,
            r.exports
    }

    d.n = function (e) {
        var n = e && e.__esModule ?
            function () {
                return e.default
            } :
            function () {
                return e
            };
        return d.d(n, "a", n),
            n
    },
    d.d = function (e, n, r) {
            d.o(e, n) || Object.defineProperty(e, n, {
                enumerable: !0,
                get: r
            })
        },
    d.o = function (object, e) {
            return Object.prototype.hasOwnProperty.call(object, e)
        }

    kuwo = d
}([
    function (t, e, n) {
        var r, o, l = n(1),
            c = n(2),
            h = 0,
            d = 0;
        t.exports = function (t, e, n) {
            var i = e && n || 0,
                b = e || [],
                f = (t = t || {}).node || r,
                v = void 0 !== t.clockseq ? t.clockseq : o;
            if (null == f || null == v) {
                var m = l();
                null == f && (f = r = [1 | m[0], m[1], m[2], m[3], m[4], m[5]]),
                null == v && (v = o = 16383 & (m[6] << 8 | m[7]))
            }
            var y = void 0 !== t.msecs ? t.msecs : (new Date).getTime(),
                w = void 0 !== t.nsecs ? t.nsecs : d + 1,
                dt = y - h + (w - d) / 1e4;
            if (dt < 0 && void 0 === t.clockseq && (v = v + 1 & 16383), (dt < 0 || y > h) && void 0 === t.nsecs && (w = 0), w >= 1e4) throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");
            h = y,
                d = w,
                o = v;
            var x = (1e4 * (268435455 & (y += 122192928e5)) + w) % 4294967296;
            b[i++] = x >>> 24 & 255,
                b[i++] = x >>> 16 & 255,
                b[i++] = x >>> 8 & 255,
                b[i++] = 255 & x;
            var _ = y / 4294967296 * 1e4 & 268435455;
            b[i++] = _ >>> 8 & 255,
                b[i++] = 255 & _,
                b[i++] = _ >>> 24 & 15 | 16,
                b[i++] = _ >>> 16 & 255,
                b[i++] = v >>> 8 | 128,
                b[i++] = 255 & v;
            for (var A = 0; A < 6; ++A) b[i + A] = f[A];
            return e || c(b)
        }
    },
    function (t, e) {
        var n = "undefined" != typeof crypto && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || "undefined" != typeof msCrypto && "function" == typeof window.msCrypto.getRandomValues && msCrypto.getRandomValues.bind(msCrypto);
        if (n) {
            var r = new Uint8Array(16);
            t.exports = function () {
                return n(r),
                    r
            }
        } else {
            var o = new Array(16);
            t.exports = function () {
                for (var t, i = 0; i < 16; i++) 0 == (3 & i) && (t = 4294967296 * Math.random()),
                    o[i] = t >>> ((3 & i) << 3) & 255;
                return o
            }
        }
    },
    function (t, e) {
        for (var n = [], i = 0; i < 256; ++i) n[i] = (i + 256).toString(16).substr(1);
        t.exports = function (t, e) {
            var i = e || 0,
                r = n;
            return [r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]]].join("")
        }
    }
])

function getReqId() {
    var l = kuwo(0),
        c = kuwo.n(l),
        r = c()()
    return r
}

// console.log(getReqId())

IIFE 傳字典

那麼同樣的 IIFE,我們將 109、202、203 這三個模組組成的字典傳入 IIFE,鍵就依次取名為 109、202、203,值就是對應的函式,那麼在呼叫對應的函式的時候就直接取鍵名就行了,比如 var c = n(203),這裡需要注意的是,如果函式名不是數字,在呼叫時就要加引號,比如函式名為 f203,呼叫語句就應該是 var c = n("f203"),完整程式碼如下所示:

var kuwo;

!function(e) {
    var t = {};

    function d(n) {
        if (t[n]) return t[n].exports;
        var r = t[n] = {
            i: n,
            l: !1,
            exports: {}
        };
        return e[n].call(r.exports, r, r.exports, d),
        r.l = !0,
        r.exports
    }

    d.n = function(e) {
        var n = e && e.__esModule ?
        function() {
            return e.
        default
        }:
        function() {
            return e
        };
        return d.d(n, "a", n),
        n
    },
    d.d = function(e, n, r) {
        d.o(e, n) || Object.defineProperty(e, n, {
            enumerable: !0,
            get: r
        })
    },
    d.o = function(object, e) {
        return Object.prototype.hasOwnProperty.call(object, e)
    }

    kuwo = d
} ({
    109 : function(t, e, n) {
        var r, o, l = n(202),
        c = n(203),
        h = 0,
        d = 0;
        t.exports = function(t, e, n) {
            var i = e && n || 0,
            b = e || [],
            f = (t = t || {}).node || r,
            v = void 0 !== t.clockseq ? t.clockseq: o;
            if (null == f || null == v) {
                var m = l();
                null == f && (f = r = [1 | m[0], m[1], m[2], m[3], m[4], m[5]]),
                null == v && (v = o = 16383 & (m[6] << 8 | m[7]))
            }
            var y = void 0 !== t.msecs ? t.msecs: (new Date).getTime(),
            w = void 0 !== t.nsecs ? t.nsecs: d + 1,
            dt = y - h + (w - d) / 1e4;
            if (dt < 0 && void 0 === t.clockseq && (v = v + 1 & 16383), (dt < 0 || y > h) && void 0 === t.nsecs && (w = 0), w >= 1e4) throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");
            h = y,
            d = w,
            o = v;
            var x = (1e4 * (268435455 & (y += 122192928e5)) + w) % 4294967296;
            b[i++] = x >>> 24 & 255,
            b[i++] = x >>> 16 & 255,
            b[i++] = x >>> 8 & 255,
            b[i++] = 255 & x;
            var _ = y / 4294967296 * 1e4 & 268435455;
            b[i++] = _ >>> 8 & 255,
            b[i++] = 255 & _,
            b[i++] = _ >>> 24 & 15 | 16,
            b[i++] = _ >>> 16 & 255,
            b[i++] = v >>> 8 | 128,
            b[i++] = 255 & v;
            for (var A = 0; A < 6; ++A) b[i + A] = f[A];
            return e || c(b)
        }
    },
    202 : function(t, e) {
        var n = "undefined" != typeof crypto && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || "undefined" != typeof msCrypto && "function" == typeof window.msCrypto.getRandomValues && msCrypto.getRandomValues.bind(msCrypto);
        if (n) {
            var r = new Uint8Array(16);
            t.exports = function() {
                return n(r),
                r
            }  
        } else {
            var o = new Array(16);
            t.exports = function() {
                for (var t, i = 0; i < 16; i++) 0 == (3 & i) && (t = 4294967296 * Math.random()),
                o[i] = t >>> ((3 & i) << 3) & 255;
                return o
            }
        }
    },
    203 : function(t, e) {
        for (var n = [], i = 0; i < 256; ++i) n[i] = (i + 256).toString(16).substr(1);
        t.exports = function(t, e) {
            var i = e || 0,
            r = n;
            return [r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]]].join("")
        }
    }
})

function getReqId() {
    var l = kuwo(109),
    c = kuwo.n(l),
    r = c()()
    return r
}

// console.log(getReqId())

非 IIFE 常規改寫

通過前面的分析,我們已經知道 webpack 的模組載入器裡面,e 包含了所有模組,然後定義全域性變數把模組載入器匯出來,再依次呼叫 e 裡面的模組,其實也可以不使用 IIFE 的方式,就和我們常規的函式呼叫一樣,首先把用到的三個模組,直接在外面定義出來,然後將三個模組封裝成一個字典或者陣列,將字典或者陣列賦值給 e,然後將原來的模組載入器 function d(n){} 也直接拿出來,引數 n 表示要呼叫 e 裡面的哪個函式,傳入對應的名稱或者下標即可。完整程式碼如下:

var f109 = function(t, e, n) {
    var r, o, l = n(1),
    c = n(2),
    h = 0,
    d = 0;
    t.exports = function(t, e, n) {
        var i = e && n || 0,
        b = e || [],
        f = (t = t || {}).node || r,
        v = void 0 !== t.clockseq ? t.clockseq: o;
        if (null == f || null == v) {
            var m = l();
            null == f && (f = r = [1 | m[0], m[1], m[2], m[3], m[4], m[5]]),
            null == v && (v = o = 16383 & (m[6] << 8 | m[7]))
        }
        var y = void 0 !== t.msecs ? t.msecs: (new Date).getTime(),
        w = void 0 !== t.nsecs ? t.nsecs: d + 1,
        dt = y - h + (w - d) / 1e4;
        if (dt < 0 && void 0 === t.clockseq && (v = v + 1 & 16383), (dt < 0 || y > h) && void 0 === t.nsecs && (w = 0), w >= 1e4) throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");
        h = y,
        d = w,
        o = v;
        var x = (1e4 * (268435455 & (y += 122192928e5)) + w) % 4294967296;
        b[i++] = x >>> 24 & 255,
        b[i++] = x >>> 16 & 255,
        b[i++] = x >>> 8 & 255,
        b[i++] = 255 & x;
        var _ = y / 4294967296 * 1e4 & 268435455;
        b[i++] = _ >>> 8 & 255,
        b[i++] = 255 & _,
        b[i++] = _ >>> 24 & 15 | 16,
        b[i++] = _ >>> 16 & 255,
        b[i++] = v >>> 8 | 128,
        b[i++] = 255 & v;
        for (var A = 0; A < 6; ++A) b[i + A] = f[A];
        return e || c(b)
    }
};
var f202 = function(t, e) {
    var n = "undefined" != typeof crypto && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || "undefined" != typeof msCrypto && "function" == typeof window.msCrypto.getRandomValues && msCrypto.getRandomValues.bind(msCrypto);
    if (n) {
        var r = new Uint8Array(16);
        t.exports = function() {
            return n(r),
            r
        }
    } else {
        var o = new Array(16);
        t.exports = function() {
            for (var t, i = 0; i < 16; i++) 0 == (3 & i) && (t = 4294967296 * Math.random()),
            o[i] = t >>> ((3 & i) << 3) & 255;
            return o
        }
    }
};
var f203 = function(t, e) {
    for (var n = [], i = 0; i < 256; ++i) n[i] = (i + 256).toString(16).substr(1);
    t.exports = function(t, e) {
        var i = e || 0,
        r = n;
        return [r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], "-", r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]], r[t[i++]]].join("")
    }
};

var e = [f109, f202, f203];

function d(n) {
    var t = {};
    if (t[n]) return t[n].exports;
    var r = t[n] = {
        i: n,
        l: !1,
        exports: {}
    };
    return e[n].call(r.exports, r, r.exports, d),
    r.l = !0,
    r.exports
}

d.n = function(e) {
    var n = e && e.__esModule ?
    function() {
        return e.
    default
    }:
    function() {
        return e
    };
    return d.d(n, "a", n),
    n
},
d.d = function(e, n, r) {
    d.o(e, n) || Object.defineProperty(e, n, {
        enumerable: !0,
        get: r
    })
},
d.o = function(object, e) {
    return Object.prototype.hasOwnProperty.call(object, e)
};

function getReqId() {
    var l = d(0),
        c = d.n(l),
        r = c()()
    return r
}

// console.log(getReqId())

相關文章