📢📢📢📢📢📢
💗 你正在閱讀 【夢想橡皮擦】 的部落格
👍 閱讀完畢,可以點點小手贊一下
🌻 發現錯誤,直接評論區中指正吧
📆 橡皮擦的第 621 篇原創部落格
從訂購之日起,案例 5 年內保證更新
⛳️ webpack 原理說明
webpack 是前端程式設計師用來進行打包 JS 的技術,打包之後的程式碼特徵非常明顯,例如下述程式碼。
(window.webpackJsonp = window.webpackJsonp || []).push([[0], []]);
有經驗之後,當看到出現 app.版本號.js
,chunk-libs.版本號.js>
就能大概猜到 JS 是使用了 webpack 加密。
學習過程中,我們順手解決一個 webpack 的加密站點,地址如下所示:https://passport.gm99.com/
新增了包含關鍵字 login/login3
的斷點之後,通過開發者工具除錯得到下述程式碼段。
當通過除錯進入 a.encode()
函式內部之後,發現了大量的 webpack 打包 JS 的痕跡,例如下圖紅框部分。
其實發現加密邏輯之後,可以直接用 Python 進行復寫程式碼也是可以的。
這裡面出現的關鍵字包含如下內容。
n = function(t,e,n)
n.exports = s
.call(e,i,e,t)
然後翻閱到 JS 檔案頭部,簡化程式碼得到如下內容,到這裡 webpack 的痕跡。
!(function (t) {
function e(s) {
return t[s].call(n.exports, n, n.exports, e), (n.loaded = !0), n.exports;
}
})();
如果在細研究一下,webpack 打包之後的程式碼執行規則也非常簡單。
!(function (t) {
function e(s) {
// 程式碼省略
return t[s].call(n.exports, n, n.exports, e), (n.loaded = !0), n.exports;
}
e(0); // 呼叫下面的 0
e(1); // 呼叫下面的 1
})({
0: function (t, e, i) {
// 這裡有一大堆打碼
},
1: function (t, e) {
t.exports = jQuery;
},
});
扣 JS 程式碼
接下來我們就實戰扣取一下可執行的 JS 程式碼。
第一步:建立一個 JS 檔案,名稱任意
編寫如下程式碼,將函式 e
暴露出來。
var _e;
!(function (t) {
var i = {};
function e(s) {
if (i[s]) return i[s].exports;
var n = (i[s] = {
exports: {},
id: s,
loaded: !1,
});
return t[s].call(n.exports, n, n.exports, e), (n.loaded = !0), n.exports;
}
_e = e;
})();
接下來分割槽域扣取 JS 程式碼,這裡依據 function()
進行區分即可。
所有不全之後的程式碼,可以去 gitcode 進行下載。
接下來執行生成的靜態檔案,測試可執行函式,就能得到對應的資料了。
📣📣📣📣📣📣
右下角有個大拇指,點讚的漂亮加倍
歡迎大家訂閱專欄: