Mixed Content警告でhttpリソースがブロックされるときの対処

Mixed Contentとは何か

Mixed Content（混在コンテンツ）とは、httpsで配信されているページの中に、httpで読み込もうとしているリソースが混ざっている状態を指します。ページ自体は暗号化されているのに、一部のファイルだけ暗号化されていない経路で取りに行くため、ブラウザが安全のために止めます。

リソースの種類によって扱いが分かれます。スクリプトやスタイルなどページの動作に関わるものは強くブロックされ、画像などは警告にとどまることもありますが、近年のブラウザはまとめて止める方向に厳しくなっています。

なぜブロックされるのか

httpsはページと利用者の間の通信を暗号化し、改ざんや盗み見を防ぎます。ところがその中にhttpの読み込みが一つでもあると、そこだけ第三者に書き換えられる余地が生まれ、ページ全体の安全性が崩れます。これを防ぐためにブラウザが混在を拒否します。

つまりMixed Contentはバグではなく、安全のための仕様です。直し方も「httpの読み込みをやめてhttpsに統一する」という方向で考えるのが正しく、ブラウザ側の警告を無視する方法を探すのは筋が良くありません。

症状別チェック表

Mixed Content警告でhttpリソースがブロックされるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

httpの読み込みを見つけて直す手順

どのリソースがhttpで読まれているかを特定し、httpsに置き換えます。次の順で進めると漏れがありません。

1. F12でConsoleを開き、Mixed Contentの警告に書かれたURLを控える
2. そのURLがhttp://で始まっていることを確認する
3. HTML・CSS・JS内でそのURLを検索し、http://をhttps://に書き換える
4. src="http://" だけでなくCSSのurl()やfetch先も同様に確認する
5. 置き換え後に再読み込みし、警告が消えてリソースが表示・実行されるか確かめる

https化できない外部リソースの扱い

参照先がhttpsに対応していない場合、URLをhttpsに変えただけでは取得できません。その外部サービスがhttpsのエンドポイントを提供していないか確認し、なければ自分のファイルとして取り込んでZIPに同梱し、相対パスで読み込む方法に切り替えます。

プロトコルを省略した //example.com/... のような書き方は、ページがhttpsなら自動でhttpsになりますが、参照先がhttps非対応だと結局取得できません。最終的には参照先がhttpsで配信できることが前提になります。

https前提の環境で確認する

Mixed Contentはhttpsで配信されたページでしか起きないため、ローカルでファイルを直接開いて確認しているだけでは見落としがちです。本番がhttpsなら、確認もhttps環境で行うのが確実です。

ギガサイト便は共有URLがHTTPSで自動配信されるため、httpの読み込みが残っていればその場でブラウザが警告を出してくれます。HTMLやZIPをドロップして 〇〇.giga-site.com で開き、Consoleを確認しながらhttp://を一つずつhttps://に直していけます。同じURLのまま差し替えられるので、修正版をすぐ再検証できます。