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

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

» 2019年07月10日 05時15分 公開
[島田広道デジタルアドバンテージ]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

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

連載目次

Chromeで「保護されていない通信」という不安なメッセージが表示されるのはなぜ?

 Google Chrome(以下、Chromeと略)でWebページを開いた際、アドレスバー(オムニボックス)内のURLの左側に「保護されていない通信」と表示されて不安に感じたことはありませんか?

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

 この不安になるメッセージは一体何を表しているのでしょうか? 本稿では、このように表示される原因と対策について説明します。

「保護されていない通信」と表示されるのはHTTPのせい

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

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

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

 以前は、HTTP接続が一般的だったため、いまだにHTTP接続のWebサーバのままになっているところが多くあります。こうしたWebサイトでは、改ざんされている危険性もあるので、個人情報の入力などについて十分な注意を払う必要があります。

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

●正常なHTTPS接続なら南京錠アイコンが表示される

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

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

 厳格な認証プロセスを経て取得された「EV SSL証明書」が組み込まれているサイトでは、南京錠アイコンに加えて、その証明書に記載されているサイト運営組織の名称が表示されます。

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

●GoogleはHTTPS接続を強く推奨

 HTTPが安全ではないこと、そして安全なHTTPSで代替できることから、GoogleはHTTPS接続を強く推奨しています。その一環として、HTTP接続の危険性をユーザーに知らせる機能をChromeに追加しました。その1つが、前述の「保護されていない通信」というメッセージです。

 またGoogleはWebサイト運営者に対して、Webサイト(Webサーバ)をSSL(TLS)に対応させ、ブラウザとHTTPSで接続することでその通信内容を保護するように推奨しています。

 もし、読者の皆さんが管理しているWebサイトで、前述の「保護されていない通信」というChromeのメッセージが表示される場合、それを消すには、HTTPSに対応するより他ありません。未対応すなわちHTTPのままであれば、速やかにHTTPS対応を検討すべきでしょう。

HTTPS接続なのに南京錠アイコンが表示されない!?

 さて、WebサイトをHTTPSに対応させても、なぜかChromeで前述の南京錠アイコンが表示されないことがあります。

Chromeで「https://〜」のWebページなのに南京錠アイコンが表示されない例 Chromeで「https://〜」のWebページなのに南京錠アイコンが表示されない例

Chromeで「https://〜」のWebページなのに「保護されていない通信」と表示される例 Chromeで「https://〜」のWebページなのに「保護されていない通信」と表示される例

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

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

●南京錠アイコンが表示されない原因

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

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

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

 ChromeでHTTP接続のリソースを見つけるには、Chromeが標準で装備している「デベロッパーツール」(開発者ツールとも呼ばれる)を利用します。

 まず対象のWebページをChromeで開いてから、[Ctrl]+[Shift]+[I]キーまたは[F12]キーを押して、デベロッパーツールを起動します。あるいは以下のようにメニューボタンから起動します。

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

 もしデベロッパーツールがブラウザペインと同じウィンドウに表示されているなら、以下の手順で別ウィンドウに移動しましょう。その方がデベロッパーツールを広く表示できるため、この後の操作がしやすくなります。

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

 次に、デベロッパーツールの[Security]タブを選択し、[F5]キーを押して対象ページを読み込み直してから、左ペインの[Overview]を選択します。ここから「保護されていない通信」と表示される原因を探ります。

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

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

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

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

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

Copyright© Digital Advantage Corp. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

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

メールマガジン登録

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