WebPack打包:
webpack是一個(gè)基于模塊化的打包（構(gòu)建）工具, 它把一切都視作模塊。
概念：
webpack是 JavaScript 應(yīng)用程序的模塊打包器,可以把開發(fā)中的所有資源（圖片、js文件、css文件等）都看成模塊，通過(guò)loader（加載器）和plugins（插件）對(duì)資源進(jìn)行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源。所有的資源都是通過(guò)JavaScript渲染出來(lái)的。
如果一個(gè)頁(yè)面大部分是script標(biāo)簽構(gòu)成，80%以上是webpack打包。
- webpack打包簡(jiǎn)介
?
1.0 多個(gè)JS文件打包：
如果模塊比較多，就會(huì)將模塊打包成JS文件, 然后定義一個(gè)全局變量 window[“webpackJsonp”] = [ ]，它的作用是存儲(chǔ)需要?jiǎng)討B(tài)導(dǎo)入的模塊。
然后重寫 window[“webpackJsonp”] 數(shù)組的 push( ) 方法為 webpackJsonpCallback( ),也就是說(shuō) window[“webpackJsonp”].push( ) 其實(shí)執(zhí)行的是 webpackJsonpCallback( ),window[“webpackJsonp”].push( )接收三個(gè)參數(shù),第一個(gè)參數(shù)是模塊的ID,第二個(gè)參數(shù)是 一個(gè)數(shù)組或者對(duì)象,里面定義大量的函數(shù),第三個(gè)參數(shù)是要
1.1 webpack數(shù)組形式
給需要處理業(yè)務(wù)的模塊進(jìn)行打包，通過(guò)下標(biāo)取值。
!function(e) {
var t = {};
// 加載器 所有的模塊都是從這個(gè)函數(shù)加載 執(zhí)行
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(0)
}
([
function () {
console.log('123456')
},
function () {
console.log('模塊2')
},
])
1.2 webpack對(duì)象形式
給需要處理業(yè)務(wù)的模塊進(jìn)行打包，通過(guò)key取值。
!function(e) {
var t = {};
// 所有的模塊 都是從這個(gè)加載器 執(zhí)行的 分發(fā)器
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(1) // 對(duì)象 根據(jù)KEY 找模塊
}({
0: function () {
console.log('我是模塊1')
},
1: function () {
console.log('我是模塊2')
}
}
);
-
webpack處理代碼
2.1 逆向目標(biāo)站點(diǎn)：http://www.kuwo.cn/
參數(shù)：reqId
2.2 逆向分析
全局搜索關(guān)鍵字，查看生成位置，方便后續(xù)調(diào)試
下斷點(diǎn)調(diào)試，發(fā)現(xiàn)是C函數(shù)
繼續(xù)調(diào)試發(fā)現(xiàn)是這個(gè)模塊進(jìn)行了處理
2.3 結(jié)果處理
-
webpack案例
3.2 逆向分析地址：https://static.waitwaitpay.com/web/sd_se/index.html
接口：https://api.waitwaitpay.com/api/vendors/nearby
目標(biāo)：響應(yīng)數(shù)據(jù)
4.2 逆向分析
打開目標(biāo)網(wǎng)站，往下拉，在開發(fā)者工具可以抓到這三個(gè)包，其中nearby接口請(qǐng)求到的數(shù)據(jù)是加密之后的密文
4.2.1 關(guān)鍵字搜索
這個(gè)時(shí)候可以嘗試再在該文件里搜索 JSON.parse就會(huì)找到這樣一個(gè)地方，這里可以發(fā)現(xiàn)有一個(gè)decode函數(shù)，就比較可疑，下個(gè)斷點(diǎn)
數(shù)據(jù)處理
往上看堆棧，可以發(fā)現(xiàn)該函數(shù)就是解密的入口，講請(qǐng)求得到的加密數(shù)據(jù)e傳到f函數(shù)，即可解密得到明文數(shù)據(jù)
可以很明顯的看到這個(gè)f函數(shù)內(nèi)部關(guān)鍵調(diào)用了這兩個(gè)函數(shù)來(lái)進(jìn)行數(shù)據(jù)的解密，那么，我們首先就來(lái)看看這個(gè) a.default.decode ，向上尋找a是在哪里被定義的
可發(fā)現(xiàn) a = s(n(432))，這里的432就是代表導(dǎo)出webpack打包的大數(shù)組里面第432個(gè)大函數(shù)，大數(shù)組指的是這個(gè)大數(shù)組
4.2.2 JavaScript分析
? 那我們?cè)诒镜豭s里面，怎么才能實(shí)現(xiàn)像瀏覽器這樣導(dǎo)出呢，這個(gè)時(shí)候我們可以直接去找到 導(dǎo)出器 類似于 exports 這樣的關(guān)鍵字，所有的 webpack 導(dǎo)出器都是長(zhǎng)這樣的
?
直接復(fù)制全部的代碼，之前已經(jīng)發(fā)現(xiàn)處理解密的話只有f函數(shù)，觀察整個(gè)函數(shù)調(diào)用第三方庫(kù)很少，那么就可以全復(fù)制代碼，然后調(diào)用這個(gè)函數(shù)即可。
直接扣出加密代碼，調(diào)用當(dāng)前這個(gè)函數(shù)
// 本地的話，我們就可以這樣來(lái)進(jìn)行導(dǎo)出然后賦值給a還有o
function s(e) {
return e && e.__esModule ? e : {
default: e
}
};
// 這里的window.ts就是上面導(dǎo)出器函數(shù)
var a = s(window.ts(432));
var o = s(window.ts(423));
總結(jié)（webpack逆向步驟）文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-431438.html
- 找到這個(gè)加載器
- 找到調(diào)用模塊
- 構(gòu)造一個(gè)自執(zhí)行方法
- 導(dǎo)出加密方法
- 編寫自定義方法 按照流程加密
聲明：本文章所有演示內(nèi)容僅供學(xué)習(xí)交流使用，嚴(yán)禁用于商業(yè)用途和非法用途，否則由此產(chǎn)生的一切后果均與作者無(wú)關(guān)，若有侵權(quán)，請(qǐng)聯(lián)系作者立即刪除！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-431438.html
到了這里，關(guān)于網(wǎng)頁(yè)爬蟲之WebPack模塊化解密（JS逆向）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
