Mixed Content (混在コンテンツ, MIX)

混在コンテンツ (Mixed Content) とは、httpsで暗号化している文書の中にhttpな暗号化されていないリソースが紛れ込んでいる状態の事。

仕様

種類

混在コンテンツは2種類に分類されている。

オプションでブロック可能
画像 (img srcsetpictureを除く, SVGの画像、CSSの*-imageは含む)/video/audio
公式外のドキュメントでは「パッシブコンテンツ」と呼ばれる事もある
ブロック可能
上記以外のすべてのリソース
公式外のドキュメントでは「アクティブコンテンツ」と呼ばれる事もある

動作

各ブラウザでブロックされているコンテンツを確認する方法

ブラウザによって若干文言は異なるが、開発者ツールの「コンソール」タブに以下のように列挙されるので、対象のリソースをhttpsに変換するなど対処する。

ある種予想通りだが、ブラウザによって実装状況が異なるので、1ブラウザでテストするだけでは十分ではない。そのため、大量のページがあるようなサイトでhttpsに移行する場合は何らかの戦略が必要になると思われる。

各ブラウザの実装状況

実際の各ブラウザでの挙動を確認してみる。

Firefox
iframeでdataスキームを利用すると混在コンテンツを読み込める(block-all-mixed-content指定有無に関わらず)
Chrome/Opera/Android Chrome
pictureがパッシブコンテンツ扱い
Safari
https時にhttpのsrcset属性がブロックされない。https時にhttpの127.0.0.1がブロックされる。pictureがパッシブコンテンツ扱い。iframeでdataスキームを利用すると、embed/objectの混在コンテンツを読み込める。親フレームがhttpで子フレームがhttpsでも、iframeやウェブフォントなど一部のオプションでアクティブコンテンツを読み込める。
Edge
imgにhttpのsrcset属性が指定されていた場合、src属性ごとブロックされる。localhostがブロックされない。iframeのdataスキームをサポートしていない。block-all-mixed-contentをサポートしていない。
Internet Explorer
httpの127.0.0.1をブロックする。objectの混在コンテンツを読み込める。iframeのdataスキームをサポートしていない。CSPをサポートしていない。

HTTPヘッダーを使ってhttpをhttpsにアップグレードする

文書中のhttpをhttpsにいい感じに置換するUpgrade Insecure Requestsという仕組みがある。

各ブラウザで混在コンテンツを許可する方法

いずれも一時的な解除となっている。

Firefox

アドレスバー左側に!なアイコンが表示されているのでそれをクリックし、出てきたポップアップの「>」マークをクリックする。

「このセッションのみ保護を無効にする」をクリックする。

Chrome

アドレスバー右側のシールドマークをクリックし、出てきたポップアップの「安全でないスクリプトを読み込む」をクリックする。

Opera

アドレスバー右側から分かりやすく黄色い「ブロックされたコンテンツ」というのがニョキっと伸びてくるので、それをクリックし、出てきたポップアップの「ブロックを解除」をクリック。

Safari (iOS含む)

ない。

Edge

アドレスバー右のシール度マークをクリックするとこのようなポップアップが表示されるので、「すべてのコンテンツを表示」をクリック。

Internet Explorer

読み込んだ時に下からこのようなバーが表示されるので、「すべてのコンテンツを表示」をクリック。

Android Chrome

ない。

テストしたブラウザ

参考