セキュリティ: セキュリティの問題を理解する

Kayce Basques

Chrome DevTools の [Security] パネルを使用して、HTTPS がページに正しく実装されていることを確認します。ユーザーの機密情報を扱っていないサイトも含め、すべてのウェブサイトを HTTPS で保護すべき理由については、HTTPS が重要な理由をご覧ください。

[セキュリティ] パネルを開く

[Security] パネルは、DevTools でページのセキュリティを検査するための主要な場所です。

1. DevTools を開きます。

2. [セキュリティ] タブをクリックして、[セキュリティ] パネルを開きます。

   

   図 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 トラフィックを HTTPS にリダイレクトする」監査を使用すると、すべての HTTP リクエストが HTTPS にリダイレクトされることを保証するプロセスを自動化できます。

混合コンテンツ

混合コンテンツとは、ページのメインオリジンは保護されているが、そのページが保護されていないオリジンからリソースをリクエストしたことを意味します。混合コンテンツ ページは、HTTP コンテンツがスニッファーにアクセスでき、中間者攻撃に対して脆弱であるため、部分的にしか保護されません。

図 3. 混合コンテンツ

上の図 3 で、[ネットワーク パネルに 1 件のリクエストを表示] をクリックすると [ネットワーク] パネルが開き、mixed-content:displayed フィルタを適用して、ネットワーク ログにセキュアでないリソースのみを表示します。

図 4. ネットワーク ログの混合リソース

詳細を表示

メインのオリジン証明書を表示

[セキュリティの概要] で [証明書を表示] をクリックすると、メインのオリジンの証明書をすばやく検査できます。

図 5. メインオリジン証明書

送信元の詳細を表示

左側のナビゲーションにあるエントリの 1 つをクリックして、送信元の詳細を表示します。詳細ページで、接続と証明書の情報を確認できます。Certificate Transparency（証明書の透明性）情報があれば、それも表示されます。

図 6. メインオリジンの詳細