Chromeブラウザに表示されるSSLアイコンについて。

SSL

Written by Kohei Yamada Posted on 2016/12/20



はじめに

先日、https://blog.proudit.jpのサイトURLがいつもと違うのに気づきました。
通常SSLが導入されているサイトにChromeでアクセスするとURL欄に緑色の鍵マークlock.pngが表示されると思いますが、info.pngのマークになっていました。
ssl-url.png

ちょっと、気になって調べてみたところ、アイコンは3種類(lock.png info.png unnamed.png)あるみたいです。


SSLアイコンについて

アイコンの詳しい内容についてはChromeヘルプに載っていますがざっとまとめると以下のような感じです。


ロック lock.png

このサイトへの接続はプライベート接続で正常な状態となります。
サイトの証明書が有効で、Chromeとサイトの間で暗号化接続がちゃんと確立されていることを示します。また、サイトへ送信する情報はプライバシー保護がされます。


情報 info.png

このアイコンは2つの場合が考えられます。

| このサイトへの接続はプライベート接続ではありません。

この場合はサイトからHTTPS証明書が送信されていない状態です。
つまり接続が暗号化ができていないことになります。
この場合、パスワードやクレジットカードなどの機密情報は入力しないように気をつけましょう。

| このサイトへの接続はプライベート接続です。ただし、ネットワーク上のユーザーがこのページのデザインを変更できる可能性はあります。

サイトとの間はプライベート接続はされているので基本的には暗号化はされています。ただ、一部のコンテンツでHTTPSが使用されていない(HTTPが使用されている)ため、その部分では接続に暗号化がされていません。
つまり、そのサイト内でリンクを貼っていたりする場合、URLがhttp://で指定されていたりする可能性があります。


警告 unnamed.png

サイトへの接続が適切に暗号化されていない場合に発生します。
期限が切れていいたり、証明書のドメインがサイトのドメインと異なるなど、証明書が不正な場合に発生します。
また、この表示がされるサイトは危険なサイトであるか、個人情報や機密情報を騙し取る虚偽サイトである可能性があります。
とにかく気をつけましょう。


確認

今回の場合、情報アイコンinfo.pngが表示されています。
その情報アイコンをクリックすると、そのサイトの接続状態の説明が吹き出しで表示されます。
より詳しい内容を確認するには詳細をクリックします。
ssl-icon-check1.png

すると以下のような画面が表示されます。「Mixed Content」となっていて説明にも「This site includes HTTP resources」となっているので、どうやらこのページ内にhttp://でリンクが貼られている部分があるみたいです。
ssl-icon-check2.png

では、実際にそれはどこになるのでしょうか?それを確認するにはこの状態で更新をしてみましょう。
すると中央の部分にさっきとは違って色々URLがリストされます。ここのNon-Secure Originsにリストされているのがhttp://でリンクを貼っている部分、Secure Originにリストされているのがhttps://でリンクを貼っている部分になります。
ssl-icon-check3.png

本来であればここでhttp://の部分をhttps://へ修正してあげるべきなのですが、必ずしもそのリンク先がhttps://に対応しているサイトであるとは限りません。今回は対応していなかったのでこのままにしました。


おわりに

最近ではデフォルトでSSLを導入しているサイトが増えてきましたが、サイト内のリンクにも注意する必要があります。そこでChromeはそこらへんもデフォルトでアイコン表示してくれるのですぐ気がつくし、対応必要箇所が簡単に確認できるなと感じました。
ただ、今回みたいに回避不能な場合はちょっと辛いですね。。。