使用Fiddler將https導成http

緣由：
筆者有個常逛的網站依然使用http，不過該網站的超連結偶爾會將網址導去https下。
如果該網站使用https瀏覽的時候，有一些資源(例如css或是java script)依舊是使用http的方式從外部讀取，這導致觸發了Firefox的混合內容(mixed content)的安全性警示。
在預設的情況下Firefox會將較不安全的http連結封鎖，於是該網站的版面就跑掉了(因為css被擋住無法載入)。

目的：
當超連結導去的網址是https的時候，將其改回http，確保在瀏覽網頁的期間所有的連結都會是http。

方法：
使用Fiddler的AutoResponder的功能來將https轉成http。

※Fiddler是一個web debugging tool。他能記錄瀏覽網頁時的各種資料，也能用客製化的內容來取代網站的回應。

---

基於社會善良風俗，筆者將建立一個展示用的網站來示範此問題：


1. 建立dotnet的mvc網站

> dotnet new mvc -o httpsMixedContent        



2. 修改 \Startup.cs，使展示網站可以使用http來瀏覽
將第49行app.UseHsts();
與第52行app.UseHttpsRedirection();
兩行都註解掉

3. 新增一張圖片在首頁
編輯 \Views\Home\index.cshtml，增加
<div class="pic">
    <img src="https://i.imgur.com/eBE21mm.jpg" alt="No picture">
</div>

4. 新增css檔案，為圖片增加淡出的特效
新增style.css檔案到 \wwwroot\css\ 目錄下，內容為

.pic{
     position:relative;
}
.pic img{
     position:absolute;
     -webkit-transition: opacity 2s ease-in-out;
     -moz-transition: opacity 2s ease-in-out;
     -o-transition: opacity 2s ease-in-out;
     transition: opacity 2s ease-in-out;
}

.pic img:last-child:hover{
     opacity:0;
}


5. 引入style.css
編輯 \Views\Shared\_Layout.cshtml，加入
<link rel=stylesheet type="text/css" href="http://localhost:5000/css/style.css">

6.執行httpsMixedContent網站
> dotnet run                             

※Firefox在55版以後即可允許localhost載入混合內容，因此我們需要另外做一些設定來避開localhost的網域。

7. 使用ngrok軟體來取得public url並連結到local的網站上

 > ngrok http 5000                            

複製ngrok產生的網域http://967e6c8c.ngrok.io

8. 將第5步驟的style.css內容修改，改成使用
<link rel=stylesheet type="text/css" href="http://967e6c8c.ngrok.io/css/style.css">

此時可以使用http://967e6c8c.ngrok.io來瀏覽網站
將滑鼠移到Shut up and take my money!的圖片上時會發現圖片有淡出的效果

這時候使用https://localhost:5001來瀏覽網站時，會發現圖片的淡出效果不見了
※此時Firefox可能會警告你這個網站不安全，這是正常現象，選擇「進階...」以及「接受風險並繼續」即可

此時就是因為我們在瀏覽https的網站，但是其中又有存取http的檔案(http://967e6c8c.ngrok.io/css/style.css)，所以被Firefox阻擋住。
按下F12開啟Firefox的開發者工具，在主控台頁籤會看到封鎖載入混合式內容的錯誤訊息

---

前面建立好模擬環境後，現在就開始來處理混合內容被阻擋的問題：
筆者將會使用Fiddler這個軟體的AutoResponder功能，來自動處理https的狀況

1. 開啟Fiddler，切換右方的頁簽到AutoResponder
勾選Enable rules & Unmatched requests passthrough

 2. 點選Add Rule
在Rule Editor中設定
REGEX:https://localhost:5001\/?$
*redir:http://localhost:5000/
設定好後別忘記點選右方的Save

上方的rule表示如果網址符合https://localhost:5001/(使用reguler expression來匹配)
則會redirect到http://localhost:5000/
























3. 一切都設定好了之後，我們回去再瀏覽一次https的網頁
※因為fiddler要抓取localhost的流量需要特別的設定，這裡用一個最簡單的設定方法：將要瀏覽的網址改成https://localhost.fiddler:5001

當你瀏覽https://localhost.fiddler:5001時，會發現網址自動變成http://localhost:5000，並且會發現原先被阻擋的css也能順利載入了

---

結語：
基於安全因素，瀏覽器阻擋了一些資源的載入，進而對使用者造成了影響。
身為一個使用者，我們無法直接修改伺服器端的設定，所以只能利用一些手段來繞過這些限制。


目前這種作法有一個很大的缺點就是在瀏覽網頁時，Fiddler必須同時開啟。這對瀏覽網頁來說是個不小的負擔，我常常會瀏覽到一半發現網頁又跑版時，才想到Fiddler忘記先開啟。下一篇將會介紹另外神奇的方式，讓Fiddler只有在必要時才開啟。


後話：
將https轉成http或許是一個很罕見的例子。不過同樣的技術可以反過來使用：將http導成https，這可以用在準備將網站掛上https前的測試。因為有一些問題或許是在真正上線時才會暴露出來，例如本文所說的混合內容、或是網站有使用非安全性的ws協定，都可能導致些原先的網站改成使用https後會出現問題。