Chrome DevTools にセキュリティ パネルを追加

Paul Bakaus

Chrome セキュリティ チームは、HTTP を使用しない未来、つまりウェブに送信するすべてのデータがユーザーと閲覧中のサイトとの間に確固たる確信を持つことができる未来の実現に向けて、懸命に取り組んできました（概要については上の動画をご覧ください）。また、さらに簡単に HTTPS を導入して、輝かしい HTTPS の未来に参加できるよう、セキュリティを DevTools のコア機能にしました。

Chrome 48 で導入された新しい [セキュリティ] パネルでは、証明書と混合コンテンツに関する問題を簡単に確認できるようになりました。DevTools で直接アクセスするか、URL バーの鍵アイコンをクリックしてから [詳細] リンクをクリックします。

[接続情報] の問題への対処

ページのセキュリティに関するデータが必要な場合は、URL の横にある小さな鍵のアイコンをクリックして、[接続] タブに表示される情報を解析します。

このタブにはいくつかの問題がありました。

• ほとんどのユーザーにとって複雑すぎる
• ほとんどのデベロッパーにとって基本的すぎる
• 鍵アイコンが「ダウングレード」の原因が不明確になる

概要: 鍵アイコンと混合コンテンツの表示について説明する

鍵アイコンはページのセキュリティ状態を表すため、表示されるタイミングと理由を把握することは非常に重要です。新しいセキュリティ パネルの概要画面では、安全なページを実現するための重要な要素について説明します。

• Identity（証明書）
• 接続（プロトコル、暗号スイート）
• サブリソース

サイトに良いことを示す小さな緑色のバッジが表示されている理由と、表示されない理由がひと目でわかります。

混合コンテンツが突然表示される心配無用です。概要に直接表示されます。また、クリックするだけで [ネットワーク] パネルにフィルタを適用したビューが表示されるため、問題のあるリクエストをすばやく確認できます。

配信元ビュー: 接続タイプと証明書の詳細

特定の TLS 接続に関する情報が必要な場合は、送信元ビューが役立ちます。ページを再読み込みすると、すべてのリソースの個々の送信元が左側のナビゲーションに表示されます。

ここでは、使用されている証明書と接続タイプに関する詳細情報を確認できます。さらに、さらにドリルダウンして、その送信元からのすべてのリソースを [ネットワーク] パネルで検査することもできます。

新しい [セキュリティ] パネルをお試しいただき、Twitter またはバグ/フィーチャー チケットでご意見をお寄せください。