はじめに
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で安全に配信できます。