Python爬蟲，JS逆向之 webpack 打包站點原理與實戰

夢想橡皮擦發表於2022-05-23
Python爬蟲JSWeb

??????
? 你正在閱讀 【夢想橡皮擦】 的部落格
? 閱讀完畢，可以點點小手贊一下
? 發現錯誤，直接評論區中指正吧
? 橡皮擦的第 621 篇原創部落格

從訂購之日起，案例 5 年內保證更新

文章目錄

⛳️ webpack 原理說明

webpack 是前端程式設計師用來進行打包 JS 的技術，打包之後的程式碼特徵非常明顯，例如下述程式碼。

(window.webpackJsonp = window.webpackJsonp || []).push([[0], []]);

有經驗之後，當看到出現 app.版本號.js，chunk-libs.版本號.js> 就能大概猜到 JS 是使用了 webpack 加密。

學習過程中，我們順手解決一個 webpack 的加密站點，地址如下所示：https://passport.gm99.com/

Python爬蟲，JS逆向之 webpack 打包站點原理與實戰
新增了包含關鍵字 login/login3 的斷點之後，通過開發者工具除錯得到下述程式碼段。
Python爬蟲，JS逆向之 webpack 打包站點原理與實戰
當通過除錯進入 a.encode() 函式內部之後，發現了大量的 webpack 打包 JS 的痕跡，例如下圖紅框部分。

其實發現加密邏輯之後，可以直接用 Python 進行復寫程式碼也是可以的。
Python爬蟲，JS逆向之 webpack 打包站點原理與實戰
這裡面出現的關鍵字包含如下內容。

  • 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() 進行區分即可。

Python爬蟲，JS逆向之 webpack 打包站點原理與實戰
所有不全之後的程式碼，可以去 gitcode 進行下載。

接下來執行生成的靜態檔案，測試可執行函式，就能得到對應的資料了。
Python爬蟲，JS逆向之 webpack 打包站點原理與實戰

??????
右下角有個大拇指，點讚的漂亮加倍

歡迎大家訂閱專欄：

相關文章