混合コンテンツのブロックについて

混合コンテンツを知っていますか

「混合コンテンツ」とは

あなたは混合コンテンツという言葉を知っていますか？

混合コンテンツ（Mixed Content）とは、WEBサイトのhttps化はしているのですが、中身の各要素（リソース）をhttpにて読込している（以下http経由と称します）サイトの事を指します。

要はhttps化が不完全なサイトの事ですね。

いまWEBサイトはどんどんSSL化（https化）が進んでいます。

GoogleによるとGoogle Chromeユーザーが利用する全ての大手の基幹WEBサイト（ポータルサイト等）の閲覧時間の、実に9割がhttpsによる読込をしているそうです。

それだけ大部分のWEBサイトがSSL化を進めてきているという事になりますね。

WEBサイトをSSL化するにあたり、混合コンテンツがある中途半端な状態で放置している意味は正直よくわかりませんが、そんなサイトも多いという事なのでしょう。

セキュリティ向上のために混合コンテンツをブロック

2019年10月3日にGoogleのSecurity Blogでこのような記事が公開されました。

No More Mixed Messages About HTTPS

Googleは以前よりインターネットのセキュリティを常に重視しています。

暗号化されセキュリティに強いhttpsへの移行を推進していますが、その方針をさらに強める発表を出したのです。

2019年12月にリリース予定のChrome 79以降、段階的にhttpの混合コンテンツをブロックするという計画です。

混合コンテンツは上の方で一度述べましたが、サイト自体はhttpsであるにもかかわらず、読み込む画像や動画スクリプトなどが暗号化されていない（httpで提供されている）もののことを指します。

ブロックする理由（リスク）

SSLのページでも触れましたが、Chromeでは完全にSSL化していないサイトを表示する場合、アドレスバーに「保護されていない」との注意が表示されるようになっています。

ただし混合コンテンツに関しては「保護されていない」警告は出すものの、それでもそのまま読込自体はしています。

つまり、初期値でブロックされているもの以外の表示自体はされているんですね。

これを悪用する事で、例えhttpsのSSL化されたサイトであってもhttpの部分に関して悪意のあるスクリプトを組み込ませる事が可能になってしまうんですね。

混合コンテンツの種類

混合コンテンツには「アクティブな混合コンテンツ」と「パッシブな混合コンテンツ」の2種類があります。

アクティブな混合コンテンツ

アクティブな混合コンテンツとはページ全体に影響する操作が可能なコンテンツですね。

アクティブな混合コンテンツの例

javascript
stylesheet（CSS）
iframe
Flash

上記コンテンツはhttpsサイトの中でhttp経由だと、Google Chromeでは既に読み込まれなくなっています。

パッシブな混合コンテンツ

パッシブな混合コンテンツとは、画像や動画などそのコンテンツ部分だけに関係し、ページのその他の要素に影響を与えないコンテンツを指します。

パッシブな混合コンテンツの例

画像（img）
動画（video）
音声（audio）

このパッシブな混合コンテンツについては、今現在http経由でも読込・表示だけはされている状態です。

Goole Chromeのブロック計画

Chrome79

まず2019年12月にリリースされるChrome79を紹介します。

初期状態からブロックされているiframeやjavascript等のアクティブな混合コンテンツについて、ユーザーにてサイトごとにブロックを解除できる設定が追加されます。

現状iframeやJavaScriptは最初から完全ブロック

現状ではiframeやJavaScriptはアクティブな混合コンテンツですので、http経由の場合表示自体がされません（ブロックです）。

初期状態からブロックがされているので真っ白になっているなど、全くコンテンツが見えない状態になっています。

この時点では画像や音声・動画などのパッシブな混合コンテンツについては、http経由の場合警告は出ますが基本的にはまだ読み込まれます（表示がされます）。

Chrome80

2020年1月リリース予定のChrome80では、パッシブな混合コンテンツのうち「動画」や「音声」については、まずはhttpsで読込できるかを自動的に試みます。

そしてこれに失敗した場合にはそのコンテンツはブロックされます（上で述べたブロック解除設定により解除が可能です）。

ブロックされている間は、音声や動画は再生できない事になります。

この時点では「画像」については、まだ「警告が出つつも引き続き表示」の状態です。

Chrome81

そして次のChrome81では、ついに画像についてもhttpでの読込がまずは一旦トライされ、それに失敗した場合にはブロックするようになります。

つまり画像すらもhttp経由だと見えなくなります。これは大きな問題になりますよね。

まずは動画と音声だけ、次に画像と、Chromeでは段階的なブロックがされていく様です。

結論：「混合するコンテンツ」をなくす事

これしかありませんね。httpをhttpsに書き換える、それだけです。

手作業になるかと思いますが、SSL化したページでありながらリソースをhttp://で配信してしまう混合コンテンツ部分を１件ずつ丁寧に探して修正しましょう。

修正方法：混合コンテンツの見つけ方

Google Chromeでhttpsのページにアクセスすると、ブラウザのJavaScriptコンソールに混合コンテンツがあれば、エラーと警告として示されます。

アクティブな混合コンテンツ（赤ゾーン）とパッシブな混合コンテンツ（黄色ゾーン）が、文字色で色分けされています

赤は既にブロック済み、黄色はとりあえず読込している部分です。

JavaScriptコンソールのエラー表示

これらのエラーと警告に表示されたサイトのソースに含まれる httpのURL部分を修正していく事になりますね。

注: 混合コンテンツのエラーと警告については、現在表示されているページについてのみ表示されます。

ですので各ページごとにコンソールを表示してエラーを探さなければなりません。

ページ内で特定操作をした後に発生するエラーもある

よく画像ギャラリーのWEBページを目にすると思います。

並んでいるサムネイルや「矢印ボタン」などをクリックすると用意されたエリアの画像が切り替わるギャラリーですね。

例えばこの画像ギャラリーのスクリプトの中には、aタグの機能をオーバーライドして、指定されている画像をページの表示位置に読込するものがあります。

その指定画像の読込がhttp経由の場合があるのです。

これが「ボタンを押した後に発生するエラー」となり、その場合も混合コンテンツと判定されるようになります。

オーバーライド例

<a class="gallery" href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy.jpg">
<img src="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy-thumb.jpg">
</a>

上記コードではaタグのhrefの部分がhttp://のままにしてあります。

サンプルを表示して画像をクリックした後に、混合コンテンツリソースが読み込まれてページに表示されている事がわかります。

クリックして初めてhttpの画像を表示させるギミック

つまりhtmlタグ上には直接表示されていないのですが、ボタンのギミックが発動した際にhttp経由の読込がされるパターンですね。

サイトリンクがhttp経由の場合

サイトでaタグを使用する際にhttp経由になっている（http:で外部サイトにリンクを掛けている）場合はどうなのでしょうか。

リンク（aタグ）のURLについてはブラウザを新しいページに移動させるためのものですので、これ自体が混合コンテンツと判定されることはありません。

ですのでサイトリンクに関しては修正する必要はありません。

あわせて読みたい関連記事

Googlebotは混合コンテンツをクロールするか

今回Google Chromeは段階を経て混合コンテンツをブロックしていきます。

ではGooglebot（Googleの検索クローラー）はサイトを巡回・インデックスる際に混合コンテンツをブロックするのでしょうか。

Googlebotのクロール・レンダリングを検証できるURL検査ツールとモバイルフレンドリーテストというのがあります。

ここで混合コンテンツ読込の検証がされたところ、次のような結果が出たそうです。

パッシブな混合コンテンツ
読み込む
アクティブな混合コンテンツ
読み込まない

Googleの検索クローラーの挙動はChromeブラウザの混合コンテンツに対する対応と一致していますね。

ですので最終的にChromeがパッシブな混合コンテンツをブロックするようになったら、Googlebotもそれに習いブロックするようになる可能性は十分考えられます。

となるとJavaScriptやiframeのアクティブな混合コンテンツだけではありません。

画像や動画などのパッシブな混合コンテンツがあれば、それ自体をインデックスしなくなるかもしれません。

※WEBページ自体はインデックスされ、混合コンテンツ部分がインデックスされなくなるかもしれないという意味ですね。

検索順位に影響が出るかも

混合コンテンツが本当にクロール・インデックスされなくなってしまったら、これは深刻な問題になりますよね

ページの重要なコンテンツを生成するJavaScriptが混合コンテンツになっていたり、画像検索からの流入が狙えるキー画像が混合コンテンツになっていたりしたらどうでしょう。

SEO順位評価としては大きなマイナスになるはずですので、一刻も早く修正をするべきですね。

そもそものお話

重要なのは、本記事の内容は基本SSL化したWEBサイト（URLがhttps:になっているサイト）に関するお話であるという事。

元々SSL化をしていないWEBサイト（全てがまだhttpによる通信）の場合は、混合コンテンツの状態自体が起きません。

なので今回のブロック自体がおこなわれません。

ブロックされて画像などが見えなくなる訳ではないという事です。

だから今回の話は関係ないという訳ではありません。

SSL化していないこと自体がセキュリティ上既に問題ですので、一刻も早くSSL化は済ませましょう。

一押し人気コーナー紹介