使用Fiddler竄改網頁內容進行測試

瀏覽器F12開發者工具內建的網頁封包分析功能日益強大,但老牌HTTP封包傳輸偵錯神器-Fiddler,還是有不少獨門絕活為F12工具遠遠不及,例如先前研究NTLM與Kerberos驗證時用到的Inspector/Auth資訊分析。今天則介紹Fiddler另一項少為人知但強大的功能-AutoResponder。

用F12工具修改網頁DOM、CSS,甚至JavaScript都不是問題,但只能在網頁載入後事後修改,不符合某些情境要求。例如,瀏覽別人寫的網頁發現問題,我想調動兩個<script src="…">的先後順序診斷時間差問題,或是想禁止載入或換掉某個css檔觀察變化,這些就無法靠F12工具實現。Fiddler的AutoResponder允許你制定規則,在瀏覽器發出特定Request時不由Web Server取內容,改傳回指定內容。

用個實例演練,前幾天剛好有網友問到jQuery自動完成懶人包的問題,就拿它的Live Demo當範例,展示如何在網頁中加料。首先開啟Fiddler擷取內容,共有default.htm、jquery-1.3.2.js、jquery.autocomplete.js跟jquery.autocomplete.css四個檔案,我們想修改的對象是default.html。

第一步是先取得Response的完整內容,最簡便的做法是在封包按右鍵選單,選擇Save/Response/Entire Response另存成文字檔:

接著我們在AutoResponder建立一條規則,先選取右方清單中的default.htm項目,按下Add Rule,Fiddler會自動產生EXACT:httq://…比對條件(EXACT代表URL要完全相同,比對時可使用萬用字元甚至Regular Expression,詳見官方文件),接著指定回應內容,選擇"Find a file"找到前一步驟儲存的文字檔。接著勾選「Enable automatic responses」及「Unmatched requests passthrough」,前者啟用自動回應功能,後者則是因為我們只針對default.htm訂了規則,要略過其他不符規則的Request,繼續交由Web Server處理。

設定好後,重新瀏覽,一切看似正常沒什麼不同,但背後default.htm的內容已不是來自Web Server,而是我們剛才存檔的IndexHtml_Response.txt。接著來動點手腳,用Notepad++修改內容,在<body>前方加入五個字「破解樂無窮」。

但有一點要注意,HTTP Response規格中,需透過Content-Length Header宣告資料長度,在修改內容後記得要調整Content-Length,瀏覽器才不會錯估長度導致部分內容被截斷。(記得UTF-8下的中文字元一個要算3個Bytes)

修改後,再重新整理瀏覽器,薑薑薑薑~

有沒有當駭客的fu,很有趣吧?

最後補充,除了換成自訂的Response內容,Fiddler也提供了HTTP 200、304、401、404… 等標準回應、導向其他URL功能、執行FiddlerScript,甚至有接到Request後中斷執行再動態挑選回應檔案的花式玩法,有興趣的朋友可以參閱官方文件

歡迎推文分享:
Published 24 May 2016 07:29 AM 由 Jeffrey
Filed under:
Views: 10,979



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2016>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication