Thor
iOS 調試線上 app 中 WebView 的方法
0x1、要解決的問題
工作中時常遇到需要對自己已上線 app 中的 WebView 網頁進行一些調試驗證的情況，以排查 bug，解決問題。
但是已經在線上的 app 如何能夠在不依賴其它代碼級 Hook 工具的情況下，進行簡單的調試呢？
0x2、解決方案
利用 HTTP 抓包工具 的『斷點調試』功能向 WebView 注入調試腳本。這裏以 iOS 上的抓包應用 Thor HTTP Sniffer 爲例。理論上電腦平臺的抓包工具只要支持斷點調試（修改 HTTP 響應的能力）都能達成同樣的效果。
0x3、技術原理及流程
a. 截獲本機請求：利用 HTTP MiTM 截取目標 WebView 的請求，在修改響應消息體後再回傳。
b. 修改響應消息體：向目標網頁的 HTML 響應中的 body 標籤注入調試腳本（文本正則替換）。
c. 修改響應頭：去掉響應頭中 "Content-Security-Policy" 字段，以保證本機注入的調試腳本能正常執行。
0x4、WebView 調試示例 app
PPHub For Github (by jkpang): GitHub 第三方 iOS 客戶端
0x5、用到的工具
- Thor HTTP Sniffer: HTTP 抓包及斷點調試。
- vConsole 調試腳本: A lightweight, extendable front-end developer tool for mobile web page.
- Eruda 調試腳本: Console for mobile browsers.
第一步：在 Thor 中設置過濾器斷點
0x1、打開 Thor, 創建一個過濾器，取名爲：”WebView 注入調試”，並添加一個斷點進入編輯
0x2、因爲需要對 WebView 的響應 HTML 內容進行注入，所以選擇在 請求階段 > 響應消息體回傳前 > 新建匹配規則
» 選擇『響應 body 前』
0x3、在匹配規則中加入表達式進行替換，以注入 vConsole 工具
因爲對 HTML body 標籤注入 js 腳本後可能不會總是生效，所以這裏選擇優先對 title 標籤進行替換
加入判斷條件：判斷是否包含 title 標籤
@rsp.bodyText CONTAINS[cd] "</title>"
當有 title 標籤時，執行以下表達式
^@rsp.bodyText "<\/title>" "</title><script type='text/javascript' src='https://coding.net/u/Tumblr/p/thor-lib/git/raw/master/vconsole/3.2.0/vconsole.min.js'></script><script>new VConsole();</script>"
沒有 title 標籤，則找 body 標籤替換
^@rsp.bodyText "<\/body>" "<script type='text/javascript' src='https://coding.net/u/Tumblr/p/thor-lib/git/raw/master/vconsole/3.2.0/vconsole.min.js'></script><script>
new VConsole();</script></body>"
- 其中
new VConsole()是關鍵不調用不會生成界面 - 還有載人方式可以使用chalrs或者fiddler替換js再頭部注入
- 考慮加載速度的原因，沒有直接使用 github 上的 vConsole 原地址，而是 dump 了一份到 coding.net 倉庫裏，所以上面用的是 codeing.net 的腳本地址
» vConsole 注入設置如圖
同理，再新建一個斷點，完成 Eruda 工具的注入（其實可以不用兩個調試腳本都注入，這裏只是演示效果）
第二步：在 PPHub 中找一個 WebView 界面進行嘗試
0x1、打開 Thor > 選擇 “WebView 注入調試” 過濾器，並啓動
» 啓動抓包
0x2、打開 PPHub
» 並找到一個 WebView, 等待加載完成 (直到出現調試工具入口)
» vConsole 調試效果
» Eruda 調試效果
參考資料 (排名不分先後)
- JSBox 的網頁調試插件
- 三種解密 HTTPS 流量的方法介紹 by Jerry Qu
- Content Security Policy Level 2 介紹 by Jerry Qu
- eruda - Console for mobile browsers
- vConsole by Tencent
Thor 20 天免費試用 TestFlight 申請
0x1、Thor 的詳細介紹
0x3、過濾器 “WebView 注入調試” 後期優化版下載（下載後直接用 Thor 打開，安裝）