ホームページの常時SSL化におけるMixed Content(混在コンテンツ)の原因と完全解消手順

ホームページ全体をHTTPS化する「常時SSL化」を完了したにもかかわらず、ブラウザのアドレスバーに「保護されていない通信」という警告が表示されたり、鍵マークに注意アイコンが付いたりすることがあります。この原因の多くは、暗号化されたHTTPSページ内に暗号化されていないHTTP通信によるファイルが混ざって読み込まれている「Mixed Content(混在コンテンツ)」です。

Mixed Contentを放置すると、Webサイトのセキュリティが低下するだけでなく、画像やデザインが崩れたり、最新ブラウザの仕様によって機能が自動ブロックされたりするリスクが生じます。結論として、Mixed Contentを完全解消するには、ブラウザのデベロッパーツールで原因URLを特定し、ソースコードの修正、データベース内のURL一括置換、適切なリダイレクトとセキュリティヘッダーの設定を正しく実行することが不可欠です。

なお、常時SSL化の基礎知識については、ホームページのSSL化とは?常時SSLの仕組みと未対応リスク・導入手順を徹底解説をご参照ください。

Mixed Content(混在コンテンツ)とは?発生する仕組みとリスク

Mixed Content(混在コンテンツ)とは、HTTPSで保護された安全なWebページ(「https://」)の内部で、暗号化されていないHTTP(「http://」)経由の要素(画像、JavaScript、CSS、動画、iFrame等)が読み込まれている状態を指します。

HTML自体がSSL証明書で保護されていても、外部から読み込まれる部品データに非暗号化通信が残っている場合、ブラウザはそのページ全体の安全性が不十分であると判定します。

Passive Mixed ContentとActive Mixed Contentの違い

Mixed Contentは、読み込まれるリソースの種類とリスクの高さによって「Passive(受動的)」と「Active(能動的)」の2種類に分かれます。

分類 対象リソース リスクの程度 ブラウザの主な挙動
Passive(受動的) 画像(img)、音声(audio)、動画(video)など 中程度(データの盗聴や改ざんによる偽画像表示など) 警告が表示されるか、ブラウザ設定により自動ブロックされる
Active(能動的) JavaScript(script)、CSS(stylesheet)、iFrameなど 極めて高い(スクリプト注入、Cookie奪取、サイト乗っ取り) 最新ブラウザでは強制的に読み込みがブロックされる

Passive Mixed Contentは表示に関わる要素ですが、盗聴・改ざんリスクが存在します。一方、Active Mixed ContentはWebサイトの動作プログラムそのものを制御するため、中間者攻撃(Man-in-the-Middle attack)によって悪意あるスクリプトが実行される危険性があり、致命的な脆弱性となります。

放置することで生じる主なリスク

Mixed Contentを解消せずに放置すると、以下のような悪影響が生じます。

  • セキュリティリスクの増大:非暗号化通信の隙を突かれ、通信データの盗聴や改ざん、不正スクリプト実行の被害に遭う危険が高まります。
  • ユーザー体験(UX)と信頼性の低下:アドレスバーに警告が表示されることで、訪問者に不信感を与え、離脱率の上昇につながります。
  • 表示崩れ・機能不全の発生:主要ブラウザがActive Mixed Contentを自動遮断するため、JavaScriptが動作せずフォームが送信できない、デザイン(CSS)が崩れるなどの障害が発生します。
  • SEOへの間接的影響:安全性の低下や表示崩れによる離脱率悪化は、巡り巡って検索エンジンの評価低下を招きます。

Mixed Contentが発生する4つの主な原因

常時SSL化後にMixed Contentが発生する実務上の主な要因は以下の4点です。

1. HTMLやテーマファイル内の絶対パス直書き

HTMLやテンプレートファイル(PHPなど)内部に、「http://」から始まる絶対パスで画像やファイルのリンクが直書きされているケースです。

<img src="http://example.com/images/logo.png" alt="ロゴ">

ドメイン全体をHTTPSへリダイレクトしていても、ソースコード内で「http://」が明示されている場合、ブラウザはそのリソースを非暗号化通信で取得しようとするため、混在コンテンツとなります。

2. CSSやJavaScriptファイル内の外部呼び出し

HTML本体を修正していても、外部CSS(style.css等)内部の背景画像(background-image)やWebフォント(@font-face)の読み込みに「http://」の絶対パスが使われているケースです。また、外部JSファイルが非暗号化通信で別サーバーのデータを取得している場合も原因となります。

3. データベース内に残る過去のHTTPリンク

WordPressなどのCMSでは、過去の記事本文や設定データ内に、SSL化以前の「http://」から始まる画像URLや内部リンクが文字列としてデータベースに保存されています。

サイト設定で「サイトURL」をHTTPSに変えても、データベース内の本文テキストに書かれた個別画像URLは自動変換されないため、ページ表示時にMixed Contentが発生します。データベースのURL置換に関しては、WordPressデータベースのドメイン置換(URL置換)の手順と注意点|SSL化・サーバー移管時の不具合を防ぐプロの保守実務をご覧ください。

4. サードパーティ製外部サービスの非対応コード

アクセス解析、SNS共有ボタン、外部広告、チャットボットなどのタグコードが古い「http://」のまま設置されている場合です。外部提供元がHTTPSに対応したタグを提供している場合は、記述を最新のものへ差し替える必要があります。

Mixed Contentの検出・特定手順

Mixed Contentの解消は、どのページのどのファイルが「http://」で読み込まれているかを正確に特定することから始まります。

ブラウザのデベロッパーツール(開発者ツール)による特定

Google Chromeでの特定手順は以下の通りです。

  1. 警告が表示されているWebページを開きます。
  2. 「F12」キーを押すか、画面上を右クリックして「検証」を選択し、デベロッパーツールを起動します。
  3. 「Console(コンソール)」タブを選択します。
  4. Mixed Contentが存在する場合、赤や黄色の警告メッセージで「Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure element ‘http://…’」と表示されます。ここに記載された「http://」から始まるURLが原因ファイルです。
  5. 必要に応じて「Network(ネットワーク)」タブを開き、リソースの種類や通信状態を確認します。

一括チェックツールの活用

ページ数が多い場合は、「Why No Padlock?」などの外部検証ツールを活用すると便利です。自社サイトのURLを入力するだけで、ページ内に残っている非安全なリソースのURL一覧を一括で検出・抽出できます。

Mixed Contentの完全解消手順(具体的な修正実務)

原因リソースを特定したら、以下の手順で修正を行います。作業前には必ずWebサイト全体のバックアップを取得してください。

手順1:ソースコードの記述修正

HTMLやテーマファイル内の「http://」記述を直接書き換えます。

  • HTTPS表記へ変更:<script src="http://example.com/js/script.js"></script> を <script src="https://example.com/js/script.js"></script> に修正します。
  • 相対パスへ変更:同一サーバー内のファイルは /js/script.js のようなルート相対パスに書き換えることで、通信プロトコルに依存しない構造にします。

手順2:データベース内のURL一括置換

WordPress等のCMSの場合、投稿本文に含まれる過去の画像URLをデータベース内で一括置換します。WP-CLIコマンド(wp search-replace 'http://example.com' 'https://example.com')や「Search Regex」等の信頼できるプラグイン、あるいは「Search-Replace-DB」ツールを使用します。

※注意:単に「http://」を「https://」に置換すると、外部サイトへのリンクまで破損する恐れがあります。必ず「http://自社ドメイン」から「https://自社ドメイン」への置換を行ってください。

手順3:.htaccessによるHTTPSリダイレクト設定

「http://」へのアクセスを自動的に「https://」へ転送する301リダイレクト設定を.htaccessファイルに追加します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

リダイレクト設定時の不具合防止については、ホームページのリダイレクトループ(ERR_TOO_MANY_REDIRECTS)の原因と解消手順|SSL化・WordPress設定のトラブル対策も併せてご参照ください。

手順4:CSP(Content Security Policy)による自動昇格

緊急処置として、レスポンスヘッダーやHTMLのmetaタグにCSPの設定を追加する方法があります。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

この設定を行うと、ブラウザがページ内の「http://」リソースを自動的に「https://」に変換して読み込みます。ただし、読み込み先がHTTPS非対応の場合はエラーになるため、根本的なURL修正も並行して実施する必要があります。

WordPressサイトでの注意点と再発防止の運用ルール

WordPressサイトでは、特有の注意点と今後の運用ルールの徹底が必要です。

簡易プラグインに依存しすぎない

自動補正プラグインは手軽ですが、ページ読み込み時のサーバー負荷を増加させたり、プラグイン停止時に再び混在コンテンツが発生したりするリスクがあります。データベースやテンプレート記述を永久的に書き換える本質的な修正を推奨します。

キャッシュの完全クリア

修正後も警告が消えない場合は、以下のキャッシュを削除して再確認してください。

  • WordPressプラグインのキャッシュ
  • CDN(Cloudflare等)やサーバーのキャッシュ
  • ブラウザのキャッシュ(スーパーリロード「Ctrl + Shift + R」を実行)

再発を防ぐ運用ルール

  • 画像・ファイルの指定:記事作成やコーディング時はフルURLではなくドメインルート相対パス(`/img/…`)を使用する。
  • 外部ツールの導入時確認:サードパーティ製ツールを導入する際は、埋め込みコードの通信プロトコルが「https://」であることを必ず確認する。

よくある質問

Q1:SSL証明書を正しく導入したのに、鍵マークに警告が出るのはなぜですか?

A:サーバーのSSL化自体は完了していても、ページ内に「http://」から始まる画像やCSS・JSファイルが含まれているためです。デベロッパーツールの「Console」タブで原因ファイルを特定し、URLを「https://」または相対パスに修正してください。

Q2:Mixed Contentを放置するとSEOに悪影響がありますか?

A:直ちに手動ペナルティを受けるわけではありませんが、主要ブラウザによってCSSやJSが自動ブロックされ、レイアウト崩れや機能停止が発生します。ユーザーの離脱率上昇などを招き、間接的に検索エンジンの評価を落とすリスクが高まります。

Q3:画像のURLをhttpsに変更しても表示されない場合はどうすればいいですか?

A:画像を読み込んでいる外部サーバー自体がHTTPSに対応していない可能性があります。対象の画像を自社サーバーにダウンロードして保存し直すか、相手先サーバーのHTTPS化を依頼する必要があります。

Q4:Content Security Policy(CSP)を設定すれば根本修正は不要ですか?

A:CSPはブラウザ側で補正を行う暫定処置です。外部サーバーがHTTPS非対応の場合はエラーになりますし、データベース内のデータも古いまま残ります。最終的にはデータベースやコード内の「http://」記述を正しく修正することを推奨します。

まとめ

ホームページの常時SSL化を完了させるには、単にSSL証明書を導入するだけでなく、サイト内の全リソースを暗号化通信に対応させる「Mixed Contentの完全解消」が不可欠です。

以下のステップで確実に修正を進めましょう。

  1. デベロッパーツールで「http://」の非安全なリソースを特定する
  2. ソースコード内の絶対パスを相対パスや「https://」へ修正する
  3. データベース内の旧URLを「http://自社ドメイン」から一括置換する
  4. .htaccessで常時SSLリダイレクトを設定する
  5. キャッシュを消去し、警告が消えたことを確認する

自社での特定やデータベース置換に不安がある場合や、大規模サイトのリニューアル時は、専門のWeb制作・保守運用会社へのご相談をおすすめします。

CONTACT

Web制作・SEO・AIOについてお気軽にご相談ください

ホームページ制作・リニューアル、WordPress、SEO・AIO対策、 ECサイト、Web集客、保守・セキュリティなど、 Webに関するご相談を承っています。 「何から相談すればよいかわからない」という段階でもお気軽にお問い合わせください。

お問い合わせフォーム