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

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

連載目次

解説

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

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以外のプラットフォーム）で導入された機能である。

• New Site Security Indicators In Chrome［英語］（ChromiumプロジェクトのSecurity-devグループ）

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

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

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

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

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

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）
HTTPS接続なのにChromeで「i」アイコンが表示されてしまったWebページを開いたところ。
　 （1）「i」アイコンをクリックして（2）を表示させる。
　 （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）
［Network］タブが表示される。
　 （7）これは絞り込み用のテキスト入力欄。自動的に「mixed-content:displayed」と記入されているはずだ。
　 （8）HTTP接続のリソースがここに表示される。もし1つも表示されていなかったら、［F5］キーを押して再度読み込んでみる。これをクリックすると（9）が表示される。
　 （9）（8）のリソースの詳細が表示される。［Headers］タブ−［General］−［Request URL］に、このリソースのURLが表示される。この例では「http://」から始まっており、確かにHTTP接続であることが分かる。

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

どこにHTTP接続の要素があるのか探す（その1）
これは先ほどの開発者ツールの［Network］タブ。
　 （1）HTTP接続であることを確認したリソース。右クリックすると（2）が表示される。
　 （2）［Copy link address］をクリックして、このリソースのURLをコピーする。

▼

どこに「安全」ではない要素があるのか探す（その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）
前述の手順で開発者ツールを開いても、HTTP接続のリソースが1つも表示されないことがある。
　 （1）絞り込み用のテキスト入力欄には、「mixed-content:displayed」と記入されている。
　 （2）だが、読み込まれたリソース一覧には1つもヒットしていない。
　 （3）ウィンドウ右上隅に黄色い三角マークかまたは赤丸のマークが表示されていたら、それをクリックする。

▼

［Network］タブで見つからなかった場合の探し方（その2）
　 （4）下から［Console］欄が現れる。
　 （5）「Mixed Content」すなわちHTTP接続の要素が存在する、という警告メッセージ。具体的にはフォーム内で「http://www.google.co.jp/search」への接続が記述されている、とのこと。
　 （6）（5）の記述が存在するパスと行番号。ただしWebアプリやCMSによっては、実際のファイルと異なることがよくある。その場合は、前述のように（5）の該当URLを［Elements］タブで検索する方が早く見つかるだろう。

「Tech TIPS」