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

news2024/9/21 2:43:05

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

小节目标:

熟悉 webpack打包原理
熟悉 webpack打包方式
了解 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 execjs


class 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):
        pass

    def save_data(self):
        pass


if __name__ == '__main__':
    sz = SouZen()
    sz.get_data()