8.2 Security

Security Panel

Securityパネルは、ページのセキュリティ状態を確認するツール。HTTPS接続、証明書の有効性、Mixed Contentの問題を診断できる。安全なWebサイト運営に必要な情報を提供する。

Securityパネルの概要

パネルを開く

F12 → Securityタブ

表示されていない場合: タブバー右端の「+」または「≫」→ Security を選択

主な機能

機能 説明
Security Overview ページ全体のセキュリティ状態を表示
Origin Details 各オリジン（ドメイン）の詳細情報
Certificate Viewer SSL/TLS証明書の内容を確認

セキュリティ状態

ページのセキュリティ状態は3段階で表示される。

状態 アイコン 説明
Secure 🔒（緑） 有効なHTTPS接続、問題なし
Info / Not Secure ⓘ（グレー） HTTP接続、またはセキュリティ上の注意点あり
Not Secure ⚠️（赤） 証明書エラー、Mixed Content等の問題あり

アドレスバーの表示

Chromeのアドレスバーにも同様のアイコンが表示される。クリックすると簡易的なセキュリティ情報を確認できる。

Security Overview

左側のパネルに表示される概要情報。

評価項目

項目 説明
Certificate SSL/TLS証明書が有効か
Connection 接続プロトコル（TLSバージョン、暗号スイート）
Resources すべてのリソースが安全に提供されているか

よくあるメッセージ

メッセージ 意味
This page is secure (valid HTTPS) 問題なし
This page is not secure HTTP接続、または問題あり
Mixed content HTTPSページ内にHTTPリソースが混在
Certificate error 証明書に問題あり

証明書の確認

SSL/TLS証明書の詳細を確認できる。

確認方法

操作手順

  1. Security Overviewで「View certificate」をクリック
  2. または、オリジンを選択して「View certificate」

証明書情報

項目 説明
Issued to 証明書の発行対象（ドメイン名）
Issued by 認証局（CA）
Valid from / to 有効期間
Serial number 証明書のシリアル番号
Signature algorithm 署名アルゴリズム（SHA-256等）
Public key 公開鍵情報（RSA 2048bit等）

証明書チェーン

証明書ビューアの上部で、ルート証明書から中間証明書、サーバー証明書までのチェーンを確認できる。

接続の詳細

TLS接続に関する技術的な詳細を確認できる。

表示される情報

項目 説明 推奨値
Protocol TLSのバージョン TLS 1.2以上（1.3推奨）
Key exchange 鍵交換アルゴリズム ECDHE（前方秘匿性あり）
Cipher 暗号化アルゴリズム AES-128-GCM、AES-256-GCM等
前方秘匿性（Forward Secrecy） ECDHEなどの鍵交換を使用すると、サーバーの秘密鍵が漏洩しても過去の通信は復号できない。現代のベストプラクティス。

Mixed Content

HTTPSページ内にHTTPで読み込まれるリソースが混在している状態。セキュリティ上の問題となる。

Mixed Contentの種類

種類 対象 ブラウザの動作
Passive/Display 画像、動画、音声 警告表示、読み込みは許可（一部ブロック）
Active スクリプト、スタイルシート、iframe、fetch ブロック（読み込まれない）

検出方法

操作手順

  1. Securityパネルを開く
  2. 「Resources」セクションを確認
  3. 「mixed content」の警告があれば問題あり
  4. 詳細をクリックして問題のリソースを特定

Consoleでの確認

Mixed Contentの警告はConsoleにも表示される。

// 警告メッセージの例
Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, 
but requested an insecure image 'http://example.com/image.jpg'. 
This content should also be served over HTTPS.

修正方法

  • リソースのURLをHTTPSに変更
  • プロトコル相対URL（//example.com/...）を使用
  • Content-Security-Policy: upgrade-insecure-requests を設定

オリジン別の確認

ページが読み込むすべてのオリジン（ドメイン）のセキュリティ状態を個別に確認できる。

オリジン一覧

左側のパネルに、メインオリジンとサードパーティオリジンが一覧表示される。各オリジンをクリックすると詳細を確認できる。

確認できる情報

  • 証明書の詳細
  • 接続プロトコル
  • セキュリティ上の問題
サードパーティの監査 広告、アナリティクス、CDNなど外部サービスのセキュリティも確認可能。すべてのオリジンがHTTPSであることを確認する。

よくある問題と対策

証明書の期限切れ

症状: 「NET::ERR_CERT_DATE_INVALID」エラー

対策: 証明書を更新。Let's Encryptなどの自動更新を設定。

ドメイン名の不一致

症状: 「NET::ERR_CERT_COMMON_NAME_INVALID」エラー

対策: 正しいドメイン名の証明書を取得。ワイルドカード証明書やSANを検討。

自己署名証明書

症状: 「NET::ERR_CERT_AUTHORITY_INVALID」エラー

対策: 信頼された認証局から証明書を取得。開発環境ではmkcertなどを使用。

中間証明書の欠落

症状: 一部のブラウザ/デバイスでエラー

対策: サーバーに中間証明書を正しく設定。証明書チェーンを確認。

古いTLSバージョン

症状: セキュリティ警告、接続拒否

対策: TLS 1.2以上を使用。TLS 1.0/1.1は無効化。

Content Security Policy

CSP（Content Security Policy）はXSS攻撃などを防ぐセキュリティヘッダー。DevToolsで確認可能。

確認方法

操作手順

  1. Networkパネルを開く
  2. HTMLドキュメントを選択
  3. Headersタブで「content-security-policy」を確認

CSP違反の確認

CSPに違反するリソースはConsoleにエラーとして表示される。

// CSP違反のエラー例
Refused to load the script 'http://evil.com/script.js' because it 
violates the following Content Security Policy directive: "script-src 'self'".

Issues パネル

Issuesパネル（Ctrl+Shift+P → Show Issues）で、CSP関連の問題を一覧表示できる。

Permissions Policy

ブラウザ機能（カメラ、マイク、位置情報等）の使用を制御するセキュリティ機構。

確認方法

Application パネル → Frames → 対象のフレーム → Permissions Policy で確認可能。

確認できる権限

  • camera
  • microphone
  • geolocation
  • fullscreen
  • payment
  • その他多数

セキュリティ確認のTips

定期的な確認

証明書の有効期限、サードパーティリソースのセキュリティを定期的に確認する。

外部ツールとの併用

より詳細な診断には、SSL Labs（ssllabs.com）やSecurityHeaders（securityheaders.com）などの外部ツールを併用。

開発環境でのHTTPS

localhostでもHTTPSを使用することで、本番環境に近いテストが可能。mkcertを使用すると簡単にローカル証明書を作成できる。

参考文献
[1] Understand security issues - Chrome DevTools. developer.chrome.com
[2] What is mixed content? - web.dev. web.dev
[3] Content Security Policy - MDN. developer.mozilla.org