混在コンテンツの直し方｜httpsのページでhttpの画像は書き換えられ、スクリプトはブロックされる

https のページの中に、http:// で始まる画像やスクリプトが混じっている状態を「混在コンテンツ」という。
いまのブラウザは、画像・動画・音声なら自動で https に書き換えて読み込み、スクリプトやスタイルシート、iframe は読み込まずにブロックする。
画像は出るのにボタンが動かない、デザインが崩れる、という症状の原因がこれのことがある。

この記事は、MDN の「混在コンテンツ」のページを読んで、僕が理解した範囲で整理したものだ。
自分のサイトで起きた事故の話ではないので、体験談は入れていない。
仕組みと、確かめ方、直し方に絞った。

混在コンテンツとは

MDN の定義では、安全に読み込まれたページ、つまり https のページが、http などの保護されていない方法でリソースを取ってくることを指す。
ページ本体は暗号化されていても、その中で読む画像やスクリプトの通信が暗号化されていなければ、そこだけ中身を見られたり差し替えられたりする余地が残る。

よくあるのは、サイトを http から https に引っ越したあとだ。
記事の本文やテンプレートに、昔の http:// の絶対パスが残っていると、ページだけが https で、中身の一部が http のままになる。

画像は書き換え、スクリプトはブロック

MDN は、混在コンテンツを二つに分けて説明している。
一つは「アップグレード可能」なもの、もう一つは「ブロック可能」なものだ。

アップグレード可能なのは、img 要素の src、CSS の background-image などの画像、audio と video の src などだ。
これらは、ブラウザが http を https に書き換えてから取りに行く。
相手のサーバーが https で同じ画像を出していれば、見た目には何も起きない。
出していなければ、画像は表示されない。

ブロック可能なのは、それ以外のすべてだ。
MDN には、script の src、link の href（スタイルシートを含む）、iframe の src、fetch() や XMLHttpRequest、ウェブフォントなどが挙がっている。
これらは書き換えられずに、読み込みそのものが止められる。
スクリプトが止まればボタンやメニューが動かなくなり、スタイルシートが止まれば見た目が崩れる。

細かいところでは、img でも srcset や picture 要素で指定した画像はブロック側に入る。
URL のホストがドメイン名ではなく IP アドレスの場合も、画像であってもブロックされる、と MDN に書かれている。

確かめ方は、開発者ツールのコンソール

MDN によると、混在コンテンツがアップグレードされたりブロックされたりすると、開発者コンソールに警告が出る。
Firefox の画面が例に載っていて、Chrome にも同じような警告がある、とされている。

手順は単純だ。
気になるページを開いて、F12 で開発者ツールを出し、コンソールのタブを見る。
「Mixed Content」という言葉と一緒に、どの URL が問題なのかが表示される。
画像だけ書き換えられている場合は表示上なにも困らないので、コンソールを見ないと気づかないこともあると思う。

直し方は、http:// を https:// にすること

MDN が挙げている対策は、すべてを https で出すことだ。
自分のドメインの中のリソースは、相対パスか https のリンクに直す。
他のサイトのリソースは、https 版があればそちらを使う。
いちばん簡単なのは、http:// のリンクを https:// に置き換えることだ、とも書かれている。

置き換えたあとは、相手が本当に https で同じものを出しているかを確かめる必要がある。
https で開けない外部の画像やスクリプトは、書き換えても読み込めないので、別の提供元を探すか、自分のサーバーに置き直すことになる。

MDN の関連情報には、CSP の upgrade-insecure-requests という指定も載っている。
ブロック可能なものも含めて、すべてのリクエストを https に上げる指定だ。
ただ、僕は先に本文やテンプレートの http:// を直すほうを選ぶ。
指定で上げても、相手が https に対応していなければ読めないことは変わらないからだ。

鍵マークとの関係

アドレスバーの鍵マークは、ページ本体の通信が暗号化されていることを示すものだ。
混在コンテンツが残っていると、ブラウザによっては鍵の表示が変わったり、警告のアイコンが出たりする。
MDN にも、警告とともに混在コンテンツを示すアイコンを出すブラウザーがある、と書かれている。
鍵マークそのものの話はアドレスバーの鍵マークの記事に、外部から届くファイルの話はCDNの記事にまとめた。

僕が気をつけていること

記事を書くとき、画像や外部のリンクは https で始まる URL か、/ から始まる自分のサイトの絶対パスで書く。
http:// で始まる URL を貼りそうになったら、https に変えても開けるかを先に確かめる。
http から https へ引っ越したサイトなら、一度データベースや本文を「http://」で検索してみると、残っている場所が分かると思う。

出典

• 混在コンテンツ｜MDN Web Docs