2020年10月のgoogle chrome 86 アップデートにより、すべてのMixed Content(混合コンテンツ)がChromedでブロックされることとなってしまいました。

Googleのこの制限により、アンテナサイトで引っ張っていた各まとめサイトの一部faviconでも表示がされなったりしたものがありましたので、faviconをこちらのサーバに落とすなどで表示ができるよう対応したりしました。

この記事では、GoogleのMixed Content(混合コンテンツ)対策により、google chromeで画像表示がされなくなったといったトラブルについて、その原因と解決策をご紹介したいと思います。




リンク先のfaviconが非表示に

泉アンテナという名でまとめアンテナ機能を画像掲示板の泉に作っていましたが、PCで今日見ていたところ、まとめサイト記事と一緒に引っ張ってきていたfavicon画像がいくつか表示されていないところがあることに気が付きました。

Chrome86でhttpとhttps混合コンテンツが完全ブロックとなり警告表示がでている
暇速とかキニ速とかのfaviconが画像切れになってました

原因はMixed Content

chromeの検証で調べてみたところ、Mixed Content(混合コンテンツ)のエラーがいつも通りでていましたが、画像が表示されないということはこれまでなかったので、気になって少々調べてみました。

ちなみに、混合コンテンツエラーというのは下記のようなものです。

混合コンテンツとは、安全な接続(HTTPS接続)で読み込まれたページの中で、別のリソース(画像や動画、音声、スクリプトなど)が安全でない接続(HTTP接続)で読み込まれること。混合コンテンツが発生すると、HTTPSの安全性が弱まり、攻撃者が狙う脆弱性になりうる。Googleでは、例えば株価のHTTPSページで、チャート画像がHTTPで読み込まれる混合コンテンツでは、チャートの画像が改ざんされ投資家を欺く、といったことがあるかもしれないと例を挙げている。

マイナビニュース https://news.mynavi.jp/article/20200210-971320/

Chromeの混合コンテンツ対応

ということで、「Chrome 混合コンテンツ」などで調べてみたところ、Chromeが2020年10月にすべての混合コンテンツをブロックすることにしていたということが分かりました。

Chromeの混合コンテンツ対処スケジュール

Chromeのhttpとhttps混合コンテンツの制限スケジュール
chromeのアップデートスケジュールと混合コンテンツ対応

このスケジュールをみると、chrome86imagesほかもblock対象にされているので、この影響でSSL対応をしていないサイトのfaviconが表示すらされなくなってしまっていたようです。

3年前頃に始まったgoogleのSSL化対応指導もこれでかなり完成された感があります。

おわりに

普段よく見ているiphoneだと、safariメインで使っていたので全く気が付かなかったですが、chrome更新が今月上旬だったので、それ以降はこの状態になっていたのかもしれません。

2chまとめブログのほとんどがSSL化なんて全くやってないところばかりなので、faviconをリンクで読み込むはもう無理な感じです。

ということで、とりあえずfaviconを拾って落として自サーバに置いて表示させるとしておきました。

faviconがきれいに並んだまとめアンテナコーナー
きれいにfaviconが並びました

上場企業ですら77%しか常時SSL化対応ができていないとかの記事を見ると、ちょっとgoogleの対応が早すぎなんじゃないの?なんて思ったりしてしまいます。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手は全てサービスを終了してしまい、中小でも運営を継続するところがほとんど無くなったディレクトリ型検索エンジンを、2002年から細々運営しております。今も申請されたサイトは実際に管理人が訪問して確認後に登録しています。是非登録どうぞ。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載をいたします。
  • 画像掲示板の泉画像・YouTube・ニコニコ動画・Tiktokの貼り付けが可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitterトレンドワード・人気ハッシュタグデータを、月別に集計してランキング形式で公開しています。年間トレンドワードも公開中。
  • Keyword Tool++Yahooショッピングや楽天のトレンドワードデータを日次収集し、EC系の人気キーワードをラインキング形式でご紹介しています。各ワードの検索ボリュームや関連語、24か月の検索ボリュームをグラフで確認が可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能です。
  • TrendinGファッションブランドを人気アイテムヒット率でランキング化し、一覧でご紹介しているサイトです。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。