混合コンテンツとは？今後行うべき混合コンテンツ対策について詳しく解説！【2020最新版】

みなさま、こんにちは！
今回はセキュリティに関する重要なお話となります。
ご利用のサーバーにSSLサーバー証明書を導入したにも関わらず、Webサイトを表示してみると、Webブラウザのアドレスバーに「保護されていない通信」などの警告メッセージが表示されているということはないですか？

また、Webブラウザのバージョンアップをすると以前はWebサイト表示に問題がなかったのに、ページの一部が表示されなくなり、ページレイアウトが崩れた表示になったなどのトラブルにあったことはないでしょうか？
どうしてSSLサーバー証明書を導入しているのに、こんな表示がでてしまうのでしょうか？
もしかすると原因は「混合コンテンツ」かもしれません。
「混合コンテンツ」は対応をしていないと、ご利用のWebサイトが表示されなくなる可能性があり非常に重要な問題となりますので、詳しく解説していきたいと思います。

１．Webサイトの画像、動画などのコンテンツがブロックされてしまう？！

Google社は、2020年4月リリースしたChrome81より混合コンテンツ（Mixed Content、ミックスコンテンツ）をブロックしていく方針を発表しています。
これは、サイト内にあるhttps（暗号化）に対応していない画像や動画などのファイルがある場合、ブロックされ表示がされなくなるというものです。
特に【Google Chrome 88】からは画像、音声、動画、テキストを含めすべてのhttps（暗号化）に対応していないファイルがブロックとなります。
以下、ブロックの詳細について画像を交えて解説します。 Google Chromeの混合コンテンツに対するブロック動作とバージョンの予定はGoogle公式より下記の予定となっています。
■Google Chromeの混合コンテンツに対するブロック動作とバージョンの予定

【Google Chrome 85】2020年9月にリリース ・混合コンテンツである画像が存在する場合アドレスバーに「保護されていない通信」と警告メッセージを表示 ・コンソール画面より混合コンテンツの箇所について警告メッセージを表示 ※Google Chrome 87までは同じ警告表示の予定 【Google Chrome 86】2020年10月にリリース予定 「お問い合わせや」「注文フォーム」などのWebフォームについても、Webフォームの入力画面はhttps（暗号化）されていても、送信先が暗号化されていないHTTP接続の場合は下記警告が表示され、利用者に送信するか最終的な確認を行う。 【Google Chrome 88】2021年1月にリリース予定 ・すべての混合コンテンツをブロック 例えば、こんな風に。 混合コンテンツはブロックされます。
ブロックにより混合コンテンツを排除したため、 アドレスバーは保護された通信を意味する【 鍵アイコン】を表示させます。

２．混合コンテンツとは

では、混合コンテンツとは何か？
放置した場合どうなるのか、具体的に解説していきます。
混合コンテンツとは、常時SSL化にして暗号化（SSL/TLS）によるHTTPS接続で表示させるよう作成されているが、暗号化されていないHTTP接続で画像、動画、スクリプトなどのコンテンツを読み込もうとするWebサイトを指します。
ミックスコンテンツ(Mixed Content)と呼ばれることもあります。
混合コンテンツの状態で放置されたWebサイトは、セキュリティの観点から危険な状態となります。
例えば、混合コンテンツの読み込みによって、http配信されている株価チャートが改ざんされ投資家を欺くことになってしまう、不審なスクリプトを埋め込まれサイトを閲覧した端末がウイルスに感染してしまう、等といった攻撃を受けてしまう可能性がでてきます。

３．ChromeからのブロックによるWebサイトへの影響（困ること）は？

Google社は危険な状態の混合コンテンツからChromeユーザーを保護すべく、暗号化されていないhttp配信コンテンツの、本格的な根絶を目指していくようです。
混合コンテンツの自動ブロックにより、Webサイト側で以下影響を受ける可能性が考えられます。
[Webサイトの低品質評価、ならびに機会損失] ・Googleからの低品質評価を受け、Webサイト検索順位が下がるなどの影響 ・SSL化されたWebサイトであるにも関わらず、一部コンテンツ(SNSや広告系CDNなど外部コンテンツも含む)によって安全性が失われ、Webサイト閲覧数に影響 [売り上げ減少] ・ECサイトでのコンテンツ販売への影響 【Google Chrome 88】からは完全に混合コンテンツをブロックとなるためWebサイトの混合コンテンツ対策は必須となってきます。
例えば、画像がブロックされたWebコンテンツの場合、 Webコンテンツ管理者は、「ブロック＝表示されない」状態については、画像ブロックに対する警告は表にはでないので、気づきにくい状況となります。
長期間画像のブロックの存在に気づかないことも考えられますので、早めの混合コンテンツ対策が必要となります。
もし、気づかず放置状態の場合、利用者は、アドレスバーには「保護された通信」を示す鍵アイコンが表示されているので、もともと安全なWebコンテンツと判断してブロックされた画像の存在もしらずに閲覧します。
見てもらいたかったコンテンツとは別ものを閲覧される、そのWebサイトがECサイトの場合は商品がない状態のサイトになっていたなど、考えただけでも恐ろしいですよね。
また、混合コンテンツに対してブロックの動きはGoogle Chromeだけでなく、各Webブラウザ（Firefox、Safari、Microsoft Edge）も同様の動きとなっています。
では、混合コンテンツ対策はどのようすればよいのか、 確認方法と合わせてご紹介します。

４．混合コンテンツの確認と対策（HTMLのWebサイト）

混合コンテンツ対策するには、まずご利用のWebコンテンツに混合コンテンツの有無を確認する必要があります。 ここでは、HTMLで作成したWebサイトが「混合コンテンツになっていないか確認」「混合コンテンツを修正」する方法を各Webブラウザ（Google Chrome、Firefox、Safari、Microsoft Edge）でご紹介いたします。
【Google Chromeの場合】 混合コンテンツのWebサイトを、実際に公開してみたのが下の画像になります。
Chromeで閲覧すると、アドレスバーの左に「保護されていない通信」と警告がでています。
「保護されていない通信」をクリックすると、その下側にも情報が表示されます。
画像が混合コンテンツになっていそう、という目星がつきました。
「証明書（有効）」とありますので、SSLサーバー証明書のインストールや有効期限には問題がないことも分かります。
「保護されていない通信」をクリックしても「画像」など具体的なファイルの種類が表示されず、何が問題かわからない場合も、この次の操作で詳しい情報を確認できますので大丈夫です。
それでは、さらに詳しく確認するために、Windowsのキーボードで「F12」キーを押下してみましょう。
一見ブロックされているコンテンツがなく、アドレスバーの左に鍵のマークがついているページもキーボードの「F12」キーを押下して確認をお願いします。 ブラウザの右側または下側（コンソール）に英語で警告メッセージが表示され、どこに問題があるのか教えてくれています。

Mixed Content: The page at 'https://********.***/' was loaded over HTTPS, but requested an insecure image 'http://********.***/img/cat1.jpg'. This content should also be served over HTTPS.

（和訳）

混合コンテンツ：「https://********.***/」のページはHTTPS経由で読み込まれましたが、安全でない画像「http://********.***/img/cat1.jpg」をリクエストしました。
このコンテンツはHTTPS経由でも提供される必要があります。

画像リンクに、https化されていない、http://～の記述があり、混合コンテンツになっているのが原因だと指摘されています。
上記でMixed Contentと表示されなければ、混合コンテンツではない可能性が高くはありますが、念のため、ソースの確認もしておくと確実です。
Webサイト上で右クリックし「ページのソースを表示」を選択し、ページ内を「http://」で検索します。
コンソールで指摘された通り、http://********.***/img/cat1.jpgへの画像リンクがあります。
2つの画像のうち、左側はhttps化されておらずhttp://～、右側は問題なくhttps://～になっています。
ここまでChromeで見てきましたが、他の主要ブラウザでも混合コンテンツに対する警告やブロックは行われています。
確認方法もおおむね同じです。
【Firefoxの場合】 Firefoxの場合は、Windowsのキーボードで「F12」キーを押下するか、右クリックして「要素を調査」を選択します。
画面下側に「開発ツール」が表示されます。
続いて「コンソール」をクリックします。
混在表示コンテンツ＝混合コンテンツです。
どのURLを指定するときに混合コンテンツになってしまったのか、ここで調べることができます。
また、Webサイト上で右クリックし、「ページのソースを表示（V）」をクリックで、ソースを見ることもできます。
ソース内を「http://」で検索すると、混合コンテンツがどこにあるか見つけることができます。
【Safariの場合】 Safariの場合は、事前に「Webインスペクター」と呼ばれる画面が表示される設定になっているか、確認が必要です。
画面左上「Safari」をクリックし「環境設定（Preferences...）」を選択します。
設定画面が開いたら「詳細（Advanced）」を選択します。 「メニューバーに"開発"メニューを表示（Show Develop menu in menu bar）」にチェックを入れる、もしくはチェックが入っていることを確認して設定画面を閉じます。 「Webインスペクター」の開き方はいくつかあります。 ・Macのキーボードで「option」「command」「I」を同時に押す ・メニューバーで「開発（Develop）」-->「Webインスペクターを接続（Connect Web Inspector）」を選択する ・メニューバーで「ツール」-->「[ウェブ開発]」-->「インスペクター」を選択する ・ウェブページ上で要素を右クリックして、「[要素を調査]」を選択する 上記からご自分の環境で利用できるものをお選びください。 「Webインスペクター」は画面下部に表示されます。 「コンソール（Console）」をクリックすると、混合コンテンツになっていることを指摘するメッセージが表示されます。 この画面で「リソース（Resources）」をクリックするか、メニューバーで「開発（Develop）」-->「ページのソースを表示(Show Page Source)」を選択すると、ソースからhttp://を検索することもできます。 【Microsoft Edgeの場合】 Microsoft Edgeの場合はWindowsのキーボードで「F12」キーを押下するか、画面上で右クリックして「ソースの表示」を選択します。
画面右側に「開発者ツール」が表示されます。
表示される情報が多いので、こんな風に画面が小さいとごちゃごちゃして少し見にくいかもしれません。
見にくい場合は、ブラウザのサイズを大きくしたり、仕切りになっている部分をドラッグしたりして、調整してください。
上部メニュー「コンソール」をクリックすると、どこが混合コンテンツ（Mixed-Content）になっているのか指摘するメッセージが表示されます。
上部メニュー「デバッガー」をクリックし、ファイル名を選択するとページのソースが表示されます。
ソース内を「http://」で検索すると、混合コンテンツを見つけることができます。
混合コンテンツの解消方法は、http://～をhttps://～に修正することです。
混合コンテンツの原因が見つかったら、対象のページのHTMLファイルをPC上のメモ帳やテキストエディターで開き、該当箇所がhttpsになるようsを書き加えます。
修正箇所がたくさんある場合は、置換機能も活用するとよいでしょう。
Windowsアプリのメモ帳では、メニューバーで「編集（E）」をクリックし、「置換（R）」を選択します。

検索する文字列（N）:http://
置換後の文字列（P）:https://

上記のように入力し、「置換して次に（R）」や「すべて置換（A）」をクリックすると、1つずつ入力しなくて済みます。
ただし、外部のSSL非対応サイトへのリンクを貼っている場合は、一緒に書き換えてしまわないよう注意が必要です。
ホームページ作成ソフトをご利用の場合は、各ソフトのガイドやマニュアルもご確認ください。
修正したHTMLファイルをサーバー上にアップロードしなおし、Webサイトにアクセスしてみます。
アドレスバー左に鍵のマークが表示され、キーボードの「F12」キーを押下しても警告はでません。
これなら、Webサイト訪問者にも安心して見ていただけます！ 修正後、すぐに表示が切り替わらない場合は、画面の更新(再読み込み)やブラウザのキャッシュ削除、違う端末やブラウザでの確認もお試しください。

５．混合コンテンツの対策（WordPress）

WordPressでのhttp://からhttps://～への修正は、たくさんの修正箇所がある場合も一括で修正してくれる、便利な無料プラグインがいくつも公開されているのでぜひご活用ください。
今回は「Really Simple SSL」の利用方法をご紹介いたします。
まずはWordPressのダッシュボードにログインし、左側メニューから「プラグイン」をクリック。
次にページ上部「新規追加」をクリックします。
右上のキーワード入力欄に「Really Simple SSL」と入力すると、下側にキーワードと一致するプラグインが表示されるので「Really Simple SSL」枠内の「今すぐインストール」をクリックします。
インストールが完了すると「有効化」ボタンが現れるのでクリックします。
確認画面に変わりました。
実際に運用中のWebサイトの場合は、画面に表示された内容に該当しないかの確認とバックアップもお忘れなく。
準備ができていれば「はい、SSLを有効化します。」をクリックします。
有効化完了画面になりました。
もしすでに「Really Simple SSL」をインストールされている場合や、インストール後にいったん作業を中断し、後から有効化する場合は、WordPressダッシュボードにログインした後、左側メニュー「プラグイン」を選択し、プラグイン名「Really Simple SSL」のすぐ下に表示される「有効化」をクリックするだけです。
有効化が完了したら、再度WordPressにアクセスしてみます。
アドレスバー左に鍵のマークが表示され、キーボードの「F12」キーを押下しても警告はでません。
これなら、Webサイト訪問者にも安心して見ていただけます！ 修正後、すぐに表示が切り替わらない場合は、画面の更新(再読み込み)やブラウザのキャッシュ削除、違う端末やブラウザでの確認もお試しください。

６．最後に

みなさま、最後までご覧いただき、誠にありがとうございました！
Webブラウザの混合コンテンツに対する警告・ブロックは、今後ますます厳しくなっていく予定です。
また、Google社によりますと 、すでにGoogle Chromeユーザーは、すべてのメジャーなプラットフォームでブラウジング時間の90%以上をhttpsで費やしているとの統計を示しておりますので、Web全体においてSSL/TLS化が進んでいることが伺えます。
しかし、SSL/TLS化が進んでいるにも関わらず、混合コンテンツがあるために、自動ブロックの影響を受けてしまうのはとても残念なことです。
Webサイトの制作、運営上の都合で、すぐに混合コンテンツ対策が行えない方々もいるのではないかと思います。
仮に対策が遅れたとしても、Webサイトがダウンすることはないですが、自動ブロックの影響や昨今のセキュリティ事情を考慮すると、早急に対策を打つことをお勧めいたします。