攔截 APP 網路請求
發布於 2024-06-09
會有這個需求主要是來自於公司有一個專案是要把現有的外包App做相同的網頁版，雖然有source code但由於並不熟悉swift的寫法，所以常常要找一段對應的code都要找好久，畫面還可以看著刻（沒有設計稿，工程師自由心證（X））但功能對應的API endpoint常常都花好多時間在搜尋，並且因為是外包的，想要問到原本開發的工程師也沒有那麼容易，常常都要try好多的關鍵字，才能在茫茫的code海裡面找到想要的片段。
為了加快開發流程，所以想找個方法，看能不能在console 視窗可以看到網路流量一樣，只要在App上嘗試操作，再去找它發出了什麼request就可以直接看到endpoint跟payload，豈不美哉。
經過一番survey，發現了一個挺好用的工具，就是我們今天的主角 --- mitmproxy
根據它官網的描述
mitmproxy is a set of tools that provide an interactive, SSL/TLS-capable intercepting proxy for HTTP/1, HTTP/2, and WebSockets.
他可以攔截http, https甚至websocket 的通訊，並log出來，讓我們可以容易的看到app究竟發送了什麼資料到什麼endpoint。在使用上也很簡單，只要下載安裝好就可以用了，甚至還自帶web UI可以方便使用。
下載安裝完成後，執行 mitmweb (web ui)，他首先會開一個terminal執行他的background proxy server，同時主動打開一個網頁，在terminal裡面應該會看到這樣的output
[19:03:00.598] HTTP(S) proxy listening at *:8080.
[19:03:00.599] Web server listening at http://127.0.0.1:8081/分別代表mitmweb會監聽8080port的網路請求，並將web UI開在8081port，同時也會看到剛剛主動開啟的網頁是http://127.0.0.1:8081
接下來就進到這篇文章的重點--擷取android app的api request，之所以要限定android，是因為我們的mitmweb是跑在windows上的，所以必須在電腦上用模擬器開App，才能讓request經過Proxy server。
由於手邊沒有Mac的電腦，所以沒辦法測試是否能夠在Mac上將iOS模擬器的的網路流量導經Proxy server，有待之後再研究研究。
另外，本篇使用的模擬器是android studio內建的AVD (Android Virtual Device)，之後的設定畫面也都會以這個為主，其他的模擬器就需要讀者再自行研究有沒有支援該項功能了。
如下圖，在虛擬機打開後右側的選單列中開啟設定，接著在進階的選單中找到Proxy的頁面，開啟Proxy，並將Proxy的位置指向http://127.0.0.1:8080，如果成功設定好，就可以在mitmweb的web UI上面看到有一些request 被攔截下來並顯示了。