【逆向篇】Web逆向WebPack结构分析

一般逆向思路

案例1: 一般web逆向一个某网站的登录,登录数据如账号密码都会从前端加密后到后端,那么加密代码会在前端里面。用需要找到这个加密代码段给扣下来,进行加密,方便我们写的爬虫或者采集工具去自动登录或者其他操作,一般前端加密代码一个难点是处理webPack打包结构的代码。

处理webPack结构

webpack字如其名,实际上是网页代码的一种打包机制将多个js文件(也可以是其他类型文件,比如.png)统一打包为一个js文件,一个png文件当然如果是webpack多打包机制就会生成多个js文件最终目的肯定是为了压缩代码,提高代码执行效率

在这里插入图片描述

webpack完全采用闭包机制(也就是通过作用域)的办法来避免需要压缩的几个文件内部的函数有重名的现象发生(一人一个作用域就可以避免函数重名的问题),也就是:

var jss = [ {对象1},{对象2},{对象3} ]

对象1也可以是函数形式:
{ getInfo:function(){}}
这样,想要调用不同文件的重名函数变为:
jss[0].func1()
jss[1].func1()

这样既解决了函数名重名问题(即允许重名),又可以调用你希望调用的函数了
但是现在还有一个新的问题就是有些私有方法我不希望被外部调用,也就是访问权限问题,这个就像C++里面的共有、私有函数一样
webpack的解决方案是可以被外部访问的共有方法一律需要导出才行,即:

exportfunction(){
        var getInfo = function(){
        具体代码;
        return {getInfo :getInfo }
	}
}

提取相关方法扣下

!function(形参){}()是一种自执行函数,无需调用网页加载的时候自动执行
这里的e实际上就是[func1,func2,func3…]这个大数组
n(0) 就是调用数组的第一个函数,打印123456
如果是对象{}形式的话,就是n(“7f6d”)这种形式来调用

//webpack加载器
!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
    }
}
    ([
        function () {
            console.log('123456')
        },
 
              function () {
            console.log('模块2')
        },
    ])
n(0)

实践案例

受害者网站:https://m.ctyun.cn/wap/main/auth/login
首先通过跟栈法追踪到 password 加密的关键位置
在这里插入图片描述
可以看到调用代码,其中有些事干扰代码,提取后如下:

encodeURI(b["c"]("123456789",b["f"]("123456@qq.com")))

ok,调用函数找到了,就需要进行下一步,
向上找到b的生成位置
类似o(“7f6d”)这种形式高度怀疑是webpack打包的
在这里插入图片描述

如果不确定的话把该文件翻到最上面,发现还是一个webpack多打包的形式,如下图

在这里插入图片描述

在这里插入图片描述
可以看出这个结构是webpack打包出来的。

ok,那么我们确定好是webPack结构了,那我们需要把webPack加载函数给扣下来。
下一步刷新网页,控制台输入o,跟进其内部
在这里插入图片描述
这里就知道那个js是主加载器了。

ok.这样我们就得到了webpack加载器的代码!!!

将webpack的主文件全部复制下来到放到新的js文件里(注意这里是全部。!!好几万行代码,如果是高手能直接复制要用到的代码就当我是p话。)

输入webpackJsonp得到所有的子文件

在这里插入图片描述
要调用webpack里面的函数需要把内部方法给导出来
在这里插入图片描述
把u函数给导出给hanshu

windows.hanshu = u;

外部调用

o = window.hanshu; 
b = o("7f6d") ;
encodeURI(b["c"]("123456789",b["f"]("123456@qq.com")));

这样就成了!!。这个加密是有时间戳进去加密运算的所以 不能实时对比,结果会不一样就不放对比截图了。
在这里插入图片描述
实际操作中还有些问题等下一篇讲!!!
喜欢逆向的同学可以关注,有免费逆向工具与文章,谢谢支持。

在这里插入图片描述

业余时间接单,欢迎各位同学加入

https://bytecodestudio.site/

在这里插入图片描述
在这里插入图片描述

### 关于 Webpack.js逆向工程与反编译 #### 一、Webpack 打包文件结构解析 Webpack 将多个模块组合成单个或少数几个捆绑文件,在这个过程中进行了大量的优化操作,如代码分割、Tree Shaking等。这些处理使得原始源码难以直接被读取和理解。对于经过混淆压缩后的 JavaScript 文件来说更是如此。 当面对一个由 Webpack 构建出来的应用时,首先要做的就是尝试还原其原本的目录结构以及依赖关系图谱[^1]。 #### 二、解密与去混淆 许多应用程序不仅通过 Webpack 进行打包还会采用额外的安全措施比如字符串加密、函数名替换等方式增加破解难度。此时就需要利用特定工具来进行初步清理工作: - **JSDecrypter**: 对简单的 Base64 编码或者其他常见编码方式进行快速解码; - **JSNice.org**: 自动美化并猜测变量名称以提高可读性; 需要注意的是,并不是所有的加密手段都能轻易解除,某些情况下可能需要深入研究算法原理才能找到突破口[^2]。 #### 三、动态调试法 静态分析虽然重要但也存在局限性,特别是针对那些运行时才会加载的内容或者是基于环境变化而改变行为的应用程序部分。这时可以借助浏览器开发者工具(DevTools)、Burp Suite 等代理服务器软件来捕获网络请求数据流,观察实际执行路径从而获取更多信息。 另外还可以考虑使用 Hook 技术拦截目标对象的方法调用,记录参数传递情况以便进一步追踪逻辑走向。 ```javascript // 使用 Proxy 实现简单 hook 功能 const originalMethod = Object.getPrototypeOf(targetObject).methodName; Object.defineProperty(Object.getPrototypeOf(targetObject), 'methodName', { value(...args){ console.log('Before method call:', args); const result = originalMethod.apply(this, args); console.log('After method call:', result); return result; } }); ``` #### 四、自动化辅助脚本编写 在整个逆向过程中可能会遇到重复性的任务,例如批量下载资源文件、自动填充表单提交测试等等。这时候就可以开发一些小型爬虫或者命令行工具来简化流程,提升效率。 Python 和 Node.js 都是非常适合用来构建此类工具的语言选择,它们拥有丰富的第三方库支持Web交互需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ji-JIUJIU

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值