HTTPS 有効化後の混在コンテンツ警告

このエラーの意味と見分け方

• ページのアドレスは HTTPS ですが、ブラウザーの開発者ツールに混在コンテンツが報告される。
• HTTPS の有効化後、スクリプト、スタイルシート、フォント、画像、動画、背景画像、埋め込みフレームが読み込めない、または動作が変わる。
• Console メッセージに、HTTPS ページからリクエストされた HTTP リソースが表示される。
• JavaScript や CSS などのアクティブコンテンツがブロックされ、ページ機能が一部動作しない。
• 警告が特定のページ、テンプレート、またはユーザー状態でのみ表示される。ハードコードされた参照や条件付きで生成される参照が原因の可能性があります。
• 個々のリソースが安全でない参照を使用していても、メインページのサイト証明書は有効に見える。

可能性の高い順の主な原因

1. HTTP 参照のハードコード: ページコンテンツ、テンプレート、テーマファイル、ウィジェット、スタイルシートが、http:// アドレスのリソースを参照している。
2. 古い保存済みコンテンツ: HTTPS への移行前の HTTP 参照が、画像、埋め込み、メディアフィールド、スクリプト、その他のデータベース値に残っている。
3. テーマまたはプラグインの出力: メインサイトのアドレスが HTTPS に設定されていても、コンポーネントが安全でない URL を生成している。
4. HTTPS に対応していない外部リソース: サードパーティーのスクリプト、フォント、フレーム、メディアファイル、その他の依存リソースが安全に利用できない場合がある。
5. キャッシュまたはバンドル済みファイル: ページキャッシュ、アセットバンドル、minify 済みファイル、CDN、リバースプロキシが、古い参照を含むマークアップを提供している可能性がある。
6. 古いアプリケーションまたはアセット設定: アプリケーションが古いベースアドレスや環境設定から絶対 URL を組み立てている可能性がある。

混在コンテンツ警告だけで、サイト証明書が無効だと判断することはできません。証明書エラーはサイトまたはリソースホストへの安全な接続に関する問題であり、混在コンテンツは安全なページ内からリクエストされた安全でないリソースに関する問題です。

修正方法

1. 問題が混在コンテンツであることを確認する

影響を受けるページを最新のブラウザーで開き、開発者ツールを表示します。Console で混在コンテンツのメッセージを探します。Network パネルで警告に示されたリクエストを確認し、URL、リソースタイプ、ステータス、さらに表示される場合は、そのリクエストを開始したファイルまたはコンポーネントを記録します。

ブラウザーがメインサイトへの安全な接続を確立できず、証明書警告を表示する場合は、別の問題として扱ってください。安全でないリソース参照を修正するために、証明書の設定を変更してはいけません。

2. すべての安全でない参照を特定する

表示されたページと、必要に応じてそのソース、スタイルシート、スクリプト、生成済みアセットファイルを調べ、HTTP 参照を確認します。表示される画像だけでなく、JavaScript、CSS、フォント、フレーム、メディア、CSS の背景画像も警告や読み込み失敗の原因になります。

影響を受けるページをプライベートブラウジングウィンドウでテストするか、関連するブラウザーキャッシュを消去してからテストします。これにより、現在の安全でないリクエストと古いキャッシュ済みレスポンスを区別しやすくなります。ただし、元の参照自体を修正する代わりにはなりません。

3. 参照を生成しているソースを特定する

リソースタイプと影響を受けるページを手がかりに、URL の生成元を絞り込みます。

• 1 つの記事またはページだけに発生する: 保存済みコンテンツまたはメディアフィールドを確認します。
• 1 つのレイアウトを使用する複数のページに発生する: 共有テンプレート、テーマ、ウィジェット、または再利用可能なコンポーネントを確認します。
• 特定の機能を使うページだけに発生する: 関連するプラグイン、連携、埋め込み、または設定を確認します。
• 結合されたアセットへのリクエストである: 元のスタイルシート、スクリプト、ビルドプロセス、キャッシュ、またはバンドルを生成したプロキシを確認します。
• ログイン済みとログアウト済みの訪問者で動作が異なる: それぞれの状態で表示されるコンテンツとキャッシュ層を比較します。

4. 参照元で参照を更新する

参照が保存されている場所に応じて、適切な修正を行います。

• ページまたは投稿のコンテンツを変更し、リソースの HTTPS 版を使用します。
• URL を生成しているサイト、メディア、テーマ、プラグイン、埋め込み、または連携の設定を更新します。
• テンプレート、スタイルシート、スクリプト、設定ファイル内のハードコードされた参照を修正します。
• 同一サイトのリソースには、アプリケーションとデプロイ構成に適している場合、サポートされる相対パスを使用します。
• 外部リソースについては、ホストが HTTPS に対応していることを確認します。対応していない場合は、安全なソースに置き換えるか削除してください。特にアクティブコンテンツを提供するリソースでは、この対応が重要です。

5. 安全策を講じたうえで一括置換を使用する

同じ古い値が多数の既知のレコードに保存されている場合、一括置換が適しています。本番データを変更する前に、承認を得て復元可能なバックアップを作成し、正確な変更範囲を定義します。可能であれば、ステージング環境のコピーまたは代表的なレコードで操作をテストしてください。

シリアライズされたデータや構造化データを考慮し、テキスト文字列のすべての出現箇所を無条件に置換しないでください。外部ホスト、リダイレクト、ファイルパス、設定値、ページ URL ではない http:// 文字列を含むレコードを確認します。データ構造に不慣れな場合は、アプリケーションの所有者または開発者に変更を依頼してください。

6. 生成済みコンテンツとキャッシュを消去する

参照元を修正したら、古いマークアップやアセットバンドルが残っている可能性のあるアプリケーション、ページ、CDN、リバースプロキシ、ブラウザーのキャッシュを消去します。結合または minify 済みアセットを使用しているサイトでは、それらを再生成します。キャッシュの消去は一時的にオリジンへのトラフィックを増やしたり、サイトの動作を変えたりする可能性があるため、対象環境で承認された操作だけを実行してください。

7. 修正を検証する

影響を受けたページを再読み込みし、Console と Network パネルをもう一度確認します。以前に警告されたリソースが安全にリクエストされ、スクリプトとスタイルが動作し、新たな安全でない参照が表示されないことを確認します。

関連するテンプレートと、ログイン済み・ログアウト済みの該当ビューでも確認を繰り返します。キャッシュを更新した後に警告が再発する場合は、基になるテンプレート、プラグイン、設定、または生成済みアセットを引き続き修正する必要があります。

予防と修正確認

• 画像、スクリプト、スタイルシート、フォント、埋め込み、メディアには、HTTPS を考慮した参照を使用します。
• アプリケーションのサイトアドレス、アセット設定、テーマ、プラグイン、連携を HTTPS と一致させます。
• デプロイ前にサードパーティー依存関係を確認し、安全な配信を提供しないプロバイダーを置き換えます。
• ステージング環境と移行後のテストに、混在コンテンツのチェックを含めます。
• 最初に警告が見つかったページだけでなく、共有テンプレートと再利用可能なコンポーネントを確認します。
• コンテンツを一括変更する前に検証済みのバックアップを維持し、その後、影響を受けたキャッシュとアセットバンドルを消去または再生成します。
• 表示されるリソースが異なる場合は、認証状態の異なるページを再確認します。

よくある質問