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


  1. Staff Blog
  2. WordPress
  3. 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://~」へ転送する設定もワンクリックでできる便利なプラグインです。

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

この記事を書いた人

ササキ カオリ
ササキ カオリ
株式会社ベクトルでリモートワークしながら某レンタルサーバー会社にも時々勤務しているパラレルワーカーです。WordCamp Osaka 2019登壇しました。フジロックが好き。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP