學無止盡: 特定網站自動開啟Fiddler

繼上一篇。我們成功的使用一個暫時的解決方法來避免網站瀏覽時出現跑版/功能不正常。
不過這個方法有很大的侷限：必須在瀏覽網頁時同時開啟fiddler。
這意味著我們必須將fiddler與瀏覽器綑綁再一起：只要瀏覽器打開，fiddler也需要一起開啟。
不過fiddler只是為了某個特定的網站才需要，而且這個網站也不是每次開啟瀏覽器都會去逛。因此，能不能做到只有在瀏覽特定網站的時候，自動開啟fiddler呢?

這就是本文的重點。

要達成這個目標，我們需要做到以下幾點：

設定Fiddler，使其能轉換https到http
讓瀏覽器能開啟Fiddler
讓特定的網站才開啟Fiddler

設定Fiddler，使其能轉換https到http

這項功能在上一篇已經設定過了。只要確保AutoResponder沒有被關掉即可。

讓瀏覽器能開啟Fiddler

瀏覽器不就是用來瀏覽網頁用的嗎？怎麼可能讓他開啟其他程式？答案就是有可能的！
試試看這個連結，點下去後會自動開啟預設的郵件程式。
你會注意到該連結並非以http開頭，而是以mailto開頭。這表示在瀏覽器的網址列上，不僅僅只是http或https這兩種通訊協定(protocol)，還有一些其他的協定：例如mailto會開啟郵件程式、file能開啟本機的檔案等。甚至如果有安裝BT軟體等，會發現magnet開頭的是屬於磁力連結，會開啟BT軟體來尋找及下載檔案。

這是一個叫做Custom URI Scheme的功能，我們能註冊一個自己定義的protocol，並且設定讓此protocol呼叫對應的程式。

現在，我們要註冊一個叫做fiddler的protocol，並且讓fiddler protocol會啟動fiddler這個程式。

首先要註冊fiddler protocol，這需要修改windows登錄檔
將下列存成fiddler_protocol.reg
其中紅色的fiddler就是我們自己定義的protocol名稱
紫色文字則是開啟的程式路徑，這裡需要注意有使用跳脫字元\

REGEDIT4
[HKEY_CLASSES_ROOT\fiddler]

@="URL:fiddler Protocol"

"URL Protocol"=""
[HKEY_CLASSES_ROOT\fiddler\shell]
[HKEY_CLASSES_ROOT\fiddler\shell\open]
[HKEY_CLASSES_ROOT\fiddler\shell\open\command]

@="C:\\Users\\user\\scoop\\apps\\fiddler\\current\\Fiddler.exe"

點兩下執行fiddler_protocol.reg即可將資料匯入到windows登錄檔裡
此時開啟windows登錄編輯程式(按win鍵+R後，輸入regedit)即可看到資訊

現在開啟瀏覽器，在網址列中打上fiddler:””後按下Enter，此時瀏覽器就會跳出一個啟動程式的對話視窗出來。這裡要特別注意的是網址列輸入的fiddler protocol必須要包含兩個雙引號””，如果沒有雙引號的話瀏覽器會認為你是要搜尋，而不是使用fiddler protocol。

讓特定的網站才開啟Fiddler

現在我們讓瀏覽器能夠啟動fiddler了，不過缺點是我們必須在網址列中手動輸入fiddler protocol。
現在我們使用javascript來自動改變網址列中的網址。
在javascript中，我們可以使用window.location.href來取得或是修改網址。
我們來試試看這個功能吧。開啟瀏覽器後按F12打開瀏覽器的開發者工具，切換到「主控台」分頁，這裡可以讓我們直接寫javascript。

window.location.href = 'fiddler:""';

輸入上方的內容即可看到fiddler被瀏覽器叫起來了

到目前為止，我們做了

註冊fiddler protocol，讓瀏覽器能呼叫fiddler
使用javascript，利用程式的方式來自動輸入fiddler protocol

距離我們的目的還剩下一步：將我們寫的javascript植入(inject)到特定網站上，讓網站能執行我們寫的javascript。

這裡筆者使用firefox上的Greasemonkey(Chrome可以使用Tampermonkey)這個瀏覽器附加元件，這個附加元件能夠將使用者寫的javascript植入到網站裡面。
在Greasemonkey中新增一個指令稿，將下面的內容複製過去：

// ==UserScript==
// @name     Launch Fiddler in specific site
// @version  1.0
// @grant    none
// @include    https://localhost:5001*
// ==/UserScript==
window.location.href = 'fiddler:""';
    setTimeout( () => {
    window.location.reload();
}, 3000);

詳細看這份指令稿，
第5行我們使用@include指定了這份指令稿只有在https的localhost:5001網址時才會執行
第7行就是讓瀏覽器呼叫fiddler程式
第8-10行則是等一段時間來讓fiddler完全開啟，並且因為網址已經是https了，我們需要重新整理網頁才能讓fiddler的AutoResponder生效。
到這一步就全部設定完畢了，只要去瀏覽特定網站，當網頁突然變成https時我們藉由Greasemonkey所注入的程式碼就會生效，然後將fiddler開啟並將網頁導成http的方式。

註：如果到這邊是使用上一篇的demo site來練習的話，會發現demo site會陷入open fiddler –> reload website –> open fiddler –> …的無窮迴圈。這是因為fiddler沒有辦法抓取網址是localhost的流量，必須將網址改成localhost.fiddler才行，因此fiddler就沒辦法將https轉換成http。所以如果是使用demo site的話，Greasemonkey的指令搞要改成如下：

// ==UserScript==
// @name     Launch Fiddler in specific site
// @version  1.0
// @grant    none
// @include    https://localhost:5001*
// ==/UserScript==

window.location.href = 'fiddler:""';

setTimeout( () => {
    window.location.href = 'https://localhost.fiddler:5001';
}, 3000);

Reference:

學無止盡

2019年8月15日星期四

特定網站自動開啟Fiddler

設定Fiddler，使其能轉換https到http

讓瀏覽器能開啟Fiddler

讓特定的網站才開啟Fiddler

沒有留言:

張貼留言

網誌存檔

標籤

2019年8月15日 星期四