修正複合型內容

Jo-el van Bergen

Rachel Andrew Technical Writer

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

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

造訪網站找出混合內容

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

在「什麼是混合內容？」一文中，您可以查看多個範例，以及 Chrome 開發人員工具如何回報問題。

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

主動混合內容會遭到封鎖，並顯示警告。

如果網站上的 http:// 網址出現這類警告，請務必修正網站原始碼。建議您列出這些網址和找到這些網址的網頁，以便在修正時使用。

注意：混合內容錯誤和警告只會顯示在您目前查看的頁面上，且每次前往新頁面時，JavaScript 控制台都會清除。也就是說，您必須逐一查看網站的每個網頁，才能找出這些錯誤。

找出網站中的混合內容

您可以直接在原始碼中搜尋混合內容。在原始碼中搜尋 http://，並找出包含 HTTP 網址屬性的標記。 請注意，在錨定標記 (<a>) 的 href 屬性中加入 http:// 通常不會造成混合內容問題，但有幾個例外情況，我們會在後續章節討論。

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

修正複合型內容

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

如果控制台訊息指出資源要求已自動從 HTTP 升級為 HTTPS，您可以放心地將程式碼中資源的 http:// 網址變更為 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)。

注意：新式瀏覽器會強制執行收到的所有內容安全政策。瀏覽器在回應標頭或 <meta> 元素中收到的多個 CSP 標頭值會合併，並強制執行為單一政策；回報政策也會合併。政策會透過交集的方式合併，也就是說，第一項政策之後的每項政策只能進一步限制允許的內容，而不能擴大範圍。

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

你可以使用內容安全政策，收集網站上的混合內容報表。如要啟用這項功能，請在網站的回應標頭中加入 Content-Security-Policy-Report-Only 指令。

回應標頭：

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

注意：report-uri 回應標頭即將淘汰，改用 report-to。

Browser Support

• 70
• 79
• 149
• 16.4

Source

您可以同時提供這兩個標頭，如果瀏覽器支援 report-to，系統會忽略 report-uri。

每當使用者造訪網站上的網頁時，瀏覽器就會將違反內容安全政策的 JSON 格式報表傳送至 https://example.com/reportingEndpoint。在這種情況下，只要透過 HTTP 載入子資源，系統就會傳送報告。這類報表會列出發生政策違規的網頁網址，以及違反政策的子資源網址。 只要將回報端點設為記錄這些報告，就能追蹤網站上的混合內容，不必親自造訪每個網頁。

但有兩點需要注意：

• 使用者必須透過可解讀 CSP 標頭的瀏覽器造訪您的網頁。大多數新式瀏覽器都是如此。
• 你只會收到使用者造訪網頁的報告。因此，如果網站有部分網頁的流量不高，可能需要一段時間才能取得整個網站的報表。

內容安全性政策指南提供更多資訊和範例端點。

CSP 回報機制的替代方案

如果網站是由 Blogger 等平台代管，您可能無法修改標頭和新增 CSP。相反地，可行的替代方案是使用網站檢索器，為您找出整個網站的問題，例如 HTTPSChecker 或複合型內容掃描。

升級不安全的要求

Browser Support

• 44
• 17
• 48
• 10.1

Source

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

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

舉例來說，如果網頁包含含有 HTTP 網址的圖片標記，例如 <img src="https://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> 文件，確保整個網頁都受到保護。