CloudFlare Flexible SSLでのHTTPS化を断念した話

先日、このサイトに CloudFlare Flexible SSL を導入し、偉そうに

CloudFlare Flexible SSLでWordPressを無料でSSL化した手順

という記事まで書いたわけですが、昨日このサイトを見たお友達から

「なんかサイトの表示崩れてない？」

と言われ、普段使わない別の端末で確認してみたところ確かに表示が崩れていて10秒ぐらい頭が真っ白に。

普段使う端末ではキャッシュの影響なのか、正常に表示されていたので全く気付きませんでした。。

導入直後にもスタイルシートが読み込まれない問題が発生しており、対策を行った結果表示が直ったのでてっきり解決したものと思っていたんですけどねー。

Flexible SSL は通常の SSL とは仕組みが異なるため WordPress では不具合が発生するようです。

そのまま SSL 証明書を購入すれば HTTPS を使い続けられたわけですが、お金を払ってまでブログを HTTPS にするメリットが見つからなかったので結局 HTTP に戻すことに。

WordPress を HTTPS から HTTP に戻す手順

以下の手順で作業を行います。

1. サイトアドレスを変更
2. サイト内リンクを変更
3. HSTS を無効化

1. サイトアドレスを変更

まず WordPress 管理画面にログインし、「設定」→「一般」を選択して一般設定に移動。

一般設定を開いたら「WordPress アドレス」と「サイトアドレス」を https から http に変更して保存。

2. サイト内リンクを変更

次に、サイト内リンクが https のままだと困るので、Search Regax を使ってリンク URL を一括置換する。

「Search pattern」に 「https://」

「Replace pattern」に 「//」

を入力して Replace & Save する。

全部「http://」に置換してもいいのですが、一応プロトコル相対 URL にしています。

3. HSTS を無効化

.htaccess に以下のコードを追加する。

Header always set Strict-Transport-Security "max-age=0"

アクセスしてきたユーザのブラウザに「これからは HSTS は使わないよ」というメッセージを伝えます。

これで HTTP から HTTPS へのリダイレクトは行われなくなります。

CloudFlare で HSTS の設定をしている場合は、CloudFlare にログインして HSTS を無効化しておきましょう。

追記 (2016/12/13)

エックスサーバーでも Let’s Encrypt が使えるようになったようですし、今なら素直に Let’s Encrypt を使うのが最もスムーズだと思います。

CloudFlare を使っている場合は、証明書設定後にSSLの設定欄を「Full (strict)」に変更することを忘れないように注意が必要です。