Chromeで混合コンテンツが段階的に警告・ブロックされる前にやっておくこと

SSLサーバ証明書を設定してサイト全体をhttpsで表示させることが標準になった今、各ブラウザは、安全でない混合コンテンツに対して警告表示やダウンロードをブロックするなど、ますます厳しく対応していく流れになっています。

混合コンテンツとは

SSL設定を行うと通信が暗号化され「https://」でアクセスできますが、httpsのページ内に、通信が暗号化されずに参照先パスが「http://」となっている画像や動画、外部ファイルなどが読み込まれる状態のことを混合コンテンツ(Mixed Contents)と言います。このような状態では、残念ながらページ全体のセキュリティは低下してしまいます。

Google社は、すでに昨年Chromeで混合コンテンツに対し徐々にブロックしていく方針を発表しています。

HTTPS の Mixed Contents と決別する

現在のChromeのバージョンは80ですが、Chrome 81(2020年3月リリース)以降では、すべての混合コンテンツのダウンロードについて、コンソールに警告メッセージが表示され、Chrome 86(2020年10月リリース)以降では、すべての混合コンテンツのダウンロードがブロックされるようです。

混合コンテンツのダウンロードに対する段階的な制限については、以下で詳しく案内されています。

Google Chrome で安全でないダウンロードからユーザーを保護する

ある日突然、画像や埋め込んだコンテンツが表示されなくなった…なんてことにならないよう、混合コンテンツがないかどうかを確認しておきましょう。

アドレスバーで保護されているかどうかを確認する

混合コンテンツがない状態

アドレスバーに鍵マークが表示されて、そのマークをクリックすると「この接続は保護されています」と表示されます。 これが正常な状態です。

混合コンテンツがある状態

SSL接続しているにも関わらず、アドレスバーに「保護されていない通信」と表示され、その部分をクリックすると「このサイトへの接続は完全には保護されていません」となっている場合は、混合コンテンツがある状態です。

画像や動画、外部ファイルなどの参照先パスが 「http://」となっているコンテンツを探してパスを修正する必要があります。

そもそもhttpsで接続していない状態

ちなみに、アドレスバーに「保護されていない通信」と表示され、その部分をクリックすると「このサイトへの接続は保護されていません」と表示されている場合は、そもそもSSL設定ができていないか、SSL設定をしていても「http://~」 によるアクセスをすべて自動的に「https://~」へ転送するための設定ができていないことが考えられます。

「.htaccess」ファイルに転送(301リダイレクト)の記述を追加しているか、WordPressのダッシュボードの「一般設定」で、WordPress アドレス (URL)とサイトアドレス (URL)が「https//~」となっているかどうかを確認する必要があります。

デベロッパーツールで混合コンテンツを確認する

Chromeでは、F12キー( Macは command + shift + i )を押してデベロッパーツールを表示し、Consoleタブで確認できます。

参照先パスが「http://」ではじまるURLを確認し 、例えば画像の場合は、再度同じ画像をアップロードし直すことでhttpsに変更することができますが、大量にある場合は、一括でhttpsに置換するなどの作業が必要になってきます。

ワンクリックでSSL化できるプラグイン Really Simple SSL

WordPressでは、「Really Simple SSL」などプラグインを利用してみるのもよいかと思います。

このプラグインは、参照先パスをhttpsに変更し、「http://~」にアクセスすると自動的に「https://~」へ転送する設定もワンクリックでできる便利なプラグインです。

この機会に運用されているサイトの全ページを見直し、混合コンテンツが残っていないかどうかをチェックしてみてはいかがでしょうか?

Follow me!

Author Profile

ササキ カオリ
ササキ カオリ
某レンサバ会社に時々勤務しつつ、株式会社ベクトルにてWordPressの修行中。今はチームで働くのが楽しいフリーのWEBデザイナー&フォトグラファー。Instagramは毎日postしていて800日以上継続中。

初心者でも簡単!無料WordPressテーマ

100%GPL / 商用利用可能

Lightning は WordPress公式ディレクトリに登録されているカスタマイズ性の高いテーマです。
デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

VWSオンラインコミュニティー

オンラインコミュニティでは、より良いテーマ・プラグイン開発のため、機能改善・追加要望などの書き込み大歓迎です!
ユーザー同士の交流や意見交換の場としてもお気軽にご参加ください。
※質問はフォーラムでのみ対応となります。