Cloudflare に追加したドメインは SSL 証明書を受け取り、HTTPS でトラフィックを配信できます。ただし Cloudflare の利用開始後、初めて HTTPS で配信すると、コンテンツ欠けやページの表示崩れに気づくことがあります。
典型的な原因は、HTTPS で配信している Web ページから HTTP リソースを要求していることです。たとえばブラウザに https://example.com と入力したとき、HTML 内の画像参照が <img src="http://example.com/resource.jpg"> のように HTTP になっている場合です。
サイトがすべてのリソースを HTTPS で安全に読み込んでいると、訪問者のブラウザのアドレスバーに鍵アイコンが表示されます。
これは、サイトに有効な SSL 証明書があり、読み込むリソースがすべて HTTPS であることを示します。緑色の鍵は、接続が安全だと訪問者に伝えます。混合コンテンツの症状 のひとつは、緑色の鍵の代わりに別のアイコンが出ることです。
最近のブラウザの多くは、安全な HTTPS ページ上の HTTP リクエストをブロックします。ブロック対象には、画像、JavaScript、CSS、そのほかページの見た目や動作に影響するコンテンツが含まれます。
混合コンテンツの警告方法はブラウザごとに異なります。次のような表示になることがあります。
- URL バーの横に黄色い三角または情報アイコン
- 「セキュアなコンテンツ」などに言及するメッセージ
混合コンテンツの警告では、ブラウザはリソースを読み込みますが、URL バーに鍵アイコンは出ません。警告メッセージはブラウザのデバッグツールに表示されます。
混合コンテンツエラーでは、ブラウザは安全でない接続でのリソース読み込みを拒否します。
デバッグツールでこれらの問題を探す手順は、Chrome ↗ と Firefox ↗ のドキュメントを参照してください。またはページソースを開き、ほかのリソースへのパスに http:// がないか探します。
混合コンテンツエラーの解消方法は 2 つあります。
- HTML ソースですべてのリソースを、HTTP または HTTPS プロトコルを指定せずに読み込みます。
たとえば
http://domain.com/path/to.fileの代わりに/domain.com/path/to.fileを使います。 - 利用中のコンテンツ管理システムに応じて、HTTP リソースを HTTPS へ自動で書き換えるプラグインを確認します。Cloudflare では Automatic HTTPS Rewrites で同様の機能を提供しています。
WordPress を使っている場合は、Cloudflare WordPress plugin ↗ をインストールし、プラグイン内の Automatic HTTPS rewrites オプションを有効にすることを推奨します。