【js逆向专题】8.webpack打包

本教程仅供学习交流使用，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，请各学员自觉遵守相关法律法规。

小节目标:

  1. 熟悉 webpack打包原理
  2. 熟悉 webpack打包方式
  3. 了解 webpack多模块打包

一. webpack打包

概念:

webpack 是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和 plugins （插件）对资源进行处理，打包成符合生产环境部署的前端资源。所有的资源都是通过 JavaScript 渲染出来的。

  • webpack 是一个基于模块化的打包（构建）工具, 它把一切都视作模块

  • 如果一个页面大部分是script标签构成，80%以上是 webpack 打包。

  • 地址：http://cls.cn/telegraph

在这里插入图片描述

1. webpack打包简介

在这里插入图片描述

  • 整个打包的文件是一个自执行函数
  • 方法里面是webpack的加载器
  • 存放的模块就是js的每个功能,可以有两种方式,数组和键值对的形式
2. 加载器样式
  • 加载器是网站的开发人员用工具生成的我们可以不用管直接拿过来用就好(一般加载器的名字都是n可以直接通过加载器的名字定位到打包的位置)
  • 加载器的核心代码
!function (e) {// 存放加载器var c = {}// t是加载器对应的名字function n(t) {// 创建一个a对象 var a = c[t] = {i: t, // 表示模块的标识符，它被设置为参数 t。l: !1, // 一个布尔值，初始值为 false，用于标记模块是否已经加载。exports: {} // 一个空对象，用于将模块的导出内容存储在其中。};console.log(a)// 执行函数里面的方法return e[t].call(a.exports, a, a.exports, n),// 设置模块已被加载a.l = !0,a.exports}//  n.m = e// 入口n(2)
}([])
1. webpack数组形式
  • 给需要处理业务的模块进行打包，通过下标取值
// 这个格式就是webpack
!function (e) {// 存放加载器var c = {}function n(t) {var a = c[t] = {i: t,l: !1,exports: {}};console.log(a)return e[t].call(a.exports, a, a.exports, n),a.l = !0,a.exports}n.m = e// 入口n(2)
}([// 存放模块function () {console.log('负责登陆')},function () {console.log('负责注册')},function () {console.log('负责注册')}
])
2. webpack对象格式
  • 给需要处理业务的模块进行打包，通过 key 取值
!function (e) {var t = {};// 所有的模块 都是从这个加载器 执行的 分发器function n(r) {if (t[r])return t[r].exports;var o = t[r] = {i: r,l: !1,exports: {}};return e[r].call(o.exports, o, o.exports, n),o.l = !0,o.exports}n('xialuo') // 对象 根据KEY 找模块
}({0: function () {console.log('我是模块1 负责加密')},'xialuo': function () {console.log('我是模块2 负责解密')},2: function () {console.log('我是模块3 负责爬数据')}}
);
3.多个js文件打包
  • 如果模块比较多，就会将模块打包成JS文件, 然后定义一个全局变量 window["webpackJsonp"] =[ ] ，它的作用是存储需要动态导入的模块，然后重写 window["webpackJsonp"] 数组的 push( ) 方法为 webpackJsonpCallback( ) ,也就是说 window["webpackJsonp"].push( ) 其实执行的是webpackJsonpCallback( ) , window["webpackJsonp"].push( ) 接收三个参数,第一个参数是模块的ID,第二个参数是 一个数组或者对象,里面定义大量的函数,第三个参数是要调用的函数(可选)
    在这里插入图片描述

二.教学案例1

1.逆向目标

  • 首页：https://36kr.com/

  • 逆向参数： password: 8cbf7f88e70300def68533a74c77b785e11d743c77627b624

2. 参数定位

  • 通过登录按钮触发发包请求

  • 关键字定位password

  • xhr断点定位(根据栈堆来进行调试)

在这里插入图片描述

3.逆向代码分析
  • o.a.get(t, "password") 获取网页输入的明文密码
  • Object(i.b)是加密代码
  • Object(i.b)是将i.b包装到新对象中实际使用和i.b()是差不多的
  • 进入加密代码,查看加密逻辑

在这里插入图片描述

  • 可以看到a函数是加密的主体逻辑
  • 通过t的导出的方法进行加密的
  • n可以很明显看出为webpack打包的方法
  • 跟进到加载器的位置,拿到加载器,把需要的方法扣下来就行
4.逆向结果
  • JavaScript代码

在这里插入图片描述

三.教学案例2

1.逆向目标

  • 首页：https://kuajing.pinduoduo.com/login

  • 逆向参数： encryptPassword

2. 参数定位
  • 像这种参数比较特别的,不容易起冲突的关键字可以直接用搜索的方法来进行定位encryptPassword
    在这里插入图片描述
3.逆向代码分析
  • 通过Object(P.a)来实现加密, b.password是明文密码, G.current是秘钥

在这里插入图片描述

  • 可以很直观看出加密方法,o的对象生成是调用了o = t(1394)
  • 我们直接找到加载期去触发1394 的任务就行
  • 秘钥是后台请求返回的,登录接口会请求两次,第一次就是返回的秘钥文件
4.逆向结果
  • JavaScript代码
    在这里插入图片描述

四.教学案例3

1.逆向目标
  • 地址:https://fse.agilestudio.cn/search?keyword=%E7%81%AB%E8%BD%A6%E5%91%BC%E5%95%B8%E8%80%8C%E8%BF%87
  • 逆向参数:X-Signature 请求头数据(主要是扣webpack打包)
2. 参数定位

  • xhr定位数据

  • xhr定位的数据有时候里加密的位置会非常远,尤其是遇见异步加载的方法的时候会更加的难找,遇见异步的时候我们可以用跳过函数执行的方法,先快速的把整个异步方法都过一边,过的过程中看有没有生成我们想要的数据,先粗在细的查找方法对定位会更加有帮助

  • 关键字X-Signature定位

在这里插入图片描述

3.逆向代码分析

  • 调用了_函数e.params是查询字符串的参数
    在这里插入图片描述

  • 赋值了一个时间戳,通过Object(c["a"])对数组键进行处理

  • c是一个加载器进行赋值,需要将加载器扣下来

  • 要是加载的模块比较多的话建议全扣

4.逆向结果
  • JavaScript代码
var c = xxx('b85c')
var crypto = require('crypto-js')
d = function (e) {e._ts = (new Date).getTime() - 9999;var t, n = Object.keys(e), i = "", o = Object(c["a"])(n.sort());try {for (o.s(); !(t = o.n()).done;) {var a = t.value;void 0 !== e[a] && null !== e[a] && (i += "".concat(a, "=").concat(e[a], ","))}} catch (r) {o.e(r)} finally {o.f()};return {'sign':crypto.MD5(i).toString(),'time': e._ts}
}console.log(d({"keyword": "火车呼啸而过)","page": 1,"limit": 12,"_platform": "web","_versioin": "0.2.5"
}))
  • python 代码
import requests
import execjsclass SouZen():def __init__(self):self.params = {"keyword": "火车呼啸而过","page": "2","limit": "12","_platform": "web","_versioin": "0.2.5",}self.headers = {"Origin": "https://fse.agilestudio.cn","Referer": "https://fse.agilestudio.cn/","User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36",}self.url = "https://fse-api.agilestudio.cn/api/search"def get_data(self):js = execjs.compile(open('demo.js', encoding='utf-8').read())res = js.call('d', self.params)self.params['_ts'] = res['time']self.headers["X-Signature"] = res['sign']response = requests.get(self.url, headers=self.headers, params=self.params)print(response.json())def parse_data(self):passdef save_data(self):passif __name__ == '__main__':sz = SouZen()sz.get_data()

结语

以上就是关于js逆向技术中的webpack打包全部内容了，欢迎同学们在评论区讨论交流，有任何js逆向、数据采集相关需求也可以V后台regentwan与我联系哟~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/416748.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

传递给 LEFT 或 SUBSTRING 函数的长度参数无效

传递给 LEFT 或 SUBSTRING 函数的长度参数无效

我的Sql语句：select left(long,charindex(‘’,Long)-1) from Site 会报错， 错误信息是：传递给 LEFT 或 SUBSTRING 函数的长度参数无效。 如果我把Sql语句这样写加了一个where条件，即： select left(long,charindex(‘…
阅读更多...
金属三通管液压成形液压机比例阀放大器

金属三通管液压成形液压机比例阀放大器

金属三通管液压成形液压机比例阀配套BEUEC比例放大器适用于紫铜、青铜、不锈钢、铝合金、复合材料的三通管、四通管、T型管、Y型管、L型管的一次液压胀形成形，更适用于石油化工、热能、新能源、医疗、环保、卫浴、五金等行业的各种金属中空零件和复杂曲面的管件的生…
阅读更多...
信也持续构建集群容器化改造之路

信也持续构建集群容器化改造之路

1. 前言 随着应用构建需求增加以及新构建场景引入，公司对构建系统的扩展性、稳定性要求日益提高。多语言构建（如Golang、Java、Python、Node.js 等）所依赖的环境，部署在同一台物理机上时，使构建机环境维护困难&#xf…
阅读更多...
解决SecoClient接收返回码超时

解决SecoClient接收返回码超时

解决SecoClient接收返回码超时_secoclient接收返回码错误win11-CSDN博客 新的SVDDrv.sys有需要的，https://download.csdn.net/download/shuoshuo_12345/89715503下载即可。
阅读更多...
【maven】阿里云和apache仓库配置

【maven】阿里云和apache仓库配置

阿里云公共仓库的配置看起来有多种类型的仓库： 配置指南 我的maven是idea 自带的：D:\Program Files\JetBrains\IntelliJ IDEA 2022.3.1\plugins\maven\lib\maven3\</
阅读更多...
人工智能造福公众：未来一片光明

人工智能造福公众：未来一片光明

作者&#xff1a;来自 Elastic Peter Dutton 我们如何衡量人工智能对政府的影响&#xff1f;毫无疑问&#xff0c;人工智能将为运营流程和决策带来的好处已被广泛讨论 —— 从自动化工作流程到节省成本再到减少重复工作。 但对于以服务公众为目标的组织来说&#xff0c;人工智…
阅读更多...
基于微信的热门景点推荐小程序的设计与实现(论文+源码)_kaic

基于微信的热门景点推荐小程序的设计与实现(论文+源码)_kaic

摘 要 近些年来互联网迅速发展人们生活水平也稳步提升&#xff0c;人们也越来越热衷于旅游来提高生活品质。互联网的应用与发展也使得人们获取旅游信息的方法也更加丰富&#xff0c;以前的景点推荐系统现在已经不足以满足用户的要求了&#xff0c;也不能满足不同用户自身的个…
阅读更多...
C语言 | Leetcode C语言题解之第390题消除游戏

C语言 | Leetcode C语言题解之第390题消除游戏

题目&#xff1a; 题解&#xff1a; int lastRemaining(int n) {int a1 1;int k 0, cnt n, step 1;while (cnt > 1) {if (k % 2 0) { // 正向a1 a1 step;} else { // 反向a1 (cnt % 2 0) ? a1 : a1 step;}k;cnt cnt >> 1;step step << 1;}return …
阅读更多...
armbian cups 远程打印机 1022

armbian cups 远程打印机 1022

使用 CUPS Web 浏览器界面设置和管理打印机 - Oracle Solaris 管理&#xff1a;常见任务 N1刷armbian变身打印服务器&#xff0c;支持全平台无线打印PC扫描_存储设备_什么值得买 (smzdm.com) 第 6 章 使用 Web 界面向 CUPS 添加打印机 | Red Hat Product Documentation apt…
阅读更多...
PHP CMS内容管理系统小程序源码满足您独特业务需求的最佳选择

PHP CMS内容管理系统小程序源码满足您独特业务需求的最佳选择

​CMS内容管理系统 —— 满足您独特业务需求的最佳选择 &#x1f680;【开篇&#xff1a;定制化时代的呼唤】&#x1f680; 在这个信息爆炸的时代&#xff0c;每个企业都渴望在数字世界中脱颖而出&#xff0c;而内容就是那把打开用户心扉的钥匙。但面对纷繁复杂的业务需求&am…
阅读更多...
isspace函数讲解 ＜ctype.h＞头文件函数

isspace函数讲解 ＜ctype.h＞头文件函数

目录 1.头文件 2.isspace函数使用 方源一把抓住VS2022&#xff0c;顷刻 炼化&#xff01; 1.头文件 以上函数都需要包括头文件<ctype.h> &#xff0c;其中包括 isspace 函数 #include<ctype.h> 2.isspace函数使用 isspace函数用于判断字符是否为空白字符&…
阅读更多...
【TS】接口（Interface）学习

【TS】接口（Interface）学习

介绍 接口&#xff08;Interface&#xff09;是TypeScript中的一个重要概念&#xff0c;它允许你定义对象的结构&#xff0c;而不需要实现具体的逻辑。接口在编译时用于类型检查&#xff0c;确保对象具有特定的属性和方法。 接口的作用类似于抽象类&#xff0c;不同点在于接口…
阅读更多...
ios动态创建控件及添加事件

ios动态创建控件及添加事件

效果如下&#xff0c;就是在一个空白页面动态添加控件&#xff0c;给按钮添加事件&#xff0c;图片名字和标题放入plist文件,plist是个Array&#xff0c;每一项是Dictionary。Dictionary里面方icon和name两个String的key。图片都放入Assets.xcassets。如果需要使用imageWithCon…
阅读更多...
JVM 锁的种类

JVM 锁的种类

优质博文&#xff1a;IT-BLOG-CN 一、JVM 锁【偏向锁|轻量级锁|重量级锁】 对象头[每个对象都具有对象头] Mark&#xff1a;对象头的标记&#xff08;32位&#xff09;&#xff0c;描述对象的hash、锁信息、垃圾回收标记、年龄&#xff1b;内容包括&#xff1a;①、指向锁记录…
阅读更多...
【MySQL】Ubuntu22.04安装MySQL8.0.39及修改默认用户名和密码

【MySQL】Ubuntu22.04安装MySQL8.0.39及修改默认用户名和密码

文章目录 安装mysql1. 下载mysql2. 查看mysql版本3. 启动mysql服务&#xff08;通常在安装后自动启动&#xff09;4. 运行安全配置脚本 修改用户名和密码1. 查看mysql自动设置的随机账号与密码2. 用默认账号密码登录mysql3. 找到账号密码有关的数据库4. 更改用户名和密码mysql5…
阅读更多...
街机 CAPCOM CPS3 中英文名字与驱动对照表

街机 CAPCOM CPS3 中英文名字与驱动对照表

Part.I 简介 本文列举了街机 CPS3 中游戏的中英文名字与其驱动的对照&#xff0c;以帮助诸位更快地找到自己想玩的游戏。 注意&#xff1a;汉化版的街机模拟器 Kawaks 中游戏的中文名字是根据英文直译的&#xff0c;并不是习惯性的中文叫法。比如『三国志』英文名为『Warriors…
阅读更多...
【Selenium】UI自动化实践——输入验证码登录

【Selenium】UI自动化实践——输入验证码登录

文章目录 实战题目解题方案 实战题目 使用pythonselenium实现输入验证码的UI自动化。登录页面如图&#xff1a; 解题方案 验证码登录需要导入相关模块和库&#xff0c;本文使用的是opencv和ddddocr模块组合&#xff0c;导入方式采用pip3 install opencv-python、pip3 insta…
阅读更多...
【论文阅读】CiteTracker: Correlating Image and Text for Visual Tracking

【论文阅读】CiteTracker: Correlating Image and Text for Visual Tracking

paper&#xff1a;NorahGreen/CiteTracker: [ICCV23] CiteTracker: Correlating Image and Text for Visual Tracking (github.com) code&#xff1a;NorahGreen/CiteTracker: [ICCV23] CiteTracker: Correlating Image and Text for Visual Tracking (github.com) 简介 现有…
阅读更多...
Pr：媒体浏览器

Pr：媒体浏览器

Pr菜单&#xff1a;窗口/媒体浏览器 Window/Media Browser 快捷键&#xff1a;Shift 8 媒体浏览器 Media Browser是一个可以浏览、预览和导入不同类型媒体的面板。 在 Pr 中导入素材遇到问题时&#xff0c;可尝试使用媒体浏览器。 媒体浏览器是导入各类媒体的最佳选择&#xf…
阅读更多...
C8T6超绝模块--LED

C8T6超绝模块--LED

C8T6超绝模块–LED 大纲 怎样点亮LED结构体分析代码流程 具体案例 怎样点亮LED 首先不同的芯片的接法不一样&#xff0c;需要自己查看自己的芯片的原理图&#xff0c;我使用的是C8T6&#xff0c;使用的PC13接入的LED 注意看&#xff1a;怎么才能使LED灯亮呢&#xff1f; …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023