HTTPS接続の状態をチェックできるGoogle ChromeのSecurityパネル

[レベル: 上級]

HTTPSの状態を検証するための「Security(セキュリティ)」パネルがGoogle Chromeのデベロッパーツールに追加されました。
Securityパネルでは、次の3項目の安全性を知ることができます。

  • 証明書: 有効なTLS/SSL証明書が使用されているかどうか
  • TLS接続: 安全なTLS/SSL接続が確立されているかどうか
  • リソース: 画像やJavaScriptなどのリソースもTLS/SSLで配信されているかどうか

Securityパネルのレポート具体例

SecurityパネルでHTTPSの状態がどのようにレポートされるかの具体例をいくつか見てみましょう。

まずChromeのデベロッパーツールを立ち上げます。

  • [Google Chromeの設定](右上の3本バー) − [その他のツール] − [デベロッパー ツール]
  • Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac)

デベロッパーツールが起動したら、「Security」タブを選択します。
Securityパネルが存在しない場合は、Chromeを最新バージョンにアップデートしてください。

有効なHTTPS

証明書とTLS接続、リソースのどれにも問題がなく完全に安全なHTTPS接続が確立されているときには “This pase is secure (valid HTTPS).” (このページは安全です(有効なHTTPS))と表示されます。

This pase is secure (valid HTTPS).

安全ではない証明書

証明書に問題があるページです。
“This page is not secure.”(このページは安全ではありません)と表示されます。

This page is not secure.

ここでは安全性の問題が指摘されているSHA-1が証明書の署名アルゴリズムに用いられていることが原因になっています。
「View certificate」ボタンをクリックすると証明書の詳細を確認できます。

混在するコンテンツ

HTTPSページなのに、画像やJavaScript、CSSなどのサブリソースがHTTPで配信されているページには“Mixed Content”(混在するコンテンツ)という警告が出ます。

Mixed Content

「View X requests in Network Panel」のリンクをクリックするとNetworkパネルに切り替わり、HTTPで配信されているリソースを確認できます。

mixed-content: displayed

安全なHTTPSが確立されていないために鍵マークがアドレス欄に表示されていないときでも、どこに原因があるのかを突き止めることが今までは難しいことがありました。
ChromeのSecurityパネルでは以前よりもずっと問題点を調査しやすくなっています。
HTTPS移行の際には必ず使いたいツールです。
もちろん、すでにHTTPSへの移行を済ませたサイトであっても、すべてのページで安全な接続が確立されているかどうかを確かめるためにも利用できます。

[公式リソース]