Cloudflare：如何解決混合內(nèi)容錯誤？

解決混合內(nèi)容錯誤，以確保訪問者的 Web 瀏覽器不會阻止通過 HTTPS 提供的 HTTP 資源。

概述

添加到 Cloudflare 的域會收到 SSL 證書，并可以通過 HTTPS 提供流量。但是，在開始使用 Cloudflare 后，一些客戶在首次提供 HTTPS 流量時會發(fā)現(xiàn)缺少內(nèi)容或頁面呈現(xiàn)問題。

通常，這個問題是由于通過 HTTPS 提供的網(wǎng)頁對 HTTP 資源的請求造成的。  例如，您在瀏覽器中鍵入 https://example.com，該頁面在 HTML 中包含通過 HTTP 到 <img src =“http://example.com/resource.jpg“> 的圖像引用。

通常，如果您的網(wǎng)站通過 HTTPS 安全地加載所有資源，則訪問者會在其瀏覽器的地址欄中觀察到一個鎖定圖標(biāo)（通常是綠色鎖）。

這表示您的站點具有可用的 SSL 證書，并且站點加載的所有資源都通過 HTTPS 加載。綠色鎖用于向用戶保證其連接是安全的。混合內(nèi)容癥狀之一是顯示不同的圖標(biāo)，而不是綠色鎖圖標(biāo)。

內(nèi)容呈現(xiàn)問題的其他原因是 Rocket Loader 和 Auto-Mini。  如果您沒有觀察到混合內(nèi)容錯誤，請測試禁用這兩個功能。

混合內(nèi)容出現(xiàn)的癥狀

大多數(shù)現(xiàn)代瀏覽器會阻止安全 HTTPS 頁面上的 HTTP 請求。被阻止的內(nèi)容可能包括影響頁面外觀或行為方式的圖像、JavaScript、CSS 或其他內(nèi)容。

以下是 Web 瀏覽器中針對所請求站點存在混合內(nèi)容的指示：

Firefox

您會看到 URL 旁邊有一個提醒注意的黃色三角形：

IE（版本 10）

您會看到有關(guān)“僅顯示安全內(nèi)容”的警告消息：

Microsoft Edge

您會看到警告消息“您只會看到安全的內(nèi)容”：

Chrome

您會在 URL 旁邊看到信息符號或警告符號：

如果出現(xiàn)混合內(nèi)容警告，則 Web 瀏覽器將加載資源，但用戶不會在 URL 中看到綠色鎖圖標(biāo)。瀏覽器的調(diào)試工具中會顯示警告消息：

如果出現(xiàn)混合內(nèi)容錯誤，則瀏覽器將拒絕通過不安全連接方式加載資源：

有關(guān)使用瀏覽器調(diào)試工具查找這些問題的信息，請參閱 Chrome 和 Firefox 的文檔?；蛘撸梢圆榭错撁嬖床⒉檎?http:// 的特定參考，以獲取其他資源的路徑。

解決方案

有兩種方法可以解決混合內(nèi)容錯誤。

1.通過 HTML 源加載所有資源，而無需指定 HTTP 或 HTTPS 協(xié)議。例如：

     //domain.com/path/to.file

     代替

     http://domain.com/path/to.file

2.根據(jù)您的內(nèi)容管理系統(tǒng)，檢查自動將 HTTP 資源重寫為 HTTPS 的插件。在 SSL/TLS 應(yīng)用中，Cloudflare 通過 Automatic HTTPS Rewrites 提供此類服務(wù)。

Cloudflare 建議 Wordpress 用戶安裝 Cloudflare WordPress 插件，并在插件中啟用 Automatic HTTPS Rewrites 選項?；蛘撸珻loudflare 建議使用 SSL Insecure Content Fixer 或 Really Simple SSL 插件自動將 HTTP 替換為 HTTPS。