脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS webpack 打包

JS逆向之 webpack 打包站点实战原理分享

 更新时间：2022年06月01日 10:11:22   作者：梦想橡皮擦  
本文主要介绍了JS逆向之webpack打包站点实战原理分享，webpack是前端程序员用来进行打包JS的技术，打包之后的代码特征非常明显，更多相关知识需要的小伙伴可以参考下面文章详细内容

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 进行下载。

接下来运行生成的静态文件，测试可执行函数，就能得到对应的数据了。

到此这篇关于JS逆向之 webpack 打包站点实战原理分享的文章就介绍到这了,更多相关JS webpack 打包 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现self的resend

    JS实现self的resend

    self中resend是调用“基类方法”的原语，它会把当前接收到的消息原样发送给其原型（parent*）。在ECMA-v5时代，我们终于可以做出这个伟大的东西了。
    2010-07-07
  • 微信小程序动态添加view组件的实例代码

    微信小程序动态添加view组件的实例代码

    本文通过实例代码给大家介绍了微信小程序动态添加view组件的方法，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 通过实例了解Javascript柯里化流程

    通过实例了解Javascript柯里化流程

    这篇文章主要介绍了通过实例了解Javascript柯里化流程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库

    《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库

    这篇文章主要介绍了《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库,需要的朋友可以参考下
    2015-01-01
  • 小程序显示弹窗时禁止下层的内容滚动实现方法

    小程序显示弹窗时禁止下层的内容滚动实现方法

    这篇文章主要介绍了小程序显示弹窗时禁止下层的内容滚动实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JavaScript Canvas绘制六边形网格

    JavaScript Canvas绘制六边形网格

    这篇文章主要为大家详细介绍了JavaScript Canvas绘制六边形网格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JS实现unicode和UTF-8之间的互相转换互转

    JS实现unicode和UTF-8之间的互相转换互转

    需要将PC送过来的UTF-8转换成UNICODE才能将内容通过短信发送出去，同样，接收到的短信为unicode编码，也许转换成UTF-8才能在PC端软件显示出来
    2017-07-07
  • JS实现点击按钮自动增加一个单元格的方法

    JS实现点击按钮自动增加一个单元格的方法

    这篇文章主要介绍了JS实现点击按钮自动增加一个单元格的方法,实例分析了javascript操作表格单元格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • js数组去重九种方式以及详解

    js数组去重九种方式以及详解

    这篇文章主要给大家介绍了关于js数组去重九种方式以及详解的相关资料,js数组去重是比较常见的数组操作方式之一,文中介绍了九种方法,需要的朋友可以参考下
    2023-09-09
  • 原生js实现trigger方法示例代码

    原生js实现trigger方法示例代码

    这篇文章主要给大家介绍了关于利用原生js实现trigger方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05

最新评论