Fiddler高級用法
Fiddler高級用法
1. 簡單用法
Fiddler作為一個基于http協(xié)議的抓包工具，一直在業(yè)界有廣泛使用。很多測試或者前端在使用Fiddler時，僅僅用于查看前端和服務端之間的請求信息。包括我作為一個Fiddler的重度使用者，除了簡單抓包分析外，最多也只是使用它的Composer功能，用來構建一個POST或者GET請求。總的來說，一般使用Fildder一般是使用以下幾個功能
- 抓包分析
- 通過配置代理，抓移動端請求信息
- 使用Composer快速測試后端接口
然而功能強大且方便擴展的Fiddler遠遠不止這個簡單的用法。
2. 高級用法--亂碼處理
前端開發(fā)中，調用后端一個接口。接口能正常訪問，就是中文出現亂碼。
從圖中左側可以看到，不管是瀏覽器，還是在開發(fā)者工具中。后端返回的內容，都是亂碼。并且亂碼的內容還不同。從圖中右側，一般中文亂碼的現象描述可以知道
- 瀏覽器亂碼原因推測是 以GBK的編碼方式讀取UTF8編碼的中文
- 開發(fā)者工具亂碼原因推測是 以IOS8859-1的方式讀取UTF8編碼的中文
然而我后端接口代碼剛好，只設置了響應內容是編碼方式是UTF8，但并沒有告訴瀏覽器。從顯示結果來看，瀏覽器跟隨系統(tǒng)默認編碼猜測是GBK，而開發(fā)者工具默認編碼猜測是IOS8859-1.為什么是猜測，因為，現在的chrome瀏覽器，實在找不到設置編碼的地方，如果有知道的朋友，還麻煩留言告訴一下。
??//author:herbert?公眾號:小院不小?Date:20210501?
?protected?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)
???throws?ServletException,?IOException?{
??String?key?=?request.getParameter("key");
??String?userName?=?request.getParameter("u");
??String?password?=?request.getParameter("p");
??JSONObject?user?=?findUserByNameAndPwd(userName,?password);
??JSONObject?ret?=?new?JSONObject();
??if?(user?==?null)?{
???ret.put("errcode",?99);
???ret.put("errmsg",?"未找到用戶信息");
???response.setCharacterEncoding("utf8");//?正常設置應該是設置Content-type
???response.getWriter().print(ret.toJSONString());
???return;
??}
????.....
?}
由于后端代碼沒有加，但又必須馬上解決。這個時候Fildder就派上用場了。
2.1 Fiddler斷點
在Fiddler左下角，有一行黑色的輸入框。官方稱之為QuickExec.在這里可以輸入一些命令。比如我們現在要修改響應內容，就需要命令 bpafter
在這里我們輸入bpafter weixin-server/weixinbind 回車。然后會在狀態(tài)欄看到這樣一句話，RsponseURI breakpoint for weixin-server/weixinbind就表示啟動成功了。這是我們在瀏覽器，重新訪問這個鏈接，再回到Fildder會看到這樣一個界面
在響應的頁簽中，我們選擇raw頁簽，在Date下一樣我們添加如下請求頭Content-Type: text/html;charset=utf-8然后點擊綠色的Run to Completion 按鈕,回到瀏覽器。這時亂碼就不在了
2.2 Fiddler規(guī)則
聰明細心的一定發(fā)現了，使用bpater針對每次請求都需要手動添加header信息。能不能通過程序自動添加呢？答案是肯定的。在Fiddler菜單中，選擇Rules->Customize Rules...，彈出Fiddler的腳本編輯器。在腳本的OnBeforeResponse方法中添加如下代碼
?//author:herbert?公眾號:小院不小?Date:20210501?
?...
if?(oSession.url.indexOf("weixinbind")>-1)?{
oSession.oResponse.headers.Add("Customize","add?by?Script")??
oSession.oResponse.headers.Add("Content-Type","text/html;charset=utf-8")??
}?
?...
保存后退出，然后在狀態(tài)欄看到CustomRules.js was loaded at 時間就表示我們當前修改的腳本已經生效了。回到瀏覽器重新訪問改地址
3. 高級用法--跨域處理
構建跨域環(huán)境，我們在本地80端口下，添加index.html文件。文件內容如下
<!--author:herbert?公眾號:小院不小?Date:20210501?-->
<html?lang="en">
<body>
???<p?id="content"></p>
</body>
<script>
??window.onload?=?async?function?()?{
?????let?resutData?=?await?fetch("http://localhost:8080/weixin-server/weixinbind?u=1&p=2")
????let?jsonData?=?await?resutData.json();
????console.log(jsonData)
????document.querySelector("#content").textContent?=?JSON.stringify(jsonData)
??}
</script>
</html>
從代碼中可以知道，訪問了一個8080端口的GET請求。如果這個接口后端沒有返回允許跨域標志，我們將請求不了數據。我們在瀏覽器會看到如下錯誤信息
這時，在后端不改代碼的情況下，我們通過fiddler一樣可以實現跨域請求。在Fiddler菜單中，選擇Rules->Customize Rules...，彈出Fiddler的腳本編輯器。在腳本的OnBeforeResponse方法中添加如下代碼
?//author:herbert?公眾號:小院不小?Date:20210501?
if(oSession.host==?"localhost:8080"){
??oSession.oResponse.headers.Add("Customize","CROS?add?by?Script");
??oSession.oResponse.headers.Add("Content-Type","application/json;charset=utf-8")??
??oSession.oResponse.headers.Add("Access-Control-Allow-Origin","*");
}
保存退出后，刷新頁面你會發(fā)現數據已經請求成功了.
4. 高級用法--響應替換
修改線上內容，這個功能可想象的空間很大，可做的事情很多。為了說明他強大之處，我們依然上邊的index.html說明。不過現在我們需要新建一個index2.html頁面，具體內容如下
<!--author:herbert?公眾號:小院不小?Date:20210501?-->
<html?lang="en">
<body>
???<p?id="content"></p>
</body>
<script>
??window.onload?=?async?function?()?{
????alert("警告！！！您的代碼被修改啦")
????let?resutData?=?await?fetch("http://localhost:8080/weixin-server/weixinbind?u=1&p=2")
????let?jsonData?=?await?resutData.json();
????console.log(jsonData)
????document.querySelector("#content").textContent?=?JSON.stringify(jsonData)
??}
</script>
</html>
這個文件僅僅是多加了一段代碼alert("警告！！！您的代碼被修改啦"),現在我們來實現訪問index.html頁面時，實際返回的index2.html的內容
在右側找AutoResponse標簽，點擊添加規(guī)則，如下圖設置
保存好以后，刷新剛才的index.html頁面，你會看到如下結果
這里除了修改HTML頁面外，還可以修改css js甚至ajax請求.這樣可操作性就很多了，比如對別人的網站搞點小破壞啥的。特別是那些充分相信前端數據的網站，特別危險。當然除了做響應替換外，還有其他很多命令，如用 *delay:1000實現延遲1秒響應，用于測試弱網環(huán)境
5. Fiddler4頻繁彈出代理變化
在很長一段時間，一直使用Fiddler2，每次打開都提示我升級，每次我都拒絕了。可是最近一次我升級了，問題就出現了。
抓包過程中出現了一條黃色的提示信息The system proxy was changed. click to reeable capturing.只要一出現這個信息，就不能愉快抓包了。后邊從官方博客了解到改變代理服務最多可能有以下兩個原因
- 防火墻改變代理
- VPN軟件改變代理
所以該怎么解決呢？這里有兩個方法可以試下
5.1 重新啟用代理
在前邊內容中，我們多次使用了自定義規(guī)則。這里我們一樣可以通過自定義規(guī)則實現。首先找到腳本的main方法,在里邊注冊一個事件
//?author:herbert?公眾號:小院不小?Date:20210502
...
static?function?Main(){
??FiddlerObject.log("注冊函數DoReattach")
??FiddlerApplication.oProxy.add_DetachedUnexpectedly(DoReattach);
??var?today:?Date?=?new?Date();
??FiddlerObject.StatusText?=?"?CustomRules.js?was?loaded?at:?"?+?today;
}
....???
然后添加我們注冊的方法DoReattach
//?author:herbert?公眾號:小院不小?Date:20210502
static?function?DoReattach(o:?Object,?ea:?EventArgs){
??FiddlerObject.log("DoReattach")
??ScheduledTasks.ScheduleWork("reattach",?1000,?innerReattach);
}
static?function?innerReattach(){
??FiddlerObject.log("innerReattach")
??FiddlerApplication.UI.actAttachProxy();
}
static?function?OnRetire(){
??FiddlerObject.log("執(zhí)行函數OnRetire")
??FiddlerApplication.oProxy.remove_DetachedUnexpectedly(DoReattach);
}
這里主要是通過檢測到代理異常關閉時，啟動一個任務，重新啟動代理。就相當于程序幫我們完成了點擊操作
5.2 從源頭解決
細心聰明的你，也許又發(fā)現了，上邊的方法雖然解決了問題，但并不完美。會造成丟失某些請求。因為這里延遲了1秒重新啟動代理。如果這個時間段剛好有一個請求過來，肯定就抓不到這個包。所以，還需要從源頭抓起
首選關閉防火墻，如果確定已經關閉，但是問題還沒有解決。這個時候就得檢查你最近有沒有安裝vpn軟件了。網上很多資料，都是讓我們刪除vpn的軟件，這種殺雞取卵的方式我是不敢茍同的。
其實我們只需要找到vpn相關的服務，然后關掉就可以了。這里不得不強調一下不要認為vpn沒有運行就Ok，其實Vpn軟件安裝好以后，會在系統(tǒng)駐留服務，并開機啟動。我們使用win+R啟動運行窗口，輸入service.msc回車，進入服務管理。按狀態(tài)排序，讓正在運行服務排列在最前邊。然后一個個看是否有VPN相關文字介紹。這里沒有搜索功能，比較麻煩。在我的電腦找到兩個vpn相關的服務
這兩個vpn工具，剛好都是我使用過的。選擇停止這些服務，再回到Fildder工具，就再也么有出現那個黃色的警告條了。
彩蛋來了。附送一個小知識
在查找哪個程序修改了代理，我們可以使用ProcessMonitor工具。比如我們需要了解誰修改了我們代理，就可以添加如下兩個過濾器實現
author:herbert?公眾號:小院不小?Date:20210502
Operation??is?RegSetValue
Path?is?HKCU\Software\Microsoft\Windows\CurrentVersion\InternetSettings\ProxyEnable
Path?is?HKCU\Software\Microsoft\Windows\CurrentVersion\Internet?Settings\ProxyServer
如下圖所示
這樣篩選以后，回到主界面，觀察對應的額結果
從列表中結果中我們可了解到，除了Fiddler外還有其他程序在修改注冊表ProxyEnable對應的值.
- 20:27:50 這個時間段，是我啟動Fiddler出現的結果。ProxyEnable變化 1->0->1,ProxyServer維持為127.0.0.1:8888
- 20:28:09 這個時間段，是Fidder出現那個黃色警告框出現的結果 ProxyEnable變化 1->0->1->0,ProxyServer維持為127.0.0.1:8888
所以，最終ProxyEnable變成0了，就無法啟動代理了。點擊最后一條ProxyEnable為0的數據，查看明細，如下圖
我對比ProxyEnable為1的那條數據，無論是進程id還是堆棧信息，都是一樣的。所以我嚴重懷疑，這是Fiddler4的一個BUG。因為同樣的環(huán)境，運行Fidder2并不會出現上邊的那種情況。
6. 總結
Fiddler這個軟件基于插件的開發(fā)模式，可以擴展出很多功能。這個工具平時自己經常使用，很多時候只是抓個包發(fā)個請求而已。這次深挖了一下，主要是開發(fā)過程chrome開發(fā)者工具請求的中文出現了亂碼。然而后端的代碼又是我沒權限修改的。所以就動了Fiddler的心思。這次就不放什么demo了。還是希望您多多支持下，寫作不易。如果覺得還有點意思，您掃描下方的二維碼,關注公眾號[小院不小]，這里是我記錄的技術地方，一直堅持原創(chuàng)，一直堅持是工作所積累。所以不會天天發(fā)文。
公眾號