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 打包 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JSON Web Token(JWT)原理入门教程详解

    JSON Web Token(JWT)原理入门教程详解

    目录 一.跨域认证的问题 二.JWT 的原理 三.JWT 的数据结构 3.1 Header 3.2 Payload 3.3 Signature 3.4 Base64URL 四.JWT 的使用方式 五.JWT 的几个特点 六.参考链接 一.跨域认证的问题 互联网服务离不开用户认证.一般流程是下面这样. 1.用户向服务器发送用户名和密码. 2.服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色.登录时间等等. 3.服务器向用户返回一个 session_id,写入用户的 Co

  • web.js.字符串与正则表达式操作

    1.substring var str='abcdef'; alert(str.substring(2, 5)); //cde不包括结束位置 alert(str.substring(1));//bcdef1 2.split var str='a*b*cd*ef'; alert(str.split('*'));//分割字符1 3.search  var str='acef'; alert(str.search('a'));//0查找字符位置 alert(str.search('f'));//3 a

  • 如何用用Python制作NFT区块链作品

    如何用用Python制作NFT区块链作品

    目录 什么是 NFT? ERC20 与 ERC721 NFT 有什么用? NFT 的价值 如何制作 NFT 如何进行无限定制的 NFT 快速上手 ERC721 代币标准 什么是 NFT 元数据和 TokenURI? TokenURI 链下元数据与链上元数据 什么是 NFT? NFT英文全称为Non-Fungible Token,翻译成中文就是:非同质化代币,具有不可分割.不可替代.独一无二等特点.NFT由于其非同质化.不可拆分的特性,使得它可以和现实世界中的一些商品绑定.换言之,其实就是发行在区

  • web3.js调用链上的方法操作NFT区块链MetaMask详解

    web3.js调用链上的方法操作NFT区块链MetaMask详解

    目录 实例化链上方法 MetaMask 首先要初始化web3 实例化链 调用链上方法授权 调用游戏链上方法质押NFT 实例化链上方法 公司的项目全是区块链项目,最近这个项目是要构建一个链上的游戏社区,目前这个功能是用户可以质押NFT到游戏的链上,然后游戏那边就可以有人去参加竞赛,然后质押人可以赎回NFT. MetaMask web3.js MetaMask 浏览器插件用的是小狐狸MetaMask 网络用的是测试网络Rinkeby,记得切换网络,把设置 > 高级 > 显示测试网络 打开 let

  • web3.js增加eth.getRawTransactionByHash(txhash)方法步骤

    eth_getRawTransactionByHash https://ethereum.stackexchange.com/questions/7473/get-raw-transaction-from-hash There is an "undocumented" method eth_getRawTransactionByHash from JSON-RPC curl -H "Content-Type: application/json" -X POST --

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

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

    目录 webpack 原理说明 扣 JS 代码 webpack 原理说明 webpack 是前端程序员用来进行打包 JS 的技术,打包之后的代码特征非常明显,例如下述代码. (window.webpackJsonp = window.webpackJsonp || []).push([[0], []]); 有经验之后,当看到出现 app.版本号.js,chunk-libs.版本号.js> 就能大概猜到 JS 是使用了 webpack 加密. 学习过程中,我们顺手解决一个 webpack 的加密站

  • webpack打包非模块化js的方法

    本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器. bar.js export default function bar() { // } foo.js import bar from './bar'; bar(); 通过如下,webpack配置很快实现打包.通过插件我们还可以实现文件压缩,开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试). mo

  • Webpack打包字体font-awesome的方法示例

    使用webpack构建font-awesome或者bootstrap的时候,最常见的一个问题就是构建字体文件的问题.经常会出现无法找到字体文件的问题.下面就讲一下如何正确构建引入字体文件: 1. 首先安装依赖: 复制代码 代码如下: npm install style-loader css-loader file-loader font-awesome-webpack --save-dev 2. 在入口文件中引入font-awesome require('font-awesome-webpack

  • 浅谈webpack组织模块的原理

    现在前端用Webpack打包JS和其它文件已经是主流了,加上Node的流行,使得前端的工程方式和后端越来越像.所有的东西都模块化,最后统一编译.Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项,在使用中出现一些迷之错误常常让人无所适从.所以了解一下Webpack究竟是怎么组织编译模块的,生成的代码到底是怎么执行的,还是很有好处的,否则它就永远是个黑箱.当然了我是前端小白,最近也是刚开始研究Webpack的原理,在这里做一点记录. 编译模块 编译两个字听起来就很黑科技,加上生成的代码

  • 深入webpack打包原理及loader和plugin的实现

    本文讨论的核心内容如下: webpack 进行打包的基本原理 如何自己实现一个 loader 和 plugin 注: 本文使用的 webpack 版本是 v4.43.0 , webpack-cli 版本是 v3.3.11 , node 版本是 v12.14.1 , npm 版本 v6.13.4 (如果你喜欢 yarn 也是可以的),演示用的 chrome 浏览器版本 81.0.4044.129(正式版本) (64 位) 1. webpack打包基本原理 webpack的一个核心功能就是把我们写的

  • webpack打包单页面如何引用的js

    webpack打包单页面如何引用的js

    目录结构如下图所示: webpack打包代码如下: var webpack = require('webpack'); var fs = require('fs'); var path = require('path'); var fse = require('fs-extra'); const debug = process.env.NODE_ENV !== 'production'; function entries(jsPath) { var dirnames = fs.readdirSy

  • webpack打包js文件及部署的实现方法

    下面看下webpack打包js文件的实现代码 const path = require('path') const webpack = require('webpack') const htmlWebpackPlugin = require('html-webpack-plugin') // 每次打包之前,自动删除文件夹 const cleanWebpackPlugin = require('clean-webpack-plugin') // 分离 css 到独立的文件中 const Extra

  • 浅谈webpack打包生成的bundle.js文件过大的问题

    问题 使用webpack进行打包时,发现bundle.js竟然有2M多. 解决办法 网上有去除插件.提取第三方库.压缩代码等方法. 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后bundle.js的大小从2.46M降到302k 以上这篇浅谈webpack打包生成的bundle.js文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 彻底解决 webpa

  • webpack打包node.js后端项目的方法

    本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖 复制代码 代码如下: npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-0 webpack配置 webpack.config.js 'use strict'; const webpack = require('webpack'); let externals = _externals();

  • webpack组织模块打包Library的原理及实现

    之前一篇文章分析了Webpack打包JS模块的基本原理,所介绍的案例是最常见的一种情况,即多个JS模块和一个入口模块,打包成一个bundle文件,可以直接被浏览器或者其它JavaScript引擎执行,相当于直接编译生成一个完整的可执行的文件.不过还有一种很常见的情况,就是我们要构建发布一个JavaScript的库,比如你在npm社区发布自己的库,这时Webpack就需要相应的配置,编译生成的代码也会略有不同. 和之前一篇文章一样,本文主要分析的是Webpack的生成代码,并结合它来说明编译库时W

随机推荐