ブラウザの「混在コンテンツ」警告の正体と直し方

こんにちは、阿久梨絵です！
Webサイトを開いたとき、ブラウザが突然
「このページには安全でないコンテンツが含まれています」
と警告を出すことがあります。
これは「混在コンテンツ（Mixed Content）」と呼ばれる現象です。

SEOにもユーザー信頼にも影響するため、放置はNG。
この記事では、混在コンテンツの正体から、原因の見つけ方、直し方までをわかりやすくまとめます。

混在コンテンツとは何か

混在コンテンツとは、
HTTPS（暗号化通信）のページ内に、HTTP（暗号化されていない）コンテンツが混ざっている状態
のことです。

例

・ページ本体：https://example.com
・画像：http://example.com/image.jpg ← これが混在コンテンツ

ブラウザは「安全なページに安全でない要素が混ざっている」と判断し、
警告を表示したり、読み込みをブロックします。

混在コンテンツが危険とされる理由

① 通信が盗聴・改ざんされる可能性

HTTPは暗号化されていないため、画像やスクリプトが途中で書き換えられるリスクがあります。

② スクリプトが危険

特に JavaScript が HTTP で読み込まれると、
攻撃者にページ全体を乗っ取られる可能性があります。

③ SEO評価の低下

GoogleはHTTPSを推奨しており、混在コンテンツは
「安全でないサイト」扱いになることがあります。

混在コンテンツの種類

混在コンテンツには2種類あります。

1. アクティブ混在コンテンツ（危険度：高）

・JavaScript
・CSS
・iframe
・フォーム送信先（action）

これらはページの動作に直接関わるため、ブラウザが自動でブロックすることが多いです。

2. パッシブ混在コンテンツ（危険度：中）

・画像
・音声
・動画
・アイコン（favicon）

表示はされる場合もありますが、警告が出ます。

混在コンテンツの見つけ方

① ブラウザの開発者ツールで確認

Chromeの場合

1. ページを開く
2. F12（開発者ツール）
3. Console（コンソール）タブを見る
4. 「Mixed Content: …」という警告が表示される

どのファイルが HTTP で読み込まれているかが分かります。

② ブラウザのアドレスバーの警告

・🔒 → 安全
・⚠️ → 混在コンテンツあり
・⛔ → 危険なコンテンツをブロック

🔒が表示されている場合は、基本的に安全な状態です。
ただし、詳細をクリックすることで、より正確な接続情報やサイトの挙動を確認できます。

さらに確実に判断したい場合は、開発者ツール（F12 → Console）で「Mixed Content」の警告が出ていないかを確認するのがおすすめです。

③ オンラインチェックツール

・Why No Padlock
・SSL Labs

混在コンテンツの直し方（実践編）

1. URL を HTTPS に書き換える

最も基本的な対処法です。

2. 相対パスにする

同一ドメインの場合は相対パスにすると安全。

3. 外部サービスのURLをHTTPS対応のものに変更

古いブログパーツや広告タグが HTTP のままのことがあります。

・新しいコードを取得し直す
・提供元がHTTPS非対応なら別サービスに乗り換える

4. CDN・画像ホスティングをHTTPS対応にする

古いCDNはHTTPしか対応していない場合があります。

5. WordPressの場合のチェックポイント

・テーマ内の画像URL
・プラグインの読み込み先
・ウィジェットの外部スクリプト
・記事内の画像リンク（旧URL）

Search Replace DB などで一括置換するのも有効です。

混在コンテンツを防ぐための予防策

・画像・スクリプトは必ず HTTPS のものを使う
・外部サービスは HTTPS 対応のものを選ぶ
・WordPress の「一般設定」のURLを https に統一
・古い記事の画像リンクを定期的にチェック
・サイト全体をリダイレクト（HTTP → HTTPS）

まとめ

・混在コンテンツとは HTTPSページにHTTP要素が混ざること
・危険性が高く、ブラウザが警告やブロックを行う
・原因は画像・スクリプト・外部サービスなど多岐にわたる
・開発者ツールで特定し、HTTPS化・相対パス化で修正できる
・予防策を整えておくと再発を防げる

混在コンテンツは、気づかないうちに発生しがちですが、
仕組みを理解しておけば確実に対処できます。
Webサイトの信頼性を守るためにも、早めのチェックがおすすめです。
阿久梨絵でした！