Mixed content總結

本文介紹下Mixed content，主要內容以下：

1. 主題來源；
2. 什麼是mixed content；
   2.1 mixed content分類；
   2.2 瀏覽器策略；
3. 如何自查是否有mixed content；
4. 開發時如何儘可能避免mixed content。

主題來源

原先並不知道前端還有mixed content這個詞，最近開發項目的時候，測試環境沒有問題，發佈到線上的時候發現頁面沒有問題，可是控制檯有告警信息。因而，抽了個時間研究了下，而後就發現了mixed content這個詞。具體告警信息以下：

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure element '<URL>'. This request was automatically upgraded to HTTPS, For more information see <URL>

點擊報錯箭頭，能夠看到更詳細的信息：

Mixed Content: The page at ' https://...' was loaded over HTTPS, but requested an insecure element ' http://...' . This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/201...

而後根據告警信息通過一些資料查找，找到了問題所在，並輸出成本篇文章。

這裏不得不感嘆一下，chrome的錯誤提示作的挺好的，看完報錯信息，基本就知道是啥問題了。

什麼是mixed content

當初始HTML頁面是經過https請求的時候，若是該頁面請求的其餘資源，好比圖片，腳本資源等，是經過http請求的，那麼這個頁面就是一個mixed content的頁面。

這裏，強調初始HTML頁面，而不是HTML頁面的緣由是，頁面裏面經過iframe也是能夠內嵌html頁面的。經過iframe內嵌的html頁面不屬於初始HTML頁面。

爲何會衍生出來這個詞呢？是由於這樣的頁面是不安全的，是須要開發人員去規避的一個事情，因此把這種頁面單獨命名出來，引發開發人員重視。

Mixed content分類

Mixed content分爲兩類：mixed passive content和mixed active content。我的感受這兩類應該是按照受攻擊的影響程度來區分的。passive的影響要小一些兒，active的影響要大一些兒。

Mixed passive content主要包括圖片、視頻、音頻資源等；Mixed active content主要包括腳本、樣式表、iframe等。

瀏覽器策略

1. 對於Mixed active content，瀏覽器不會加載；
2. 對於Mixed passive content，瀏覽器可能不會加載；也可能會自動把資源的協議升級到https，而後加載，若是https資源加載失敗，資源就顯示不出來。

對於Mixed passive content，瀏覽器的最終目標仍是和處理Mixed active content同樣，不會加載。只不過會有一個過渡期，因此若是頁面中存在mixed passive content，仍是儘快升級的好，萬一哪天瀏覽器不支持了，頁面上的該部份內容就顯示不出來了。

如何自查是否有mixed content

拿chrome瀏覽器舉例，若是頁面中存在mixed content，chrome會在開發者工具的console面板中log出來。報錯信息和在前面主題來源中的差很少，包括報錯緣由、報錯資源、處理方式（不加載仍是自動升級）以及其餘的幫助信息。

開發時如何儘可能避免mixed content

這裏總結了下避免mixed content的方法，主要是從資源的角度考慮：

1. 資源部署http和https兩個版本；

2. 加載資源的時候區分http和https環境：

   • 在腳本里面能夠經過window.location.protocol判斷當前環境，而後去作不一樣的處理；
   • 經過script加載資源的時候，src屬性能夠把協議去掉，直接以'//'開頭。好比src="https://www.baidu.com/..."能夠直接換爲src="//www.baidu.com/..."，這樣當該腳本是在http網站被加載的時候，加載的就是"http://www.baidu.com/..."，在https網站被加載的時候，加載的就是"https://www.baidu.com/..."。

總結

但願你們能有所收穫，若有錯誤，歡迎留言討論。

參考資料

1. No More Mixed Messages About HTTPS
2. What is mixed content?
3. MDN mixed content