見えるセキュリティ
混在コンテンツ(Mixed Content)
MIXED CONTENT
この概念とは?
混在コンテンツは、HTTPSで開いたページが、HTTPなどの保護されていない通信で資源(JavaScriptや画像など)を読み込もうとすることです。ページ本体がHTTPSでも、その資源の通信まで保護されるわけではありません。ブラウザは資源の種類や条件に応じて、読み込みを止めたり、取得先をHTTPSへ変更したりします。[M01・M03・M07]
HTTPSで開いたページなのに、なぜ外部JavaScriptを読み込めないのか?
- THEME
- web-vuln
- KIND
- mechanism
- REVIEW
- self-reviewed ·
同じHTTPSページで、外部JavaScriptのURLだけをHTTPからHTTPSへ変えます。この例では、自動的にURLを書き換える追加設定はなく、HTTPS側の配信・証明書・ほかの読み込み条件は正常です。
STEP 1 / 4
HTMLがブラウザに届く
ページの配信元
HTMLを届ける
HTTPS
shop.example
HTML:HTTPSで取得済み
JavaScriptの配信先
要求が届けば返す
HTTP
cdn.example
このJavaScriptの働き
ページの文字を「メニュー未読込」から「メニュー表示」へ変える。
配信する想定の内容です。受信済みを示すものではありません。
閲覧しているブラウザ
https://shop.example/menu
HTMLに書かれたJavaScriptの参照先
http://cdn.example/menu.js
参照先は、まだ確認前
未判定参照URLの確認はこれから
script本文:未受信
資源要求:未送信
資源の要求は、まだ送っていません。
JavaScriptの実行前なので、表示は変わりません。
ページ表示(説明用)
メニュー未読込
script:未実行
HTMLの初期表示です。まだ書き換えられていません。
ページの配信元 → ブラウザ:HTTPSのHTML応答。JavaScriptは、これから参照先を確認します。
HTMLの参照を見る
<p id="menu-status">メニュー未読込</p>
<script src="http://cdn.example/menu.js"></script>架空のURLを使った図解です。実際の通信・JavaScriptの実行は行いません。
HTTPSページのHTMLは取得済みです。参照するscriptはHTTP。現在はSTEP 1、ブラウザの判定は未判定、要求は未送信、本文は未受信、scriptは未実行、ページ表示は「メニュー未読込」です。
このHTTP scriptは、ブラウザが送信前に止めるため取得されません。HTTPSで配信できるURLへ参照を直すと、この例では取得・実行へ進めます。ページ本体だけでなく、読み込む資源もHTTPSで配信できるか確認することが大切です。[M02・M03]
STEP 01 / 4
HTTPSページと参照先を見る
STEP 1 / 4: HTTPSページと参照先を見る
ページ本体はHTTPSで届きました。HTMLのscriptはHTTPのURLを指定しています。
技術的な詳細を見る
通常の外部script(classic script)を扱います。ページはhttps://shop.example/menu。scriptのホスト・パス・用途・想定本文は共通で、srcのスキームだけが異なります。module・crossorigin・integrityは使いません。[M01・M02]
この概念の要点
要点
ページ本体と、資源の通信は別
HTTPSのHTMLを開いても、HTTPで指定した資源の通信までHTTPSになるとは限りません。ページと参照先の両方を確認します。[M03]
要点
資源の種類と条件で扱いが変わる
主例のHTTP scriptは送信前に止まります。一方、通常の画像などは、条件を満たすと取得先がHTTPSへ変更されます。[M01・M02・M06]
要点
HTTPSで配信できる資源を参照する
HTTPSのURLで内容・配信・動作を確認し、参照先を修正します。HTTPSによる通信保護は、コード自体の安全性の保証とは別です。[M03]
理解確認
理解確認
理解確認
混在コンテンツの補足
なぜページ本体のHTTPSだけでは足りない?
HTMLと、その中で指定したJavaScript・画像などは、別の要求で取得されます。HTTPの通信にはHTTPSによる通信保護がなく、通信経路で内容を見られたり変更されたりする危険があります。HTTPSのページがHTTPのscriptを取り込めば、そのscriptを通してページへ影響する恐れがあります。[M01 §1・M03]
主図は、そのHTTP scriptをブラウザが止める場面です。HTTPSで取得できたことだけでは、脆弱性がないことや、配信元を全面的に信頼できることは確認できません。
画像などの自動アップグレード
通常のドメイン名を使う<img src>、音声・動画などでは、ブラウザがHTTPの参照URLを、通信前にHTTPSへ変更する扱いがあります。これはHTTPで受信したデータを後から暗号化する処理ではありません。[M01 §4.1・M06]
<img src="http://cdn.example/banner.png" alt="案内バナー">ドメイン名を指定し、srcset・picture・crossoriginを使わない例です。
1. HTMLの指定
http://cdn.example/banner.png2. ブラウザ内でURL変更
→ 通信前にHTTPSへ
https://cdn.example/banner.png3. HTTPSでの結果
正常に取得できれば表示
案内バナー(説明用)接続・証明書・応答等の問題で使えなければ
表示できない
失敗してもHTTPへ戻して取得しません。[M06]
資源の拡張子だけで扱いは決まりません。通常の混在コンテンツ自動アップグレードでは、IPアドレス指定やimgのsrcset・pictureには対象外となる条件があります。localhost・ループバック等の信頼できるURLの例外もあるため、画像なら必ず成功するわけでも、HTTPなら例外なくすべて停止するわけでもありません。[M01 §4.1・M05]
CORS・SRI・CSPと何が違う?
| 仕組み | この教材に関係する役割 |
|---|---|
| 混在コンテンツの処理 | HTTPSページ内の、保護されない資源の読み込みを扱う |
| CORS | CORSを使う要求の応答共有条件を扱う。HTTP通信をHTTPSへ変える設定ではない |
| SRI | 取得した資源の内容を期待ハッシュと照合する。通信を暗号化する設定ではない |
| CSPのupgrade-insecure-requests | 対象のHTTP資源要求を、送信前にHTTPSへ書き換える方針を指定する |
CORS許可やintegrityを指定しても、それが主例のHTTP scriptを許可する根拠にはなりません。主図は、ほかの仕組みを同時に切り替えない例です。[M02]
Content-Security-Policy: upgrade-insecure-requestsこのCSPによる書き換えは、通常の画像等の自動アップグレードとは範囲が異なり、scriptなども対象にできます。ただし配信先のHTTPS対応は別途必要で、HTTPSで使えなければHTTPへ戻りません。主図にはこの設定がないため、HTTP scriptは書き換えず止まります。[M04 §3.1・3.1.1・1.2.3]
HSTSも関連しますが、ページ内のすべての外部配信先へ一律の方針を設定するものではなく、役割・適用範囲が異なります。今回の主図はHSTS等による先行変更を含めません。[M04 §8.2]
古いblock-all-mixed-contentは現行Mixed Content公開仕様でobsoleteとされています。新しい設定として導入することは勧めません。[M01 §6.1]
参照先を直すときの確認
まずHTTP参照を特定し、同じ資源をHTTPSで配信できるか、内容と動作を確認してから参照先を更新します。接続・証明書・ファイルの有無を確認せず、文字列だけを置き換えて完了としません。HTTPSで提供できない資源は、適切に提供できるものへの変更等を検討します。[M03・M07]
確認する参照にはHTMLに書いたURLのほか、CSSやJavaScriptが生成するURLもあります。ブラウザのConsole・Network等の開発者ツールで、実際のページと資源の読み込みを確認します。保護を無効化して表示できれば修正完了、とは扱いません。[M07]
別オリジンかどうか、社内か社外かだけで混在コンテンツを判断するわけではありません。同じホスト名でも、HTTPSページがHTTP資源を参照すれば、この問題になり得ます。HTTPのページからHTTP資源を読むだけの例は、HTTPSページの混在コンテンツとは区別します。HTTPだけの通信が安全だという意味ではありません。[M01 §2・M03]
通常のリンクによる最上位ページへの移動、フォーム送信、ファイルのダウンロードには別の判定・扱いもあります。本教材の「送信前に停止」は、主図の条件の外部scriptについての説明です。すべての読み込み失敗を同じタイミングへ一般化しません。[M01 §4.4–5.2・7.1]
参考資料
- 参考資料W3C — Mixed Content
M01Candidate Recommendation Draft(2023-02-23版)|§1–2、3.2、4.1・4.4、5.2、6.1・7.1|定義・対象・例外・旧設定|確認:2026-10-14
- 参考資料WHATWG — Fetch Living Standard
M02Living Standard|§4.1 Main fetch|URL変更・事前ブロック・network error・ネットワーク取得|確認:2026-10-14
- OWASPOWASP — Transport Layer Security Cheat Sheet
M03運用指針|Introduction、Use TLS For All Pages、Do Not Mix TLS and Non-TLS Content|資源もHTTPSで提供する方針|確認:2026-10-14
- 参考資料W3C — Upgrade Insecure Requests
M04Candidate Recommendation(2015-10-08版)|§1.2.3、3.1・3.1.1、4.1、8.2|CSPによる変更・失敗・HSTSとの区別|確認:2026-10-14
- 参考資料W3C — Secure Contexts
M05Candidate Recommendation Draft(2023-11-10公開版)|§3.1–3.2、5.2|信頼できるURL・localhost等の条件|確認:2026-10-14
- 参考資料Mozilla Security Blog — Firefox will upgrade more Mixed Content in Version 127
M06Firefox 127の開発元による実装説明(2024-06-05)|画像・音声・動画の変更とHTTPS失敗|確認:2026-10-14
- 参考資料MDN Web Docs — Mixed content
M07補助文書|冒頭、Types、Developer console、Fixing mixed content issues|説明・修正確認の補助。対象条件はW3Cを優先|確認:2026-10-14