連載
» 2018年08月02日 03時00分 公開

Google Chrome完全ガイド:Chromeのアドレスバーに「保護されていない通信」と表示される原因とその見つけ方

Google ChromeでWebページを開いたとき、アドレスバー(オムニボックス)内の左側に「保護されていない通信」と表示されることがあります。この場合に注意すべきこと、またWebサイト管理者として対策すべきことを説明します。

[島田広道,デジタルアドバンテージ]
「Google Chrome完全ガイド」のインデックス

連載目次

 Windows OSやmacOS、Linuxなどのデスクトップ向けGoogle Chrome(以下、Chrome)でWebページを開くと、アドレスバー(オムニボックス)内のURLの左側に「保護されていない通信」と表示されることがあります。

Chromeで「http://〜」のWebページを開いたときのアドレスバーの例 Chromeで「http://〜」のWebページを開いたときのアドレスバーの例

 これは一体何を表しているのでしょうか?

HTTPは「保護されていない通信」

 この「保護されていない通信」というメッセージは、「安全」ではない通信路でWebサイトと接続し、Webページを開いたときに表示される警告の一種です。具体的には、URLが「http://」から始まるHTTP接続のWebページでは、必ずこの警告が表示されます。

 HTTPはWebサーバとクライアントの間でやりとりされる通信データを暗号化しません。また、接続先のWebサーバを検証する機能もありません。そのため、通信中のデータの改ざんや盗聴、あるいはWebサーバのなりすまし(偽装)といった攻撃を受ける可能性があります。Chromeの「保護されていない通信」というメッセージは、こうした危険性を表しています。

HTTPは通信途中で盗聴や改ざん、なりすましの攻撃を受ける危険性がある HTTPは通信途中で盗聴や改ざん、なりすましの攻撃を受ける危険性がある

 Googleは、2016年7月にリリースされたChromeのVer.52から段階的に、HTTP接続の危険性をユーザーに知らせる機能をChromeに追加してきました。当初はアドレスバーに「i」というアイコンが表示されたり、クライアントからWebサーバへデータを送信できるページのみ「保護されていません」と表示されたり、といった程度でした。

 それが2018年7月リリースのChrome 68からは、HTTP接続だと一律に「保護されていない通信」と表示されるようになりました。さらに2018年9月リリース予定のChrome 70以降では、データを送信できるページにHTTPで接続すると、赤字で「保護されていない通信」と警告されるようになる予定です。

正常なHTTPS接続なら「保護された通信」と表示される

 一方、HTTPS接続であればTLS(SSL)によって通信中のデータが暗号化されます。つまり、前述のような危険性がない安全な通信路なので、正常なら以下のように緑色で南京錠のアイコンと「保護された通信」というメッセージが表示されます。

Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(正常時) Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(正常時)

 EV認証を経て取得された「EV証明書」が組み込まれているサイトでは、上記の「保護された通信」の代わりに、その証明書に記載されたサイト運営組織の名称が表示されます。

Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(EV SSL) Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(EV SSL)

HTTPS接続なのに「保護された通信」と表示されない!?

 ところが、HTTPS接続を表す「https://」から始まるURLのWebページでも、なぜか「保護された通信」と表示されないことがあります。

Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(異常時) Chromeで「https://〜」のWebページを開いたときのアドレスバーの例(異常時)

 これは、Webページ自体はHTTPS接続でも、その安全を妨げる「何か」が当該ページに存在することを表しています。安全ではない通信が含まれているので、Webページ全体としては安全ではない、とChromeは判定していることになります。

 もし、読者の皆さんが管理しているWebサイトで、HTTPS接続を想定して設計したページなのにChromeで「保護された通信」と表示されないなら、適切な対策を施して「保護された通信」と表示されるようにすべきでしょう。HTTPSだから安全だと思っているエンドユーザーを危険にさらしかねない上に、HTTPSを導入した効果も損なわれてしまうためです。

「保護された通信」と表示されない原因

 HTTPS接続の安全性を損ねる原因としては、不正なサーバ証明書や脆弱(ぜいじゃく)なバージョンのTLSプロトコル、暗号化スイートなど、さまざまなことが考えられます。その中で特に多いのは、そのページに必要な画像やCSSファイル、JavaScriptファイルなどの読み込みに、HTTP接続が用いられていた、というパターンです(上の画面でも(3)の説明文から「画像」が原因であると推測できます)。

 そこで以下ではChromeを対象として、HTTPS接続のページ内でHTTP接続の要素を簡単に見つける方法を説明します。

Chromeのデベロッパーツールで「安全」ではない要素を見つける

 ChromeでHTTP接続のリソースを見つけるには、Chromeが標準で装備している「デベロッパーツール」(開発者ツールとも呼ばれる)を利用します。まず対象のWebページをChromeで開いてから、[Ctrl]+[Shift]+[I]キーまたは[F12]キーを押して、デベロッパーツールを起動します。あるいは以下のようにメニューボタンから起動します。

Chromeのデベロッパーツールで「安全」ではない要素を見つける(1/3) Chromeのデベロッパーツールで「安全」ではない要素を見つける(1/3)

 次に、[F5]キーまたは[Command]+[R]キーを押して対象ページを読み込み直した後で、デベロッパーツールの[Security]タブを選択し、「保護されていない通信」と表示される原因を探ります。

Chromeのデベロッパーツールで「安全」ではない要素を見つける(2/3) Chromeのデベロッパーツールで「安全」ではない要素を見つける(2/3)

 上の画面例の場合、「Certificate」すなわちサーバ証明書と「Connection」(TLSの接続)については、結果が緑色で表示されており、トラブルは生じていないことが分かります。

 一方、「Resources」すなわち画像やCSSファイルなどのリソースについては、赤字で「mixed content」すなわちHTTPとHTTPS接続が混在していると表示されています。このような場合は、そのすぐ下にある「View <個数> request(s) in Network Panel」というリンクをクリックします。すると、[Network]タブが表示されます。

Chromeのデベロッパーツールで「安全」ではない要素を見つける(3/3) Chromeのデベロッパーツールで「安全」ではない要素を見つける(3/3)

 下側のペインにHTTP接続の「安全ではない」リソースの一覧が表示されます。それをクリックして表示されるリクエスト/レスポンスの詳細で、「Request URL」に対象リソースのURLが表示されます(これが解決の鍵となります)。

 紛れ込んでいるHTTP接続のリソースが見つかったら、HTMLソースのどの部分でそのリソースを読み込んでいるのか、探します。それにはまず、見つけたリソースを右クリックして表示されるメニューで、[Copy]−[Copy link address]を選択します。

どこにHTTP接続の要素があるのか探す(1/2) どこにHTTP接続の要素があるのか探す(1/2)

 すると、「http://」から始まる対象リソースのURLがクリップボードにコピーされます。

 次に[Elements]タブを選択肢、[Ctrl]+[F]キーを押して検索窓を開き、上記のURLを検索して該当箇所を見つけます。1つも見つからない場合は、URLのパス部分だけを検索してみましょう。

どこにHTTP接続の要素があるのか探す(2/2) どこにHTTP接続の要素があるのか探す(2/2)

 あとは上記の検索結果を基に、HTMLファイルあるいはWebアプリのソースコードの該当箇所を特定し、HTTPS接続に修正します。

 当該リソースが存在するサイトがもともとHTTPSで接続可能であれば、多くの場合、単に「http://」を「https://」に修正するだけで済みます。逆にHTTPS非対応であれば、HTTPS接続の可能なサイトにそのリソースを移すなどの対処が必要になります。

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

 Web APIの呼び出しなどの場合、上記の手順ではHTTP接続のリソースが見つからないことがあります。そのときは、デベロッパーツールに表示される警告やエラーメッセージをたどって探すとよいでしょう。

 それには、デベロッパーツール右上隅に黄色い三角マークか赤丸のマークがないか確認し、あればそれをクリックします。

[Network]タブでHTTP接続の要素が見つからなかった場合の探し方(1/2) [Network]タブでHTTP接続の要素が見つからなかった場合の探し方(1/2)

 すると、ウィンドウの下側に「Console」と呼ばれるペインが現れ、そこに警告またはエラーのメッセージが表示されます。これを1つずつ確認していきましょう。

[Network]タブでHTTP接続の要素が見つからなかった場合の探し方(2/2) [Network]タブでHTTP接続の要素が見つからなかった場合の探し方(2/2)

 上の画面の例では、「https://www.example.jp/」というページにはHTTPSで接続しているのに、その中から「http://www.example.com/sitesrchresults.html」にはHTTPで接続している(つまりHTTPSにHTTPが混ざっている)、と警告されています。

 その右上には、原因となった記述の箇所が「<パス>:<行番号>」という形式で表示されます。ただしWebアプリやCMSによっては、これらが実際のファイルと異なることがよくあります。その場合は、該当URLを[Elements]タブで検索する方が早く見つかるでしょう。

■更新履歴

【2018/08/01】スクリーンショットを一新しました。図版を追加しました。執筆時点で最新のChrome 68の情報を反映しました。

【2016/09/23】初版公開。


「Google Chrome完全ガイド」のインデックス

Google Chrome完全ガイド

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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