連載
» 2016年09月23日 05時00分 UPDATE

Tech TIPS:Google Chromeブラウザのアドレスバーに「i」が表示される原因とその見つけ方

Google ChromeブラウザでWebページを開いたとき、アドレスバー左端に「i」マークのアイコンが表示されることがよくある。これは何か注意すべきことなのか? Webサイト管理者として対策すべきことは?

[島田広道,デジタルアドバンテージ]
「Tech TIPS」のインデックス

連載目次

対象ソフトウェア:Google Chromeブラウザ Ver.52以降



解説

 2016年9月以降、Google ChromeブラウザでWebページを開くと、アドレスバー内のURLの左端に「i」を丸で囲ったアイコンがよく表示されるようになった。

Chromeで「http://〜」のWebページを開いたときのアドレスバーの例 Chromeで「http://〜」のWebページを開いたときのアドレスバーの例
  (1)「http://」から始まるURL。ただし「http://」は省略されている。
  (2)「i」を丸で囲んだアイコン。「Information」の頭文字の「i」であれば、注意あるいは警告を意味する。これをクリックすると(3)が表示される。
  (3)「プライベート接続」ではないとは、一体どういう意味なのか?

 数カ月前までは、こんなアイコンは表示されなかった。これは一体何を表しているのだろうか?

●「安全ではない」通信だと表示される「i」アイコン

 この「i」アイコンは、「安全」ではない通信路でWebサイトと接続し、Webページを表示したときに表示される警告の一種だ。ChromeのVer.52(Mac OS X)またはVer.53(Mac以外のプラットフォーム)で導入された機能である。

 もっと簡単に説明するなら、URLが「http://」から始まるHTTP接続のWebページでは、必ずこの警告が表示される。HTTPは通信データを暗号化しないため、通信中のデータの改ざんや盗聴、あるいはWebサーバのなりすましといった攻撃を受ける可能性がある。「i」アイコンはこうした危険性を表しているのだ。

●HTTPS接続なら南京錠アイコンが表示される、はずだが……

 一方、HTTPS接続であればSSL(TLS)によって通信中のデータが暗号化される。つまり、前述のような危険性がない安全な通信路なので、正常なら「i」アイコンの代わりに緑色のアイコンが表示される。

Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(その1) Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(その1)
  (1)「https://」から始まるURL。
  (2)南京錠を模したアイコンが緑色で表示されている(シークレットウィンドウだと白で表示)。
  (3)「プライベート接続」、すなわちSSL(TLS)で暗号化済みの安全な通信路が確立されたことを表している。

 ところが、HTTPS接続を表す「https://」から始まるURLのWebページでも、なぜか「i」アイコンが表示されることがある。

Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(その2) Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(その2)
  (1)「https://」から始まるURL。
  (2)前述のHTTPのページと同じく、「i」を丸で囲んだアイコンが表示されてしまった。
  (3)SSL(TLS)で暗号化済みの通信路が確立されたものの、外部からデザインが変更(≒改ざん)される恐れがある、とのことだ。

 これは、Webページ自体はHTTPS接続でも、その安全を妨げる「何か」が当該ページに存在することを表している。その中でも多いのが、そのページで読み込まれる画像やCSSファイル、JavaScriptファイルなどが、HTTPSではなくHTTP接続だった、というパターンだ。安全ではない通信が含まれているので、Webページ全体としては安全ではない、とChromeは判定しているワケだ。

 もし、読者諸氏が管理しているWebサイトで、HTTPS接続を想定して設計したページなのにChromeで「i」アイコンが表示されていたら、対策した方がよい。HTTPSだから安全だと思っているエンドユーザーを危険に晒しかねないし、HTTPSを導入した効果も損なわれてしまうからだ。

 本TIPSではChromeブラウザを対象として、HTTPS接続のページ内でHTTP接続の要素を簡単に見つける方法を説明する。

操作方法

 安全ではないHTTPS接続の原因は、HTTP接続の混入とは限らない。不正なサーバ証明書や脆弱(ぜいじゃく)なバージョンのTLSプロトコル、暗号化スイートも原因として考えられる。本TIPSは、このうちHTTP接続のリソースに焦点を当てて説明する。

●Chromeの開発者ツールで「安全」ではない要素を見つける

 ChromeでHTTP接続のリソースを見つけるには、Chrome標準の「開発者ツール」を以下の手順で操作する。

Chromeの開発者ツールで「安全」ではない要素を見つける(その1) Chromeの開発者ツールで「安全」ではない要素を見つける(その1)
HTTPS接続なのにChromeで「i」アイコンが表示されてしまったWebページを開いたところ。
  (1)「i」アイコンをクリックして(2)を表示させる。
  (2)「詳細」リンクをクリックする。
Chromeの開発者ツールで「安全」ではない要素を見つける(その2) Chromeの開発者ツールで「安全」ではない要素を見つける(その2)
Chromeの開発者ツールの[Security]タブが表示される。
  (3)この欄には、SSL(TLS)の接続に用いられたサーバ証明書が正当かどうかが表示される。
  (4)この欄には、TLSの接続に用いられたプロトコルや暗号化スイートが安全なものかどうかが表示される。
  (5)この欄には、HTTP接続のリソース(画像やCSSファイル、JavaScriptファイルなど)が含まれているかどうかが表示される。もし含まれていると、「View <個数> request in Network Panel」というリンクが表示されるので、これをクリックする。
  (6)開発者ツールの表示後、[F5]キーを押してWebページを再度読み込むと、HTTP接続のリソース一覧がここに表示される。「Non-Secure Origins」の項目に注目する。
Chromeの開発者ツールで「安全」ではない要素を見つける(その3) Chromeの開発者ツールで「安全」ではない要素を見つける(その3)
[Network]タブが表示される。
  (7)これは絞り込み用のテキスト入力欄。自動的に「mixed-content:displayed」と記入されているはずだ。
  (8)HTTP接続のリソースがここに表示される。もし1つも表示されていなかったら、[F5]キーを押して再度読み込んでみる。これをクリックすると(9)が表示される。
  (9)(8)のリソースの詳細が表示される。[Headers]タブ−[General]−[Request URL]に、このリソースのURLが表示される。この例では「http://」から始まっており、確かにHTTP接続であることが分かる。

 紛れ込んでいるHTTP接続のリソースが見つかったら、HTMLソースのどの部分でそのリソースを読み込んでいるのか、以下の手順で探す。

どこにHTTP接続の要素があるのか探す(その1) どこにHTTP接続の要素があるのか探す(その1)
これは先ほどの開発者ツールの[Network]タブ。
  (1)HTTP接続であることを確認したリソース。右クリックすると(2)が表示される。
  (2)[Copy link address]をクリックして、このリソースのURLをコピーする。
どこに「安全」ではない要素があるのか探す(その2) どこに「安全」ではない要素があるのか探す(その2)
  (3)開発者ツールの[Elements]タブを選ぶ。構造化されたHTMLソースが表示される。
  (4)[Ctrl]+[F]キーを押すと、この検索窓にフォーカスが移るので、[Ctrl]+[V]キーを押して、先ほどコピーしたURLをペーストする。
  (5)(4)によってHTMLソースが検索され、見つかったURLを含むHTMLコードが黄色でマークされる。

 あとは上記の検索結果を基に、HTMLファイルあるいはWebアプリのソースコードの該当箇所を特定し、HTTPS接続に修正すればよい。当該リソースが存在するサイトがもともとHTTPSで接続可能であれば、単に「http://」を「https://」に修正するだけで済むことが多い。逆にHTTPS非対応であれば、HTTPS接続の可能なサイトにそのリソースを移すなどの対処も必要になる。

●HTTP接続のリソースが[Network]タブで見つからない場合は?

 Web APIの呼び出しなどにHTTP接続が用いられている場合、上記の手順では見つからないことがある。そのときは、開発者ツールに表示される警告やエラーメッセージをたどって探すとよい。

[Network]タブで見つからなかった場合の探し方(その3) [Network]タブで見つからなかった場合の探し方(その3)
前述の手順で開発者ツールを開いても、HTTP接続のリソースが1つも表示されないことがある。
  (1)絞り込み用のテキスト入力欄には、「mixed-content:displayed」と記入されている。
  (2)だが、読み込まれたリソース一覧には1つもヒットしていない。
  (3)ウィンドウ右上隅に黄色い三角マークかまたは赤丸のマークが表示されていたら、それをクリックする。
[Network]タブで見つからなかった場合の探し方(その2) [Network]タブで見つからなかった場合の探し方(その2)
  (4)下から[Console]欄が現れる。
  (5)「Mixed Content」すなわちHTTP接続の要素が存在する、という警告メッセージ。具体的にはフォーム内で「http://www.google.co.jp/search」への接続が記述されている、とのこと。
  (6)(5)の記述が存在するパスと行番号。ただしWebアプリやCMSによっては、実際のファイルと異なることがよくある。その場合は、前述のように(5)の該当URLを[Elements]タブで検索する方が早く見つかるだろう。

【Column】2017年1月からは、もっと目立つ警告が表示される

 Googleは2017年1月にリリース予定のChrome 56で、「i」マークよりもっと目立つ警告を表示する計画だ。

 具体的には、パスワードやクレジットカード情報の入力を求めるWebページでHTTP接続が使われていると、アドレスバーに「Not secure」と表示されるとのことだ。

 さらにその後、時期は未定だが、HTTP接続のWebページ全てにわたって、赤いアイコンと「Not secure」という赤文字で警告するように変える、という予定も公表している。

 本文に記した通り、HTTP接続には見逃せない危険性がある。Webページを閲覧するエンドユーザーを守るために、HTTPあるいは不完全なHTTPS接続のWebページは、速やかに「安全」なHTTPS接続へ移行すべきだろう。


「Tech TIPS」のインデックス

Tech TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。