混在コンテンツエラー
Cloudflareに追加されたドメインはSSL証明書を受け取り、HTTPS経由でトラフィックを提供できます。しかし、Cloudflareの使用を開始した後、一部の顧客はHTTPSトラフィックを最初に提供する際に、コンテンツが欠落しているか、ページのレンダリングに問題があることに気づきます。
通常、この問題はHTTPSで提供されるウェブページからHTTPリソースへのリクエストが原因です。たとえば、ブラウザにhttps://example.comと入力すると、ページにはHTML内でHTTP経由の画像参照が含まれています：<img src="http://example.com/resource.jpg">。
通常、ウェブサイトがすべてのリソースをHTTPS経由で安全に読み込む場合、訪問者はブラウザのアドレスバーにロックアイコンを表示します。
これは、サイトが機能するSSL証明書を持ち、サイトによって読み込まれるすべてのリソースがHTTPS経由で読み込まれていることを示しています。緑のロックは、訪問者に接続が安全であることを保証します。混在コンテンツの症状の1つは、緑のロックアイコンの代わりに異なるアイコンが表示されることです。
ほとんどの最新のブラウザは、安全なHTTPSページでのHTTPリクエストをブロックします。ブロックされたコンテンツには、画像、JavaScript、CSS、またはページの見た目や動作に影響を与えるその他のコンテンツが含まれる可能性があります。
各ウェブブラウザは、ウェブサイトの混在コンテンツについて訪問者に警告するために異なる方法を使用します。これには以下が含まれる可能性があります：
- URLバーの横にある黄色の三角形または情報シンボル
- 「安全なコンテンツ」に言及するメッセージ
混在コンテンツの警告の場合、ウェブブラウザはリソースを読み込みますが、ユーザーはURLにロックアイコンを表示しません。警告メッセージはブラウザのデバッグツール内に表示されます：
混在コンテンツのエラーの場合、ブラウザは安全でない接続経由でリソースを読み込むことを拒否します：
これらの問題を特定するためにブラウザのデバッグツールを使用する方法についての情報は、Chrome ↗およびFirefox ↗のドキュメントにあります。あるいは、ページソースを表示して、他のリソースへのパスのために*http://*の特定の参照を見つけることができます。
混在コンテンツエラーを解決するための2つの方法があります。
- HTTPまたはHTTPSプロトコルを指定せずに、HTMLソース経由ですべてのリソースを読み込みます。
たとえば、
http://domain.com/path/to.fileの代わりに/domain.com/path/to.fileを使用します。 - コンテンツ管理システムに応じて、HTTPリソースをHTTPSに自動的に書き換えるプラグインを確認します。Cloudflareは、自動HTTPS書き換えを介してそのようなサービスを提供しています。
Cloudflareは、WordPressユーザーにCloudflare WordPressプラグイン ↗をインストールし、プラグイン内で自動HTTPS書き換えオプションを有効にすることを推奨しています。あるいは、CloudflareはSSL不正コンテンツ修正ツール ↗またはReally Simple SSL ↗プラグインを推奨し、HTTPをHTTPSに自動的に置き換えることができます。