【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
こんにちは。久しぶりのブログを執筆します。エンジニアの石原です。
今日はちょっと前に話題となった、GoogleChromeの今後の方針としてSSL化されたページでの混在コンテンツについてお話します。
この記事の結論
先に細かい話は置いておいて、結論を記載します。
混在コンテンツが読み込まれるのは、以下の条件の時です。
「SSL化されたWebサイトで、別ドメインのリソース(画像、動画等)を読み込んでいる」
+
「読み込んでいる先のドメインがSSL化されていない」場合のみです。
自分のサイトでSSL化しているけれど、記事中などのサイト内URLが http://~ で設置している場所がある…という場合は、2020年2月以降もこれまで通り表示されます。
また、SSL化されていないサイト (http://~で始まるサイト)は、これまで通りの表示がされます。
よって、「他ドメインの画像や動画データを記事中で読み込んでいる」場合や「サブドメインから画像、動画データを読み込んでおり、そのサブドメインはSSL化していない」という場合は、その画像、動画データが表示されない可能性があります。
現状のChromeはどうなっているの？
現状、サブリソース内(画像、動画などのファイル。以下サブリソースと呼びます)にhttp://~ から始まるURLでファイルを読み込んでいる場合はアドレスバー左のアイコンが鍵マークではなくなり「このサイトへの接続は完全には保護されていません」と表示されます。
<!-- 原因となるソースコード -->
<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
問題がないケース02
下記の場合も問題ありません。
・リソースのドメインがSSL対応しているか : している (https://hogehoge.jp/images/logo.png でもアクセスできる)
問題があるケース03
問題となるのは以下のケースです。
・リソースのドメインがSSL対応しているか : していない (https://hogehoge.jp/images/logo.png でアクセスできない)
hogehoge.jp 自体がSSL化されていない場合、表示できません。
よって、仕様変更の実態としては「混合コンテンツは完全にブロックするようになる」というよりも
「SSL化されたサイト上のサブリソースは、強制的に https で取得するようになる」形です。
よって、画像、動画の配信元がSSL対応していない場合は表示されなくなります。
まとめ
この記事を読んだ時点ですと、即座に対応しなければまずいのではないか、本当に今のサイトは大丈夫かといった疑問が出ると思いますが、自社のドメインがすでにSSL化されている場合はこの問題で画像、動画データが表示されなくなるということはあまりないように思えます。
とはいえ、すべて https:// で統一するなどはすべき対応なので、現在サイトを開く際、アドレスバーに鍵マークではなく i マークが表示され、このサイトへの接続は完全には保護されていませんという表示が出る場合は、そのページ上に http:// から始まる画像や動画URLが混在されていないか確認しましょう！
[参考URL]
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
Udemyを実際に体験した方の感想記事もぜひご覧ください♪
