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

Kayce Basques

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

概要

[Security] パネルは、DevTools でページのセキュリティを検査する際の主要な場所です。[セキュリティ] パネルには、HTTP セキュリティに関する警告、オリジンの詳細、証明書など、ページのオリジンの概要が表示されます。

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

[セキュリティ] パネルを開く手順は次のとおりです。

  1. DevTools を開きます。
  2. 次のコマンドを実行して、コマンド メニューを開きます。
    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Ctrl+Shift+P

  3. 「security」と入力し、[セキュリティ パネルを表示] を選択して Enter キーを押します。

    [セキュリティ] パネル。

    図 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. メインオリジンの詳細