HTTPS 網頁出現「blocked mixed content in browser」

當瀏覽器連線到一個 HTTPS 網站,但是瀏覽器網址旁邊出現了不安全的警告訊息,或是有部分內容被隱藏,可能是因為頁面裡面引用了未加密的 HTTP 外部資源,例如:

  1. 腳本(<script> 標籤)
  2. 樣式表(<link> 標籤)
  3. 圖片(<img><figure> 標籤)

 

這種情況在將網站從 HTTP 升級到 HTTPS 的時候經常出現,因為大多數時候我們都只升級 HTTP Server,但忘記 HTML 也要將所有 HTTP 連線改成 HTTPS。

一個簡單的做法是在 HTML <head></head> 標籤中加入下面這行:

1
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 

這一行的意思是將頁面內所有 HTTP 外部資源的連線自動升級為 HTTPS,但如果引用其它網域的外部資源,且該網域本身不支援 HTTPS 的話問題還是會存在的。


Reference: How can I allow Mixed contents (http with https) using content-security-policy meta tag? - Stack Overflow

comments powered by Disqus