OGAWA BASE

埼玉県外秩父は小川町を拠点に、自然を満喫する様子を発信していきます。都内からリモート移住した一児の父です。

トップ > CloudFlareでWordPressをhttpsに対応した

CloudFlareでWordPressをhttpsに対応した

WordPressで動かしているサイトをCloudFlareでhttps化したのでメモ。

CloudFlareでSSL(with SPDY)をFlexibleに設定

まずはこれをやらないとはじまらない。

WordPressのプラグイン「CloudFlare」をインストール

  • HTTPS Protocol RewritingをOn
  • 色々良い感じにコンバートしてくれる。詳細は下記。

support.cloudflare.com

WordPressのプラグイン「CloudFlare Flexible SSL」をインストール

  • ログイン時のループを回避
  • これをやらないで、WordPress アドレス (URL)、サイトアドレス (URL)をhttpsに変更すると、管理画面にログインできなくなっちゃう。*1

WordPress アドレス (URL)、サイトアドレス (URL)をhttpsに変更

  • 設定ミスっているとログインできなくなっちゃったりするので注意。

CloudFlareでHTTP Strict Transport Security (HSTS)を設定

HTTP Strict Transport Security（しばしば HSTS と略されます）は、HTTP の代わりに HTTPS を用いて通信を行うよう、Web サイトからブラウザにに伝達するためのセキュリティ機能です。
HTTP Strict Transport Security - Web セキュリティ | MDN

僕の設定。

Status: On
Max-Age: 6 months (recommended)
Include subdomains: Off
Preload: Off
No-sniff: Off

Include subdomainsをOnにしちゃうと、サブドメインにも適用されてしまう。僕は一回やってしまって当ブログも強制的にhttpsになって見られなくなってしまった。Offにして、本体サイトを1回見に行ってから、戻ってきたら、ちゃんと見られるようになった。

preload listに登録

Google では ドメインを HSTS Pre-loaded List に登録するサービス を行っています。記載された手順に従ってドメインを登録すれば、今後ブラウザとそのドメインとの間に安全でない通信は起こらなくなります。
HTTP Strict Transport Security - Web セキュリティ | MDN

HSTS Preload Submission

Google Search Consoleにhttps版を追加

僕はhttpとhttps両方追加している。このやり方で合っているかは不明。下手するとランキングが下がるかも？httpからhttpsに301リダイレクトもしていないし。とりあえず様子を見る。

内部リンクをhttpsに変更

ある程度は「CloudFlare」プラグインでやってくれてるっぽいけど、記事に書いている部分は変更する必要がある。Search Regexを使った。

amazletの画像を変更

amazletの画像が表示されなくなったので、URLを変更。下記サイトを参考にさせてもらった。

じゃあ、amazlet などのリンク生成ツールは SSL 化した Web サイトに商品リンクを設置する際には使えないの？ と思うかもしれませんが、アソシエイト・ツールバーのソースコードを https:// に書き換えた状態でリクエストされる画像の URL を調べてみたところ、下記のようにドメインを変えれば、HTTPS で画像が取得できるみたいです。
当 Blog を SSL 対応させたので手順や修正が必要になった点などをまとめ | WWW WATCH

Search Regexで置換した。

ShareHtmlをEmbedlyに変更

過去記事や外部サイトの紹介にShareHtmlを使っていたけど、画像が表示されなくなったので、Embedlyに変更した。embed.ly
Search Regexで検索して手作業で変更。これが一番時間かかった。

参考サイト

設定に当たって、下記サイトを参考にさせていただいた。ありがとうございます。

*1:僕はなってDBを直接いじるはめになった