一、什么是webpack

webpack用于編譯JavaScript模塊。關注javascript技術的同學一定知道，在CommonJS和ES6中，為了支持模塊化，而引入了export/require/import這類東西，模塊化可以降低開發的復雜度，用于支撐前端的復雜功能，但是模塊化后，也帶來了許多問題，比如老版本的瀏覽器不支持ES6/JSX語法，開發和線上不能保持一致，這就為WebPack類的自動化代碼轉換工具的出現提供了需求。

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss，TypeScript等)，并將其轉換和打包為合適的格式供瀏覽器使用。按照官網的說法，webpack可以打包一切資源/圖片/樣式/依賴等等，webpack默認只支持js模塊打包，對于其他文件就需要用loader解析器，比如在vue中，直觀的效果就是使用webpack可以將使用的vue，css，圖片等打包成一個js。

二、在漏洞挖掘過程中分析前端代碼的重要性

隨著前后端分離架構的大眾化 ，越來越多的開發團隊采用這種開發模式。前后端的交互越來越多是通過API完成，而不再依賴頁面刷新，眾多的后端的框架也把自己定位成一個API框架，如thinkphp5等。通過分析前端js代碼，找到前后端交互的接口，對接口進行測試變得越來越重要，比如在某些沒權限的場景下，我們無法完整顯示頁面，可以通過分析前端js中的ajax接口進行測試。

這里我就拿幾個案例說說：

• 某次挖漏洞過程中，登陸后顯示賬號沒有權限，頁面顯示403 forbiden，f12 sources 發現前端使用VUE框架，分析源碼對一ajax接口進行測試發現存在越權。
• 某次挖漏洞過程中，通過分析前端js代碼，發現存在一段代碼，代碼邏輯是在debugMode下，會setCookie，嘗試使用該Cookie，成功進入后臺并且是管理員權限。

三、VUE/REACT開發場景

在VUE/REACT開發場景下 ，前端開發會引入如模塊化等諸多新特性，前端開發不再是幾個簡單的js文件，開發完成后會通過webpack等打包工具打包生成部署使用的js文件，但是如果我們直接分析該編譯的js，很難看懂。比如我這個demo：

https://blog.donot.me/assets/demo/index.html，頁面下的app.bundle.js反正我是看不懂寫的是啥，這個js文件就是webpack打包后的結果，但是由于我是開啟了source-map調試模式，如果你是用chrome瀏覽器打開的，打開devtools-sources，應該可以看到一個webpack://，這個就是chrome對source-map調試的支持，點開src目錄下就可以看到js代碼源文件。

四、webpack的幾種調試模式

webpack目前支持很多種調試模式，每種模式的區別是編譯后的代碼和源碼的映射方式不同，具體的體現是源碼通過什么方式呈現，有的模式會生產一個.map文件，有的模式會通過注釋，有的模式會使用DataUrl的方式。

webpack不僅支持這8種，而且它們還是可以任意組合上面的eval、inline、hidden關鍵字，就如文檔所說，你可以設置souremap選項為cheap-module-inline-source-map。這里為啥要搞這么多模式我也不懂，nodejs作者也表示自己看不懂，但是作為一個研究安全問題的同學來說，我可以不關心具體使用了哪種模式，任何一種開啟了source-map的情況下，chrome開發者工具會幫我們處理好，而我們只需要通過開發者工具下的webpack://查看即可。

五、前端也需要逆向工程

上面提到，在開啟了source-map的情況下，可以直接分析原始代碼，那如果沒有開啟，該怎么處理呢，除了webpack打包工具外，相信你還聽過WebAssembly，WebAssembly是一個主要為了解決js的性能問題而誕生的，其運作方式與java類似，將高級語言編譯成字節碼然后在WebAssembly虛擬機中運行，支持編譯成WebAssembly字節碼的語言有AssemblyScript/C/C++/Rust/Golang等，有了WebAssembly，我們的瀏覽器將會同時加載和運行兩種類型的代碼——JavaScript和WebAssembly，這兩種代碼可以通過WebAssembly所提供的js api實現互相調用，可以認為WebAssembly模塊是一個“高性能的JS函數” ，比如大家可能遇到需要在前端進行md5等加密簽名功能的實現，就很適合使用WebAssembly來完成，這里很重要的問題是WebAssembly不是用來取代Javascript的。這里有一個簡單的demo可以感受一下WebAssembly代碼結構是什么樣的WebAssembly_test_demo：

回到本節的主題，當前端使用Webpack打包，還很不幸未開啟Source-map的情況下，以及WebAssembly場景下，當我們需要深入分析代碼時，需要使用反編譯工具，針對webpack打包，筆者發現了一個反編譯工具，

https://www.npmjs.com/package/debundle，但是經過測試，反編譯webpack打包的項目效果并不好，筆者并未成功反編譯成功自己的demo項目，目前在這方面開源工具還是比較缺少的狀態。如果有同學使用該工具比較成功的反編譯了webpack打包項目歡迎交流。針對WebAssembly有比較成熟的工具包WABT工具包用于反編譯，除了該工具包外，也有使用IDA插件進行反編譯的方法FLARE腳本系列：使用idawasm IDA Pro插件逆向WebAssembly(Wasm)模塊，由于 篇幅和主題限制，本文不再具體介紹這些工具的使用，感興趣的讀者可以自行嘗試。

六、總結

隨著前端開發的不斷演進，越來越多的開發技術/開發框架誕生，了解他才能更好的去hack it。