修正複合型內容

為網站支援 HTTPS 是保護網站和使用者免於遭受攻擊的重要步驟,但混合內容可能會讓這項防護措施失效。瀏覽器會封鎖越來越多不安全的混合內容,詳情請參閱「什麼是混合內容?」一文。

本指南將說明如何使用技術和工具,修正現有的混合內容問題,並防止新問題發生。

在 Google Chrome 中造訪 HTTPS 網頁時,瀏覽器會在 JavaScript 主控台中以錯誤和警告的形式,提醒您複合型內容。

在「混合內容是什麼?」一文中,您可以找到許多範例,並瞭解如何在 Chrome 開發人員工具中回報問題。

被動混合內容的範例會顯示以下警告。如果瀏覽器能夠在 https 網址中找到內容,就會自動升級該內容,然後顯示訊息。

Chrome 開發人員工具顯示警告訊息,指出系統偵測到混合內容並升級

有效的複合型內容遭到封鎖,並顯示警告。

Chrome 開發人員工具顯示警告,指出已封鎖的混合內容

如果您在網站上發現類似以下的 http:// 網址警告,就必須在網站來源中修正這些警告。建議您將這些網址和找到這些網址的網頁列入清單,以便在修正時使用。

找出網站中的混合內容

您可以直接在原始碼中搜尋混合內容。在原始碼中搜尋 http://,並找出含有 HTTP 網址屬性的標記。請注意,在錨點標記 (<a>) 的 href 屬性中使用 http:// 通常不會造成混合內容問題,但後文會提到一些例外狀況。

如果您使用內容管理系統發布網站,在發布網頁時,系統可能會插入連往不安全網址的連結。舉例來說,圖片可以使用完整網址而非相對路徑。你必須在 CMS 內容中找出並修正這些問題。

修正複合型內容

一旦發現網站來源含有混合內容,請按照下列步驟修正。

如果您收到控制台訊息,指出資源要求已自動從 HTTP 升級為 HTTPS,您可以放心將程式碼中資源的 http:// 網址改為 https://。您也可以在瀏覽器網址列中將 http:// 變更為 https://,並嘗試在瀏覽器分頁中開啟網址,檢查資源是否可安全使用。

如果無法透過 https:// 取得資源,請考慮下列任一做法:

  • 加入其他主機的資源 (如果有)。
  • 如果您有合法權利,可以直接在網站上下載及代管內容。
  • 將資源從網站中完全排除。

問題修正後,請查看原本發生錯誤的頁面,確認錯誤不再出現。

請注意非標準代碼的使用方式

請留意網站上是否有非標準的代碼使用情形。舉例來說,錨點 (<a>) 標記網址不會導致混合內容錯誤,因為它會導致瀏覽器前往新頁面。這表示通常不需要修正。不過,部分圖片庫指令碼會覆寫 <a> 標記的功能,並將 href 屬性指定的 HTTP 資源載入至網頁上的燈箱顯示畫面,導致混合內容問題。

大規模處理混合型內容

上述手動步驟適用於較小的網站,但對於大型網站或有許多獨立開發團隊的網站,要追蹤所有載入的內容可能會很困難。為協助您完成這項工作,您可以使用內容安全政策指示瀏覽器通知混合內容,並確保網頁不會意外載入不安全的資源。

內容安全政策

內容安全政策 (CSP) 是一項多用途瀏覽器功能,可用於大量管理混合內容。CSP 回報機制可用於追蹤網站上的混合內容,並提供執行政策,透過升級或封鎖混合內容來保護使用者。

您可以在伺服器傳送的回應中加入 Content-Security-PolicyContent-Security-Policy-Report-Only 標頭,為網頁啟用這些功能。此外,您也可以在網頁的 <head> 部分使用 <meta> 標記,設定 Content-Security-Policy (但使用 Content-Security-Policy-Report-Only)。

使用內容安全政策找出混合內容

您可以使用內容安全政策,收集網站上的混合內容報表。如要啟用這項功能,請將 Content-Security-Policy-Report-Only 指令新增為網站的回應標頭。

回應標頭:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

每當使用者造訪您的網站網頁時,瀏覽器就會將任何違反內容安全性政策的內容,以 JSON 格式回報給 https://example.com/reportingEndpoint。在這種情況下,只要透過 HTTP 載入子資源,就會傳送報表。這些報表包含發生政策違規的網頁網址,以及違反政策的子資源網址。如果您將報表端點設為記錄這些報表,就能追蹤網站上的混合內容,而無需親自造訪每個網頁。

但請注意以下兩點:

  • 使用者必須透過支援 CSP 標頭的瀏覽器造訪您的網頁。這項規定適用於大多數新式瀏覽器。
  • 您只會取得使用者造訪的網頁報表。因此,如果您的網頁流量不多,可能需要一段時間才能取得整個網站的報表。

請參閱內容安全性政策指南,瞭解更多資訊和端點範例。

使用 CSP 回報的替代方案

如果您的網站是由 Blogger 等平台代管,您可能無法修改標頭和新增 CSP。相反地,你可以使用網站檢索器找出網站中的問題,例如 HTTPSChecker混合內容掃描

升級不安全的要求

瀏覽器支援

  • Chrome:44。
  • Edge:17。
  • Firefox:48。
  • Safari:10.1。

資料來源

瀏覽器開始升級並封鎖不安全的請求。您可以使用 CSP 指令,強制自動升級或封鎖這些素材資源。

upgrade-insecure-requests CSP 指令會指示瀏覽器在提出網路要求前,先升級不安全的網址。

舉例來說,如果網頁包含圖片標記,且該標記含有 HTTP 網址,例如 <img src="http://example.com/image.jpg">

瀏覽器會改為針對 https://example.com/image.jpg 提出安全要求,因此可避免使用者瀏覽混合內容。

您可以透過傳送含有此指令的 Content-Security-Policy 標頭來啟用這項行為:

Content-Security-Policy: upgrade-insecure-requests

或者,您也可以使用 <meta> 元素,在文件的 <head> 區段中內嵌相同的內嵌指令:

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

與瀏覽器自動升級功能一樣,如果無法透過 HTTPS 取得資源,升級要求就會失敗,且不會載入資源。這有助於確保網頁安全。upgrade-insecure-requests 指令會進一步執行自動瀏覽器升級作業,嘗試升級瀏覽器目前不支援的請求。

upgrade-insecure-requests 指令會依序套用至 <iframe> 文件,確保整個網頁都受到保護。