HTTPS 内の HTTP 混在 - Mixed Content

HTTPS ページ内で HTTP リソースを読み込むことで発生するセキュリティリスク。中間者攻撃によるリソース改ざんの危険がある。

概念図

実例

Passive と Active な Mixed Content

bash

<!-- Mixed Content の例（HTTPS ページ内） -->
<img src="http://example.com/image.png">         <!-- Passive: ブロックされない場合あり -->
<script src="http://example.com/script.js"></script>  <!-- Active: ブラウザがブロック -->

Mixed Content の修正方法

bash

<!-- 安全な修正 -->
<img src="https://example.com/image.png">

<!-- プロトコル相対 URL（非推奨だが互換性のため） -->
<img src="//example.com/image.png">

<!-- CSP でアップグレードを強制 -->
Content-Security-Policy: upgrade-insecure-requests

2 種類の Mixed Content

Active Mixed Content（能動的）: <script>, <link>, <iframe>, XMLHttpRequest など、ページの動作に直接影響するリソース。ブラウザが自動的にブロックする
Passive Mixed Content（受動的）: <img>, <audio>, <video> など、ページの動作には直接影響しないリソース。ブラウザによっては警告を出しつつ読み込む場合がある

いずれの場合も、HTTP で配信されるリソースは中間者攻撃で改ざん・差し替えが可能。

Active の場合は任意のコードが実行されるリスクがある。

対策

全リソースを HTTPS に移行: http:// を https:// に書き換える
CSP upgrade-insecure-requests: ブラウザに HTTP リクエストを自動的に HTTPS へアップグレードさせる
CSP block-all-mixed-content: Mixed Content を全てブロックする（より厳格）
HSTS の設定: サイト全体を HTTPS 強制にし、HTTP でのアクセスを排除する
CI/CD での検出: ビルド時に HTTP URL を検出するリンターを導入する

概念図

実例

2 種類の Mixed Content

対策

関連トピック