MENU

BLOG

Grow Groupスタッフから様々な情報発信

ホームブログGoogle Chromeが2020年2月から混在コンテンツを完全にブロック?影響範囲はどこまでなの?

Google Chromeが2020年2月から混在コンテンツを完全にブロック?影響範囲はどこまでなの?

テクノロジー,システム / 2019.10.21/ 1shiharat

こんにちは。久しぶりのブログを執筆します。エンジニアの石原です。

今日はちょっと前に話題となった、GoogleChromeの今後の方針としてSSL化されたページでの混在コンテンツについてお話します。

先に細かい話は置いておいて、結論を記載します。

混在コンテンツが読み込まれるのは、以下の条件の時です。

 

「SSL化されたWebサイトで、別ドメインのリソース(画像、動画等)を読み込んでいる」
                                                             + 
「読み込んでいる先のドメインがSSL化されていない」場合のみです。
 
自分のサイトでSSL化しているけれど、記事中などのサイト内URLが http://~ で設置している場所がある…という場合は、2020年2月以降もこれまで通り表示されます。
 
また、SSL化されていないサイト (http://~で始まるサイト)は、これまで通りの表示がされます。
 
よって、「他ドメインの画像や動画データを記事中で読み込んでいる」場合や「サブドメインから画像、動画データを読み込んでおり、そのサブドメインはSSL化していない」という場合は、その画像、動画データが表示されない可能性があります。

現状のChromeはどうなっているの?

現状、サブリソース内(画像、動画などのファイル。以下サブリソースと呼びます)にhttp://~ から始まるURLでファイルを読み込んでいる場合はアドレスバー左のアイコンが鍵マークではなくなり「このサイトへの接続は完全には保護されていません」と表示されます。
 
これは、https://grow-group.jp というSSL化されたURLにアクセスしているのにかかわらず、表示するソースコード内に http://grow-group.jp ~ から始まるサブリソースを記述し、SSL化された接続以外から呼び出しているためです。
 
<!-- 原因となるソースコード -->
<img src="http://grow-group.jp/wp-content/themes/growgroup-html/dist/assets/images/img-no-photo.jpg" alt="">
 
また、現時点ではJavaScript、iframeについてはすでに混在コンテンツの場合すべてブロックされるようになっています。
 
もちろん、弊社にて制作を行う際は、すでに混在コンテンツはサイト内に含まれないようURLを統一し制作しています。

Chrome 81 以降はどうなるの?

今回アナウンスされた Google Chrome 81以降の仕様変更は以下の通りです。
 
「SSL化されたサイトで呼び出されているサブリソースはすべて https:// で呼び出す」
 
よって、例えば下記の場合は問題ありません。
 
問題がないケース01
 
・ブラウザで開くURL : https://grow-group.jp 
・HTML上の画像のパス :  http://grow-group.jp/images/logo.png
 
上記の場合は、ブラウザが自動で https://grow-group.jp/images/logo.png を読み取りにいきます。
 
問題がないケース02
下記の場合も問題ありません。
 
・ブラウザで開くURL : https://grow-group.jp 
・HTML上の画像のパス :  http://hogehoge.jp/images/logo.png 
・リソースのドメインがSSL対応しているか : している (https://hogehoge.jp/images/logo.png でもアクセスできる)
 
上記の場合は、ブラウザが自動で https://hogehoge.jp/images/logo.png を読み取りにいきます。
 
問題があるケース03
問題となるのは以下のケースです。
 
・ブラウザで開くURL : https://grow-group.jp 
・HTML上の画像のパス :  http://hogehoge.jp/images/logo.png 
・リソースのドメインがSSL対応しているか : していない (https://hogehoge.jp/images/logo.png でアクセスできない)
 
上記の場合、ブラウザは強制的に https://hogehoge.jp/images/logo.png を取得しにいきますが、
hogehoge.jp 自体がSSL化されていない場合、表示できません。
 
よって、仕様変更の実態としては「混合コンテンツは完全にブロックするようになる」というよりも
「SSL化されたサイト上のサブリソースは、強制的に https で取得するようになる」形です。
よって、画像、動画の配信元がSSL対応していない場合は表示されなくなります。

まとめ

この記事を読んだ時点ですと、即座に対応しなければまずいのではないか、本当に今のサイトは大丈夫かといった疑問が出ると思いますが、自社のドメインがすでにSSL化されている場合はこの問題で画像、動画データが表示されなくなるということはあまりないように思えます。
 
とはいえ、すべて https:// で統一するなどはすべき対応なので、現在サイトを開く際、アドレスバーに鍵マークではなく i マークが表示され、このサイトへの接続は完全には保護されていませんという表示が出る場合は、そのページ上に http:// から始まる画像や動画URLが混在されていないか確認しましょう!
 

[参考URL]
 
テクノロジー,システム / 2019.10.21 / 1shiharat

6月5日に弊社エンジニアが執筆した「WordPress標準デザイン講座」が出版されます 6月5日に弊社エンジニアが執筆した「WordPress標準デザイン講座」が出版されます

この記事を書いた人
Webエンジニア 1shiharat

何かいい本教えてください

一覧へ戻る