はじめに

WordPressサイトをHTTPS化するときに、ページ内の画像だけHTTPで参照されてしまい、ブラウザのコンソールに「Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure resource '...'」と表示される現象が起こります。本記事では、WordPress側とCloudFront（CDN）側の設定によってMixed Contentを解消し、画像を正常に表示させる方法を解説します。

環境

WordPress
AWS EC2 + CloudFront

問題

SSL証明書は正常に適用され、URLはhttps://example.comとしてHTTPSでアクセス可能
投稿や固定ページのHTMLソースでは画像URLがhttp://のまま生成される

ブラウザのDeveloper Consoleに以下のようなエラーが表示され、画像が読み込まれない

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource 'http://example.com/image/foo.jpg'. This request has been blocked; the content must be served over HTTPS.

原因

WordPressの設定（WP_HOME/WP_SITEURLなど）がHTTPのままか、内部的に$_SERVER['HTTPS']を認識できずHTTPSを強制できていない
CloudFront経由でのリクエスト時にHostヘッダーやプロトコル情報がオリジン（WordPress）に伝わらず、WPがHTTPとして扱っている

対策

1. `wp-config.php` でHTTPS強制設定

WordPressが実際にHTTPSでアクセスされていることを認識できるよう、以下を wp-config.php に追加します。

$_SERVER['HTTPS'] = 'on';
// 管理画面もHTTPSに強制
define('FORCE_SSL_ADMIN', true);

// サイトURLをHTTPSに固定
define('WP_HOME', 'https://example.com');
define('WP_SITEURL', 'https://example.com');

HTTP_X_FORWARDED_PROTO はCloudFrontやALBなどのリバースプロキシから送信されるプロトコル情報を拾うためのヘッダーです。
これにより、WordPress内部でHTTPSを認識し、投稿URLやメディアURLもhttps://となります。

2. CloudFrontの設定確認

CloudFrontで配信するとき、オリジンリクエストポリシーでプロトコルヘッダーを渡す設定を行います。

Behaviors で該当ビヘイビアを選択
Origin request policy を AllViewer もしくはカスタムで Header: X-Forwarded-Proto を含めるポリシーを選択
Viewer protocol policy を Redirect HTTP to HTTPS もしくは HTTPS Only に設定

これにより、CloudFront→WordPressへプロトコル情報が正しく伝わり、WordPressがHTTPSリクエストとして処理します。

3. キャッシュの無効化

設定変更後はCloudFrontキャッシュが残っていると反映されないため、Invalidationを実行します。

1.該当ディストリビューションを選択
2.キャッシュの削除を選択
3.削除したいパスを入力し、実行

まとめ

WordPress側では $_SERVER['HTTPS']='on' と FORCE_SSL_ADMIN、WP_HOME/WP_SITEURL をHTTPS化
CloudFront側では X-Forwarded-Proto をオリジンへ転送し、HTTPS Onlyへリダイレクト
キャッシュをInvalidationして設定を即時反映

これらを組み合わせることで、Mixed Contentエラーを解消し、画像を含むすべてのコンテンツをHTTPSで安全に配信できます。