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

Paul Bakaus

Chrome セキュリティ チームは、HTTP のない未来を実現するために懸命に取り組んできました（上記の動画で概要をご確認ください）。HTTP のない未来とは、ユーザーがウェブに送信するデータが、ユーザーと閲覧しているサイトの間でのみやり取りされるという、ユーザーが安心してウェブを利用できる未来です。より簡単に HTTPS の未来に移行できるように、DevTools の中心的な機能としてセキュリティを追加しました。

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

[接続情報] での問題への対応

ページのセキュリティに関するデータをご希望の場合は、URL の横にある小さなロックアイコンをクリックし、[接続] タブで利用可能な情報を解析してください。

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

• ほとんどのユーザーには複雑すぎる
• ただし、ほとんどの開発者にとっては基本的な機能しかありません。
• ロックアイコンの「ダウングレード」の原因が不明確である

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

ロックアイコンはページのセキュリティ状態を表すため、表示されるタイミングと理由を把握することが非常に重要です。新しいセキュリティ パネルの概要画面には、安全なページに貢献する重要な部分が示されます。

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

これで、サイトに優良サイトの緑色バッジが表示される理由、または表示されない理由が一目でわかります。

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

オリジンビュー: 接続タイプと証明書の詳細

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

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

---

新しいセキュリティ パネルをお試しいただき、Twitter またはバグ/機能のチケットでぜひご感想をお聞かせください。