⛑️

【GCP/Wordpress】WebサイトをSSL化したら表示されなくなった

2021/06/17に公開

GCP

結論

プラグイン「SSL Insecure Content Fixer」をインストールして解決。

経緯

以下の構成で、LBに証明書をつけてWebサイトをSSL化しようとしたら、サイトが表示されなくなりました。

スペック

Compute Engine
- CentOS 7
- Apache
- php 7.4
- Wordpress 5.7.2
Cloud Load Balancing
- SSL証明書：Google管理の証明書
- フロントエンド：HTTPS（443）
- バックエンド：HTTP（80）

原因① リダイレクトループの発生

LBでは、クライアントからHTTPSで受け付け、バックエンドにはHTTPで転送するよう設定（SSLオフロード）。
Compute EngineにあるWordpressでは、パーマリンクを「https:// ~~」と設定していました。

上記の設定では、以下のような順序で通信が発生します。

クライアント（ブラウザ）からHTTPSでリクエスト
LBがHTTPSで受け取った通信をHTTPに変換し、インスタンス（Compute Engine）へ転送。
パーマリンクの設定により、インスタンスはHTTPSの通信しか受け取らない。
LBの通信を拒否し、HTTPSで通信するようクライアントへ依頼。
インスタンスからのHTTPS依頼通信を、LBもそのままクライアントへ転送。
HTTPSで送信していたクライアントは、またHTTPSで送信。

インスタンスが直接HTTPS通信を受け取らないと拒否してしまう設定のため、
1-5のようなリダイレクトループが発生します。

原因② 混在（合）コンテンツエラー

SSL化されたWebサイトの中で、画像・動画などのコンテンツがSSL化されないまま、
HTTPで配信されてしまうエラーのことを指します。
現在（2021/6/17）では、chromeをはじめとする様々なブラウザで、混在コンテンツが認められたサイトはブロック or 警告表示されるようです。
「Wordpress 混在（合）コンテンツ」で検索すると結構出てくるので、仕様の問題..？

混在コンテンツのブロック（Firefox）

解決方法

Wordpressのプラグイン「SSL Insecure Content Fixer」をインストールします。
主な機能として、混在コンテンツエラーを解消するため、すべてのコンテンツがSSL対応になっているか自動で確認・修正してくれます。
またオプションの「SSL Insecure Content Fixer HTTP_X_FORWARDED_PROTO」を有効化することで、インスタンスが「LBがHTTPSで受け取ってるならいいよ」と判断してくれるようになり、LBから転送されるHTTPの通信を拒否せず、受け取ってくれます。
⇒ リダイレクトループの解消

インストール・有効化手順は以下の通りです。

手順プラグインのインストール

Wordpressの管理画面にログイン。
左ペインの「プラグイン」＞「新規追加」を選択。
”SSL Insecure Content Fixer”を検索し、インストール。
左ペインの「インストール済みプラグイン」を選択。
「SSL Insecure Content Fixer」を有効化。
左ペインの「設定」＞「SSL Insecure Content」を選択。
「HTTPS detection」の「HTTP_X_FORWARDED_PROTO」を有効化。