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 前』

響應 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 的腳本地址