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

Paul Bakaus

Twitter ホームページ

Chrome セキュリティ チームは、HTTP を使用しない未来の実現に向けて努力を重ねています（詳しくは上の動画をご覧ください）。これは、ウェブに送信されるデータがすべてサイトとの間で保持されることを合理的に保証できる未来です。さらに、HTTPS の輝かしい未来にもっと簡単に参加できるように、セキュリティを DevTools の中核機能にしました。

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

[接続情報] で問題を解決する

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

残念ながら、このタブにはいくつかの問題がありました。

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

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

鍵アイコンはページのセキュリティ状態を表すため、いつどのような理由で表示されるのかを知っておくことが非常に重要です。新しいセキュリティ パネルの [概要] 画面では、ページを安全に保つための重要な部分について説明しています。

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

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

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

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

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

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

---

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