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

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

概述

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

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

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

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

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

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

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

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

Firefox

您會(huì)看到 URL 旁邊有一個(gè)提醒注意的黃色三角形：

IE（版本 10）

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

Microsoft Edge

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

Chrome

您會(huì)在 URL 旁邊看到信息符號(hào)或警告符號(hào)：

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

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

有關(guān)使用瀏覽器調(diào)試工具查找這些問題的信息，請(qǐng)參閱 Chrome 和 Firefox 的文檔?；蛘?，您可以查看頁(yè)面源并查找 http:// 的特定參考，以獲取其他資源的路徑。

解決方案

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

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

     //domain.com/path/to.file

     代替

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

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

Cloudflare 建議 Wordpress 用戶安裝 Cloudflare WordPress 插件，并在插件中啟用 Automatic HTTPS Rewrites 選項(xiàng)。或者，Cloudflare 建議使用 SSL Insecure Content Fixer 或 Really Simple SSL 插件自動(dòng)將 HTTP 替換為 HTTPS。