🎄 この記事は デイトラプログラミングコース Advent Calendar 2025 4日目の記事です 🎁
はじめに
ポートフォリオとして制作したWebアプリにフィードバックをいただき、それを基にバグを調査するなかで、「Mixed Content」 という状態があることを知ったため、その確認方法などをまとめておきたいと思います。
※ フィードバックを基にバグ解消 & 機能改善を実施した内容は こちら↗︎ にまとめています。
❓ そもそも Mixed Content ってなんなの？
Mixed Content とは、SSL化されたHTTPS通信で表示されているWebサイト内にHTTP通信で読み込まれるコンテンツが混在している状態のことを指します。
暗号化された安全なWebサイトに暗号化されていないコンテンツが含まれることで、セキュリティが脆弱になり、攻撃者に通信を傍受されたり、情報を改ざんされたりするリスクが生じる恐れがあります。
Mixed Content には Passive Content と Active Content の2種類があります。
| 種類 | 特徴 | 危険性 | 例 |
|---|---|---|---|
| Passive Content | ページのほかの部分とやり取りできないコンテンツ | 低 | 画像、動画、音声など |
| Active Content | ページ全体とやり取りをして変更できるコンテンツ | 高 | スクリプト、iframe、CSSなど |
かつては Passive Content はセキュリティリスクが低いとしてそのまま許容（HTTPのまま読み込んで表示）されることもあったようですが、現在ではWeb全体のHTTPS化の推進に伴いセキュリティ対策が強化され、どちらのコンテンツも自動アップグレードまたはブロックされるようになりました。
🔍 どのように原因を特定したの？
Mixed Content が原因であると判明するまでに、時間がかかりました。というのも、私の実行環境ではバグを再現できなかったのです。
想定どおりの挙動になっており、DevTools の Elements や Console を確認しても原因となるメッセージ等は見当たりませんでした。
バグを報告してくださった方に再現できなかったために解消までにお時間をいただくことをお伝えしたところ、追加でバグ周辺の情報を共有してくださいました。共有いただいた Console のエラーメッセージを見て、ようやく Mixed Content が原因だと気づくことができました。
Mixed Content（混在コンテンツ）
このページはHTTPSを使用して読み込まれているのに、安全でないHTTPのstylesheetを要求したからブロックしたよ。
コンテンツはHTTPSで提供される必要があるよ。
🔍 どうしてバグを再現できなかったの？
Mixed Content が原因ということはわかりましたが、ではなぜ、私の実行環境では再現できなかったのでしょうか。
これには、Mixed Contentの説明 で触れた 「自動アップグレード」 が関係していると考えられます。
🆙 Automatic Upgrade of Mixed Content (混在コンテンツの自動アップグレード)
モダンブラウザの多くは、「Automatic Upgrade of Mixed Content」 機能をサポートしており、HTTPSのページにHTTPのリソースが混在している場合、自動的にそのリソースをHTTPSにアップグレードしてくれます。
HTTPSでの読み込みに成功した場合はコンテンツが正常に表示され、失敗した場合はブロックされます。
ブラウザによって自動アップグレードの対象範囲や優先度が異なるため、私の実行環境（Chrome）ではアップグレードに成功し、バグを報告してくださった方の実行環境（Brave）ではアップグレードに失敗あるいは対象外としてブロックされた、と考えることができます。
❓ 自動アップグレードされたことは確認できるの？
前述のとおり、DevTools の Console には何もメッセージは表示されていませんでした。
そこで Security と Network を確認し、Mixed Content やそれを自動アップグレードした形跡があるか探ってみることにしました。
🧐 Security 確認手順
- [F12] で DevTools を開く
- Privacy and security タグを開く
- Security の Overview を確認
✅ 結果
This page has a non-HTTPS secure origin. というメッセージが表示され、ページ内にHTTPS以外のリソースが混ざっていることがわかりました。
🧐 Network 確認手順
- [F12] で DevTools を開く
- Network タブを開き、ページを再読み込み
- 該当のCSSを検索
- Headers タブを確認
✅ 結果
該当のCSSが3つ表示され、それぞれのステータスコードからChromeが自動アップグレードを実行し、成功していたことが読み取れます。
①
②
③
① 307 Internal Redirect: ChromeがHTTPを検知し、HTTPSにリダイレクトしている
② 302 Found: CDNによってリダイレクトが返ってきている
③ 200 OK: 目的のCSSファイルの取得に成功している
💡 どうやって解決したの？
解決方法はシンプルで、HTTPで記載してしまっていた参照ファイルをHTTPSに修正すればOKです。
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<!-- before: CSS参照がHTTPになっていた -->
- <link rel="stylesheet" href="http://unpkg.com/easymde/dist/easymde.min.css">
- <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<!-- after: HTTPSかつより可用性が高いとされているjsDelivrに変更 -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+ <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
修正後に再度 DevTools の Security と Network を確認したところ、以下のような結果が得られ、Mixed Content を解消できたことがわかりました。
🔒 Security
This page is secure (valid HTTPS).
🛜 Network
🌐 参考記事
おわりに
フィードバックいただいた内容を調べることで、Mixed Content という開発時に考慮しなければならないセキュリティリスクについて知ることができました。
今後開発をしていくうえで、「参照元がHTTPSか」も都度きちんと確認し、Mixed Content が発生しないように気をつけていきたいと思います。
最後までお読みいただきありがとうございました。