Chrome DevTools の [セキュリティ] パネルで、HTTPS がページに適切に実装されていることを確認します。 ユーザーの機密情報を扱わないサイトであっても、すべてのウェブサイトを HTTPS で保護する必要がある理由については、HTTPS が重要な理由をご覧ください。
[セキュリティ] パネルを開く
[セキュリティ] パネルは、DevTools でページのセキュリティを検査するための主要な場所です。
- DevTools を開きます。
[セキュリティ] タブをクリックして [セキュリティ] パネルを開きます。
図 1. セキュリティ パネル
一般的な問題
保護されていないメインオリジン
ページの主要なオリジンがセキュアでない場合、[セキュリティの概要] に「このページは安全ではありません」と表示されます。
図 2. 保護されていないページ
この問題は、アクセスした URL が HTTP 経由でリクエストされた場合に発生します。セキュリティを確保するには、HTTPS 経由でリクエストする必要があります。たとえば、アドレスバーの URL は http://example.com のようになります。保護するには、URL を https://example.com にする必要があります。
サーバーですでに HTTPS を設定している場合は、すべての HTTP リクエストを HTTPS にリダイレクトするようにサーバーを設定するだけで、この問題を解決できます。
サーバーで HTTPS を設定していない場合は、Let's Encrypt を使用して無料で比較的簡単にプロセスを開始できます。また、CDN でサイトをホストすることもできます。現在、主要な CDN のほとんどは、デフォルトで HTTPS でサイトをホストしています。
ヒント: Lighthouse の「HTTP Traffic to HTTPS」監査は、すべての HTTP リクエストが HTTPS にリダイレクトされることを確認するプロセスの自動化に役立ちます。
混合コンテンツ
混合コンテンツとは、ページの主要なオリジンは安全であるものの、ページがセキュアでないオリジンからリソースをリクエストしたことを意味します。混合コンテンツ ページは、HTTP コンテンツが盗聴者にアクセスでき、中間者攻撃に対して脆弱であるため、部分的にしか保護されません。
図 3. 混合コンテンツ
上の図 3 で、[ネットワーク パネルに 1 リクエストを表示] をクリックすると、[ネットワーク] パネルが開き、mixed-content:displayed フィルタを適用して、ネットワーク ログにセキュアでないリソースのみが表示されるようにします。
図 4. ネットワーク ログ内の混合リソース
詳細を表示
メインのオリジン証明書を表示
[セキュリティの概要] で [証明書を表示] をクリックして、メインの送信元の証明書をすばやく検査します。
図 5. メインのオリジン証明書
送信元の詳細を表示
左側のナビゲーションでいずれかのエントリをクリックすると、送信元の詳細が表示されます。詳細ページで、接続と証明書の情報を確認できます。可能な場合は、Certificate Transparency（証明書の透明性）も表示されます。
図 6. 主な送信元の詳細