Webセキュリティの小部屋

Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから
公開日:2016年4月20日
最終更新日:2016年4月21日

WordPress のサイトを 完全 HTTPS 化してみた

 はじめに

無償の SSL/TLS 証明書である Let’s Encrypt が正式リリースされたことにより、これから個人ブログなど多くのサイトが HTTPS 化していくと思われます。

というのも、サイトの HTTPS 化は通信を暗号化することで、改ざんされてないデータを送受信できるメリット以外に、Google が SEO に有利になると明言しているためです(若干らしい)。

しかし、一方でデメリットもあります。多くのサービスが HTTP と HTTPS のアドレスを別のものとして扱うため、ソーシャルブックマークなどのカウントがリセットされることと、若干ですがパフォーマンスに影響が出てしまうことです。

これらを踏まえたうえで、この WordPress のサイトの HTTPS 化が完全に完了したので、その手順や問題の解決策などを紹介していきます。

SSL/TLS 証明書の導入

何はともあれ、SSL/TLS 証明書を導入しなければ話になりません。とは言っても、個人レベルでは無償の Let’s Encrypt で十分でしょう。無償であるだけでなく、更新も自動でできてユーザーに優しいのでおすすめです。

Let’s Encrypt の導入方法については、以下の記事を参照してください。

一方、企業などでは個人とは違い、Let’s Encrypt のようなドメイン認証の証明書という訳にはいかないでしょうから、組織認証(Organization Validation) または EV (Extended Validation) の証明書を採用することになるでしょうね。ドメイン認証との違いは、組織の実在証明があるかどうかです。

導入が済んだら、WordPress の設定を行います。

WordPress の設定

まず、WordPress の管理機能にある一般設定画面で、URL を HTTPS に変更して保存します。

Wp1

ただやっかいなのは、これで表面的な設定は変更されるのですが、記事内の画像リンクなどは変更されません。これは画像リンクを絶対パスでデータとして持っているためです。このため、SSL/TLS 証明書は、 Mixed Content という HTTPS に HTTP コンテンツが混ざっているというエラー判定をします。

なお、HTTPS 化が完了した後は、画像リンクなども HTTPS の絶対パスで保存されるので、以下の対応は1回のみ行うだけで問題ありません。

ここでは「WordPress Serialized PHP Search Replace Tool」という WordPress のデータベースの内容を書き換えるツールを使用して、画像リンクなどを HTTPS に一括変換します。

なお、このツールを使用する前に、必ずデータベースのバックアップを行っておいてください

準備ができたら、SSH でサーバーにログインしてツールをダウンロードし、ドキュメントルートにツールを配置します。ディレクトリ名が長いので db に名前を変更しています。

準備ができたら、ブラウザで  https://www.websec-room.com/db/ にアクセスすると設定画面が表示されるので、以下のように http:// から始まるドメイン名を https:// から始まるものに設定して [live run] をクリックします。すると指定した内容でデータベースの内容を更新します。

なお、データベースの接続設定は、wp-config.php から自動的に取得します。

Db

動作を確認して問題が無いようであれば、このツールは必ず削除してください。データベースの内容を自由に変更できるツールなので、削除しないと大変危険です。

Mixed Content の解消

まだ、いろいろなものが HTTP で表示されているので、それらを順次 HTTPS に置き換えていきます。 Mixed Content とは、HTTPS のサイトに HTTP のコンテンツが読み込まれている状態をいいます。

Mixed Content の見つけ方

Google Chrome で、HTTPS のサイトを表示した場合に、Mixed Content だと HTTPS のアイコンが以下のようになります。

Chrome1

アイコンをクリックすると、以下のように警告が表示されます。ここで「詳細」をクリックします。

Chrome2

以下のように、警告の詳細が Console に表示されるので、そのリソースの警告が消えるように作業を進めます。

Chrome3

全ての Mixed Content が解消したら、HTTPS のアイコンがグリーンに変わります。

Chrome4

Amazon アソシエイツ

Amazon アソシエイツの画像なのですが、これは HTTP での表示になっています。これを HTTPS にする必要があるのですが、単純に https:// としただけではうまくいきません。

ヨメレバ などで作成した Amazon アソシエイツの画像のドメインは、ecx.images-amazon.com なのですが、これを images-fe.ssl-images-amazon.com に変更することで HTTPS 化することができます。私の環境では数が少なかったから楽でしたが、量が多ければ先ほどのツールを利用するのもよいかもしれません。

具体的には以下のように変更します。

また、ヨメレバで作成した場合、Amazonのリンクにアイコンが表示されるのですが、この画像が HTTPS 対応されていません。

Icon

自動作成された CSS に以下の記述があるので、これを削除します。

ソーシャルブックマーク

はてなブックマークボタンの HTTPS 化ですが、古いコードだと正常に動作しませんが、最新のコードを取得したら動作するようになりました。

ちなみに WordPress では以下のように指定します。

LINEに送るボタンは、HTTP で URLが指定されているので、以下のように変更します。

//ドメイン名 、というアドレスの指定の仕方は見慣れないかもしれません。ですが、これがなかなか便利で、表示されているページのプロトコル(HTTP/HTTPS) に合わせてアドレスを展開します。

Twitter のカウント数を表示するために、このサイトでは widgetoon.js & count.jsoon を使用しています。このサービスは HTTPS に対応しています。これも http:// で始まるアドレスが2箇所あるので、これを // から始まるアドレスに変更します。

Google カスタム検索の設定

Google カスタム検索を用意しているサイトは多いと思います。これも対応は簡単で、http:// で始まるアドレスを // で始まるように変更するだけです。

Google Adsense の設定

Google Adsense の古いコードだと、HTTP のアドレスが入っているものがありますが、これは Adsense から最新のコードを取得し直すだけで問題は解決します。

 

Apache の設定

検索エンジンなどから、HTTP でアクセスがあった場合は HTTPS にリダイレクトする必要があります。後述の HSTS でもできるような気もしますが、HTTPS へのリダイレクトを行うと Google が正しく判断してくれるようなので設定を行っておきましょう。

ドキュメントルートの /var/www/html に .htaccess ファイルがあるので、以下の記述を追加します。なければ新規作成してください。

これで、HTTP のアドレスにアクセスし、HTTPS にリダイレクトされれば OK です。

HSTS(HTTP Strict Transport Security) の設定

HSTS(HTTP Strict Transport Security)とは、HTTP のリクエストに対して、レスポンスの HTTP ヘッダーで「このサイトには HTTPS でアクセスよろしく」と返し、そのサイトへのアクセスは HTTPS であることを強制するものです(全てのブラウザが対応している訳ではない)。

設定方法は簡単で、Apache の http.conf に記述されている SSL/TLS の VirtualHost の設定に以下の一行を追加するだけです。以下のものは、サブドメインを含まず10年間の期限をつけています。

この設定をすることで、HTTP で www.websec-room.com にアクセスした場合は、HTTPS のサイトにリダイレクトされます。

2回目以降は HTTP でのアクセスは行わないで、最初から HTTPS でアクセスするようになります。

なお、HSTS の HTTP レスポンスヘッダーは以下のようになります(HTTP -> HTTPS にリダイレクト後)。

追記 : HTTP/2について

HTTPS 化しても HTTP/2に対応すれば、逆にパフォーマンスは向上します。というか、パフォーマンスが向上する HTTP/2 に対応するためには HTTPS 化が必須になります。

HTTP/2 は何かというと、Google が提唱していた SPDY の後継のプロトコルで、HTTPS のコネクションを束ねて HTTP のコネクションコストを削減し、通信も圧縮し通信を高速化することができるものです。

但し、HTTP/2 は Web サーバーのバージョンが限定されていたり、導入が簡略化されてないという課題があります。

追記 : Search Console への登録

HTTPS 化が一通り済んだら、Google の Search Console(旧:ウェブマスターツール)にサイトを登録し、サイトマップを送信します。

HTTP と HTTPS のサイトは別のサイトと見なされるのでご注意ください。

 おわりに

一応、これで完全 HTTPS 化ができたと思います。不足があるようでしたらご指摘ください。

サイトの HTTPS 化はこれから増えていくと思いますが、作業量の割にメリットは少ない気もします。

ですが、HTTPS 化していることで、自分のサイトはセキュリティを意識しているのだというアピールになるかもしれません。逆に、HTTPS 化してないサイトはセキュリティ意識が低いと見なされる可能性も否定出来ないです。

しばらくは様子を見て運用してみますが、HTTPS 化に問題がないようでしたら移行した方が幸せかもしれませんね。

参考サイト


スポンサーリンク




カテゴリー:ブログ

Twitter でも、いろんな情報を発信しています。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA