MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
Google Chromeが2020年2月から混在コンテンツを完全にブロック?影響範囲はどこまでなの?

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

公開日:2019年10月21日
最終更新日:2019年10月21日
オンスタ運営
テクノロジー
システム
ホーム > 全記事一覧 > 制作 > ディレクター > Google Chromeが2020年2月から混在コンテンツを完全にブロック?影響範囲はどこまでなの?

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
Google Chromeが2020年2月から混在コンテンツを完全にブロック?影響範囲はどこまでなの?
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

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

今日はちょっと前に話題となった、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]
 

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
WordPress
システム
テクノロジー
デザイン
公開日: 2020年06月29日
最終更新日: 2022年01月17日
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
  • # .htaccess
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
テクノロジー
公開日: 2018年02月09日
最終更新日: 2018年02月09日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なぜ CMS を導入するのか?CMSを導入する目的と、導入の基準、選定の基準
システム
公開日: 2016年11月30日
最終更新日: 2022年01月17日
なぜ CMS を導入するのか?CMSを導入する目的と、導入の基準、選定の基準
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
テクノロジー
プログラミング
公開日: 2017年12月06日
最終更新日: 2017年12月06日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressのログイン方法やログインできない時のTips、ログインに関するセキュリティ対策のご紹介
WordPress
テクノロジー
公開日: 2021年12月08日
最終更新日: 2021年12月08日
WordPressのログイン方法やログインできない時のTips、ログインに関するセキュリティ対策のご紹介
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ホームページに使用するサーバーは何がいいの?種類なども解説!
システム
公開日: 2019年07月26日
最終更新日: 2019年07月26日
ホームページに使用するサーバーは何がいいの?種類なども解説!
  • # サーバー
  • # ホームページ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
JAMstackってなに?もやもやするのでJAMstackについて調べてみた。
テクノロジー
プログラミング
公開日: 2021年03月08日
最終更新日: 2021年03月08日
JAMstackってなに?もやもやするのでJAMstackについて調べてみた。
  • # GatsbyJS
  • # JAMStack
  • # JavaScript
  • # Netlify
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
JSでのFunctional Programmingの原則と書き方
テクノロジー
プログラミング
公開日: 2021年10月04日
最終更新日: 2021年10月04日
JSでのFunctional Programmingの原則と書き方
t.yoshioka

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
初心者でも正しいドメインを取得できる!ドメインの決め方&選び方
システム
公開日: 2019年08月15日
最終更新日: 2019年08月15日
初心者でも正しいドメインを取得できる!ドメインの決め方&選び方
  • # ドメイン
  • # 選び方
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webサイト制作におけるツールと技術選定について考える
テクノロジー
公開日: 2017年01月24日
最終更新日: 2017年01月24日
Webサイト制作におけるツールと技術選定について考える
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。