修正複合型內容

Jo-el van Bergen
Jo-el van Bergen
X
Rachel Andrew

為網站提供 HTTPS 支援是保護網站和使用者免於遭受攻擊的重要步驟，但混合內容可能會使這項保護措施失效。如「什麼是混合內容？」一文所述，瀏覽器會封鎖越來越多不安全的混合內容。

本指南將示範修正現有混合內容問題的技巧和工具，並防止新問題發生。

造訪網站找出混合內容

在 Google Chrome 中造訪 HTTPS 網頁時，瀏覽器會在 JavaScript 控制台中以錯誤和警告的形式，提醒您網頁含有混合內容。

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

被動混合內容範例會產生下列警告。 如果瀏覽器能在 https 網址找到內容，就會自動升級並顯示訊息。

Chrome 開發人員工具顯示偵測到混合內容並升級時的警告

系統會封鎖有效複合型內容，並顯示警告。

Chrome 開發人員工具顯示封鎖有效混合內容時出現的警告

如果發現網站上的 http:// 網址出現這類警告，請修正網站來源中的問題。建議您列出這些網址，以及找到這些網址的網頁，以便修正問題。

找出網站中的混合內容

您可以直接在原始碼中搜尋混合內容。在來源中搜尋 http://，找出包含 HTTP 網址屬性的標記。 請注意，錨點標記 (<a>) 的 href 屬性中含有 http://，通常不是混合內容問題，但稍後會討論一些值得注意的例外狀況。

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

修正複合型內容

在網站來源中找到混合內容後，請按照下列步驟修正問題。

如果收到主控台訊息，指出資源要求已從 HTTP 自動升級為 HTTPS，您可以安全地將程式碼中資源的 http:// URL 變更為 https://。您也可以在瀏覽器網址列中將 http:// 改為 https://，然後嘗試在瀏覽器分頁中開啟網址，確認資源是否能安全存取。

如果無法透過 https:// 取得資源，請考慮下列其中一種做法：

  • 如果可用的資源來自其他主機，請一併納入。
  • 如果法律允許，請直接在網站上自行下載及代管內容。
  • 從網站中完全排除該資源。

修正問題後，請查看當初發現錯誤的頁面，確認錯誤不再出現。

注意標記用法是否符合標準

請注意網站上非標準的代碼使用方式。 舉例來說，錨點 (<a>) 標記網址不會導致混合內容錯誤，因為這類網址會讓瀏覽器前往新網頁。因此通常不需要修正。不過，部分圖片庫指令碼會覆寫 <a> 標記的功能，並將 href 屬性指定的 HTTP 資源載入網頁上的燈箱顯示器，導致複合型內容問題。

大規模處理複合型內容

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

內容安全政策

內容安全政策 (CSP) 是一種多用途的瀏覽器功能，可用於大規模管理混合內容。您可以使用 CSP 報告機制追蹤網站上的混合內容，並提供強制執行政策，藉由升級或封鎖混合內容來保護使用者。

如要為網頁啟用這些功能，請在伺服器傳送的回應中加入 Content-Security-Policy 或 Content-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 或 Mixed Content Scan。

升級不安全的要求

Browser Support

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

Source

瀏覽器開始升級並封鎖不安全的要求。 您可以使用 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> 文件，確保整個網頁都受到保護。