Fiddler高級用法

1. 簡單用法

Fiddler作爲一個基於http協議的抓包工具，一直在業界有廣泛使用。很多測試或者前端在使用Fiddler時，僅僅用於查看前端和服務端之間的請求信息。包括我作爲一個Fiddler的重度使用者，除了簡單抓包分析外，最多也只是使用它的Composer功能，用來構建一個POST或者GET請求。總的來說，一般使用Fildder一般是使用以下幾個功能

抓包分析
通過配置代理，抓移動端請求信息
使用Composer快速測試後端接口

然而功能強大且方便擴展的Fiddler遠遠不止這個簡單的用法。

2. 高級用法--亂碼處理

前端開發中，調用後端一個接口。接口能正常訪問，就是中文出現亂碼。

從圖中左側可以看到，不管是瀏覽器，還是在開發者工具中。後端返回的內容，都是亂碼。並且亂碼的內容還不同。從圖中右側，一般中文亂碼的現象描述可以知道

瀏覽器亂碼原因推測是 以GBK的編碼方式讀取UTF8編碼的中文
開發者工具亂碼原因推測是 以IOS8859-1的方式讀取UTF8編碼的中文

然而我後端接口代碼剛好，只設置了響應內容是編碼方式是UTF8，但並沒有告訴瀏覽器。從顯示結果來看，瀏覽器跟隨系統默認編碼猜測是GBK，而開發者工具默認編碼猜測是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 回車。然後會在狀態欄看到這樣一句話，RsponseURI breakpoint for weixin-server/weixinbind就表示啓動成功了。這是我們在瀏覽器，重新訪問這個鏈接，再回到Fildder會看到這樣一個界面

在響應的頁籤中，我們選擇raw頁籤，在Date下一樣我們添加如下請求頭Content-Type: text/html;charset=utf-8然後點擊綠色的Run to Completion 按鈕,回到瀏覽器。這時亂碼就不在了

2.2 Fiddler規則

聰明細心的一定發現了，使用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")  
} 
 ...

保存後退出，然後在狀態欄看到CustomRules.js was loaded at 時間就表示我們當前修改的腳本已經生效了。回到瀏覽器重新訪問改地址

3. 高級用法--跨域處理

構建跨域環境，我們在本地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","*");
}

保存退出後，刷新頁面你會發現數據已經請求成功了.

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標籤，點擊添加規則，如下圖設置

保存好以後，刷新剛纔的index.html頁面，你會看到如下結果

這裏除了修改HTML頁面外，還可以修改css js甚至ajax請求.這樣可操作性就很多了，比如對別人的網站搞點小破壞啥的。特別是那些充分相信前端數據的網站，特別危險。當然除了做響應替換外，還有其他很多命令，如用 *delay:1000實現延遲1秒響應，用於測試弱網環境

5. Fiddler4頻繁彈出代理變化

在很長一段時間，一直使用Fiddler2，每次打開都提示我升級，每次我都拒絕了。可是最近一次我升級了，問題就出現了。

抓包過程中出現了一條黃色的提示信息The system proxy was changed. click to reeable capturing.只要一出現這個信息，就不能愉快抓包了。後邊從官方博客瞭解到改變代理服務最多可能有以下兩個原因

防火牆改變代理
VPN軟件改變代理

所以該怎麼解決呢？這裏有兩個方法可以試下

5.1 重新啓用代理

在前邊內容中，我們多次使用了自定義規則。這裏我們一樣可以通過自定義規則實現。首先找到腳本的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("執行函數OnRetire")
  FiddlerApplication.oProxy.remove_DetachedUnexpectedly(DoReattach);
}

這裏主要是通過檢測到代理異常關閉時，啓動一個任務，重新啓動代理。就相當於程序幫我們完成了點擊操作

5.2 從源頭解決

細心聰明的你，也許又發現了，上邊的方法雖然解決了問題，但並不完美。會造成丟失某些請求。因爲這裏延遲了1秒重新啓動代理。如果這個時間段剛好有一個請求過來，肯定就抓不到這個包。所以，還需要從源頭抓起

首選關閉防火牆，如果確定已經關閉，但是問題還沒有解決。這個時候就得檢查你最近有沒有安裝vpn軟件了。網上很多資料，都是讓我們刪除vpn的軟件，這種殺雞取卵的方式我是不敢苟同的。

其實我們只需要找到vpn相關的服務，然後關掉就可以了。這裏不得不強調一下不要認爲vpn沒有運行就Ok，其實Vpn軟件安裝好以後，會在系統駐留服務，並開機啓動。我們使用win+R啓動運行窗口，輸入service.msc回車，進入服務管理。按狀態排序，讓正在運行服務排列在最前邊。然後一個個看是否有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。因爲同樣的環境，運行Fidder2並不會出現上邊的那種情況。

6. 總結

Fiddler這個軟件基於插件的開發模式，可以擴展出很多功能。這個工具平時自己經常使用，很多時候只是抓個包發個請求而已。這次深挖了一下，主要是開發過程chrome開發者工具請求的中文出現了亂碼。然而後端的代碼又是我沒權限修改的。所以就動了Fiddler的心思。這次就不放什麼demo了。還是希望您多多支持下，寫作不易。如果覺得還有點意思，您掃描下方的二維碼,關注公衆號[小院不小]，這裏是我記錄的技術地方，一直堅持原創，一直堅持是工作所積累。所以不會天天發文。

Fiddler高級用法