JS逆向实战：识别与提取Webpack打包站点代码

webpack 原理说明

webpack 是前端开发者用于打包 JavaScript 文件的常用工具，其打包后的代码具有显著的特征，例如以下代码所示。

(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 平台下载。

接下来运行生成的静态文件，测试已暴露的函数，即可获取对应的数据结果。

到此关于 JS 逆向中 webpack 打包站点实战原理的分享结束，更多相关 JS 与 webpack 打包内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！