⛑️

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

2021/06/17に公開

結論

プラグイン「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:// ~~」と設定していました。

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

  1. クライアント(ブラウザ)からHTTPSでリクエスト
  2. LBがHTTPSで受け取った通信をHTTPに変換し、インスタンス(Compute Engine)へ転送。
  3. パーマリンクの設定により、インスタンスはHTTPSの通信しか受け取らない。
    LBの通信を拒否し、HTTPSで通信するようクライアントへ依頼。
  4. インスタンスからのHTTPS依頼通信を、LBもそのままクライアントへ転送。
  5. 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の通信を拒否せず、受け取ってくれます。
リダイレクトループの解消

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

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

  1. Wordpressの管理画面にログイン。
    左ペインの「プラグイン」>「新規追加」を選択。
    SSL Insecure Content Fixer”を検索し、インストール。

  2. 左ペインの「インストール済みプラグイン」を選択。
    「SSL Insecure Content Fixer」を有効化。

  3. 左ペインの「設定」>「SSL Insecure Content」を選択。
    「HTTPS detection」の「HTTP_X_FORWARDED_PROTO」を有効化。

「変更を保存」をクリックして、本過程は終了。


補足

GCPで構築したWordpressをSSL化する一連の流れは、以下のサイトで説明しています。

【GCP】LB + Wordpressで作成されたWebサイトのSSL化

Discussion