見えるセキュリティ

混在コンテンツ(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ページと参照先を見る

現在のSTEP 1STEP 2STEP 3STEP 4

ページ本体はHTTPSで届きました。HTMLのscriptはHTTPのURLを指定しています。

技術的な詳細を見る

通常の外部script(classic script)を扱います。ページはhttps://shop.example/menu。scriptのホスト・パス・用途・想定本文は共通で、srcのスキームだけが異なります。module・crossorigin・integrityは使いません。[M01・M02]

パネルの開閉ではSTEPは変わりません。

この概念の要点

  • 要点

    ページ本体と、資源の通信は別

    HTTPSのHTMLを開いても、HTTPで指定した資源の通信までHTTPSになるとは限りません。ページと参照先の両方を確認します。[M03]

  • 要点

    資源の種類と条件で扱いが変わる

    主例のHTTP scriptは送信前に止まります。一方、通常の画像などは、条件を満たすと取得先がHTTPSへ変更されます。[M01・M02・M06]

  • 要点

    HTTPSで配信できる資源を参照する

    HTTPSのURLで内容・配信・動作を確認し、参照先を修正します。HTTPSによる通信保護は、コード自体の安全性の保証とは別です。[M03]

理解確認

主図の「HTTPを指定」で起きていることはどれですか?

理解確認

補足の画像で、ブラウザがHTTPの参照をHTTPSへ変更しました。しかしHTTPSでは使える画像を取得できません。正しい説明はどれですか?

理解確認

混在コンテンツを修正する進め方として適切なのはどれですか?

混在コンテンツの補足

なぜページ本体の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="案内バナー">
通常のimg src:通信前にHTTPSへ変更

ドメイン名を指定し、srcset・picture・crossoriginを使わない例です。

  1. 1. HTMLの指定

    http://cdn.example/banner.png
  2. 2. ブラウザ内でURL変更

    → 通信前にHTTPSへ

    https://cdn.example/banner.png
  3. 3. HTTPSでの結果

    正常に取得できれば表示

    案内バナー(説明用)

    接続・証明書・応答等の問題で使えなければ

    表示できない

失敗してもHTTPへ戻して取得しません。[M06]

資源の拡張子だけで扱いは決まりません。通常の混在コンテンツ自動アップグレードでは、IPアドレス指定やimgのsrcset・pictureには対象外となる条件があります。localhost・ループバック等の信頼できるURLの例外もあるため、画像なら必ず成功するわけでも、HTTPなら例外なくすべて停止するわけでもありません。[M01 §4.1・M05]

CORS・SRI・CSPと何が違う?
それぞれの仕組みが扱う条件
仕組みこの教材に関係する役割
混在コンテンツの処理HTTPSページ内の、保護されない資源の読み込みを扱う
CORSCORSを使う要求の応答共有条件を扱う。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]

参考資料

RELATED CONCEPTS