Chrome DevTools の [Security] パネルを使用して、HTTPS がページに正しく実装されていることを確認します。機密性の高いユーザーデータを扱っていないサイトでも、すべてのウェブサイトを HTTPS で保護する必要がある理由については、HTTPS が重要な理由をご覧ください。
概要
[Security] パネルは、DevTools でページのセキュリティを検査する際の主要な場所です。[セキュリティ] パネルには、HTTP セキュリティに関する警告、オリジンの詳細、証明書など、ページのオリジンの概要が表示されます。
[セキュリティ] パネルを開く
[セキュリティ] パネルを開く手順は次のとおりです。
- DevTools を開きます。
- 次のコマンドを実行して、コマンド メニューを開きます。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Ctrl+Shift+P
「
security」と入力し、[セキュリティ パネルを表示] を選択して Enter キーを押します。![[セキュリティ] パネル。](https://developer.chrome.google.cn/static/docs/devtools/security/image/the-security-panel-fb87410ac98f6.png?hl=ja)
図 1. [セキュリティ] パネル
または、右上のmore_vert [その他のオプション] > [その他のツール] > [セキュリティ] を選択します。
一般的な問題
保護されていないメインオリジン
ページの主要なオリジンが保護されていない場合、[セキュリティの概要] に [このページは安全ではありません] と表示されます。
図 2. 保護されていないページ
この問題は、アクセスした URL が HTTP 経由でリクエストされた場合に発生します。安全にするには、HTTPS 経由でリクエストする必要があります。たとえば、アドレスバーの URL は http://example.com のようになります。セキュリティを確保するには、URL を https://example.com にする必要があります。
サーバーで HTTPS がすでに設定されている場合は、すべての HTTP リクエストを HTTPS にリダイレクトするようにサーバーを構成するだけで、この問題を解決できます。
サーバーに HTTPS が設定されていない場合は、Let's Encrypt を使用して、比較的簡単な方法でプロセスを開始できます。または、CDN でサイトをホストすることを検討してもよいでしょう。ほとんどのメジャーな CDN では、デフォルトでサイトを HTTPS でホストしています。
混合コンテンツ
混合コンテンツとは、ページのメインオリジンは保護されているが、そのページが保護されていないオリジンからリソースをリクエストしたことを意味します。混合コンテンツ ページは、HTTP コンテンツが盗聴者からアクセス可能で、man-in-the-middle 攻撃に対して脆弱であるため、部分的にしか保護されていません。
図 3. 混合コンテンツ
図 3 で、[ネットワーク パネルで 1 件のリクエストを表示] をクリックすると [ネットワーク] パネルが開き、mixed-content:displayed フィルタを適用して、ネットワーク ログにセキュアでないリソースのみを表示します。
図 4. ネットワーク ログに混在するリソース
詳細を表示
メインオリジン証明書を表示する
[セキュリティの概要] で [証明書を表示] をクリックすると、メインのオリジンの証明書をすばやく検査できます。
図 5. メインの送信元証明書
送信元の詳細を表示する
左側のナビゲーションにあるエントリのいずれかをクリックすると、送信元の詳細が表示されます。詳細ページでは、接続情報と証明書情報を確認できます。Certificate Transparency（証明書の透明性）情報があれば、それも表示されます。
図 6. メインオリジンの詳細