建站
咨詢
售后
建站咨詢
新聞中心
一、什么是webpack
webpack用于編譯JavaScript模塊。關(guān)注javascript技術(shù)的同學(xué)一定知道，在CommonJS和ES6中，為了支持模塊化，而引入了export/require/import這類(lèi)東西，模塊化可以降低開(kāi)發(fā)的復(fù)雜度，用于支撐前端的復(fù)雜功能，但是模塊化后，也帶來(lái)了許多問(wèn)題，比如老版本的瀏覽器不支持ES6/JSX語(yǔ)法，開(kāi)發(fā)和線上不能保持一致，這就為WebPack類(lèi)的自動(dòng)化代碼轉(zhuǎn)換工具的出現(xiàn)提供了需求。
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言(Scss，TypeScript等)，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。按照官網(wǎng)的說(shuō)法，webpack可以打包一切資源/圖片/樣式/依賴等等，webpack默認(rèn)只支持js模塊打包，對(duì)于其他文件就需要用loader解析器，比如在vue中，直觀的效果就是使用webpack可以將使用的vue，css，圖片等打包成一個(gè)js。
二、在漏洞挖掘過(guò)程中分析前端代碼的重要性
隨著前后端分離架構(gòu)的大眾化 ，越來(lái)越多的開(kāi)發(fā)團(tuán)隊(duì)采用這種開(kāi)發(fā)模式。前后端的交互越來(lái)越多是通過(guò)API完成，而不再依賴頁(yè)面刷新，眾多的后端的框架也把自己定位成一個(gè)API框架，如thinkphp5等。通過(guò)分析前端js代碼，找到前后端交互的接口，對(duì)接口進(jìn)行測(cè)試變得越來(lái)越重要，比如在某些沒(méi)權(quán)限的場(chǎng)景下，我們無(wú)法完整顯示頁(yè)面，可以通過(guò)分析前端js中的ajax接口進(jìn)行測(cè)試。
這里我就拿幾個(gè)案例說(shuō)說(shuō)：
- 某次挖漏洞過(guò)程中，登陸后顯示賬號(hào)沒(méi)有權(quán)限，頁(yè)面顯示403 forbiden，f12 sources 發(fā)現(xiàn)前端使用VUE框架，分析源碼對(duì)一ajax接口進(jìn)行測(cè)試發(fā)現(xiàn)存在越權(quán)。
- 某次挖漏洞過(guò)程中，通過(guò)分析前端js代碼，發(fā)現(xiàn)存在一段代碼，代碼邏輯是在debugMode下，會(huì)setCookie，嘗試使用該Cookie，成功進(jìn)入后臺(tái)并且是管理員權(quán)限。
三、VUE/REACT開(kāi)發(fā)場(chǎng)景
在VUE/REACT開(kāi)發(fā)場(chǎng)景下 ，前端開(kāi)發(fā)會(huì)引入如模塊化等諸多新特性，前端開(kāi)發(fā)不再是幾個(gè)簡(jiǎn)單的js文件，開(kāi)發(fā)完成后會(huì)通過(guò)webpack等打包工具打包生成部署使用的js文件，但是如果我們直接分析該編譯的js，很難看懂。比如我這個(gè)demo：
https://blog.donot.me/assets/demo/index.html，頁(yè)面下的app.bundle.js反正我是看不懂寫(xiě)的是啥，這個(gè)js文件就是webpack打包后的結(jié)果，但是由于我是開(kāi)啟了source-map調(diào)試模式，如果你是用chrome瀏覽器打開(kāi)的，打開(kāi)devtools-sources，應(yīng)該可以看到一個(gè)webpack://，這個(gè)就是chrome對(duì)source-map調(diào)試的支持，點(diǎn)開(kāi)src目錄下就可以看到j(luò)s代碼源文件。
四、webpack的幾種調(diào)試模式
webpack目前支持很多種調(diào)試模式，每種模式的區(qū)別是編譯后的代碼和源碼的映射方式不同，具體的體現(xiàn)是源碼通過(guò)什么方式呈現(xiàn)，有的模式會(huì)生產(chǎn)一個(gè).map文件，有的模式會(huì)通過(guò)注釋?zhuān)械哪Ｊ綍?huì)使用DataUrl的方式。
webpack不僅支持這8種，而且它們還是可以任意組合上面的eval、inline、hidden關(guān)鍵字，就如文檔所說(shuō)，你可以設(shè)置souremap選項(xiàng)為cheap-module-inline-source-map。這里為啥要搞這么多模式我也不懂，nodejs作者也表示自己看不懂，但是作為一個(gè)研究安全問(wèn)題的同學(xué)來(lái)說(shuō)，我可以不關(guān)心具體使用了哪種模式，任何一種開(kāi)啟了source-map的情況下，chrome開(kāi)發(fā)者工具會(huì)幫我們處理好，而我們只需要通過(guò)開(kāi)發(fā)者工具下的webpack://查看即可。
五、前端也需要逆向工程
上面提到，在開(kāi)啟了source-map的情況下，可以直接分析原始代碼，那如果沒(méi)有開(kāi)啟，該怎么處理呢，除了webpack打包工具外，相信你還聽(tīng)過(guò)WebAssembly，WebAssembly是一個(gè)主要為了解決js的性能問(wèn)題而誕生的，其運(yùn)作方式與java類(lèi)似，將高級(jí)語(yǔ)言編譯成字節(jié)碼然后在WebAssembly虛擬機(jī)中運(yùn)行，支持編譯成WebAssembly字節(jié)碼的語(yǔ)言有AssemblyScript/C/C++/Rust/Golang等，有了WebAssembly，我們的瀏覽器將會(huì)同時(shí)加載和運(yùn)行兩種類(lèi)型的代碼——JavaScript和WebAssembly，這兩種代碼可以通過(guò)WebAssembly所提供的js api實(shí)現(xiàn)互相調(diào)用，可以認(rèn)為WebAssembly模塊是一個(gè)“高性能的JS函數(shù)” ，比如大家可能遇到需要在前端進(jìn)行md5等加密簽名功能的實(shí)現(xiàn)，就很適合使用WebAssembly來(lái)完成，這里很重要的問(wèn)題是WebAssembly不是用來(lái)取代Javascript的。這里有一個(gè)簡(jiǎn)單的demo可以感受一下WebAssembly代碼結(jié)構(gòu)是什么樣的WebAssembly_test_demo：
| WebAssembly is designed to maintain the versionless, feature-tested, and backwards-compatible nature of the web. WebAssembly modules will be able to call into and out of the JavaScript context and access browser functionality through the same Web APIs accessible from JavaScript. WebAssembly also supports non-web embeddings. |
回到本節(jié)的主題，當(dāng)前端使用Webpack打包，還很不幸未開(kāi)啟Source-map的情況下，以及WebAssembly場(chǎng)景下，當(dāng)我們需要深入分析代碼時(shí)，需要使用反編譯工具，針對(duì)webpack打包，筆者發(fā)現(xiàn)了一個(gè)反編譯工具，
https://www.npmjs.com/package/debundle，但是經(jīng)過(guò)測(cè)試，反編譯webpack打包的項(xiàng)目效果并不好，筆者并未成功反編譯成功自己的demo項(xiàng)目，目前在這方面開(kāi)源工具還是比較缺少的狀態(tài)。如果有同學(xué)使用該工具比較成功的反編譯了webpack打包項(xiàng)目歡迎交流。針對(duì)WebAssembly有比較成熟的工具包WABT工具包用于反編譯，除了該工具包外，也有使用IDA插件進(jìn)行反編譯的方法FLARE腳本系列：使用idawasm IDA Pro插件逆向WebAssembly(Wasm)模塊，由于 篇幅和主題限制，本文不再具體介紹這些工具的使用，感興趣的讀者可以自行嘗試。
六、總結(jié)
隨著前端開(kāi)發(fā)的不斷演進(jìn)，越來(lái)越多的開(kāi)發(fā)技術(shù)/開(kāi)發(fā)框架誕生，了解他才能更好的去hack it。
網(wǎng)站標(biāo)題：前端打包編譯時(shí)代來(lái)臨對(duì)漏洞挖掘的影響
鏈接分享：http://m.fisionsoft.com.cn/article/dpshcgc.html
