エックスサーバー core SSLでwpサイトを完全httpsにした手順＆注意点まとめ

SSL化をする際に知っておきたい基礎知識

概要

SSLとは

セキュリティを強化する技術のことです。ウェブサイトで入出力される情報を暗号化し、またウェブサイトの運営者をきちんと証明する働きを持ちます。

SSL（Secure Sockets Layer）とは、インターネット上で通信を暗号化する技術です。SSLを利用してパソコンとサーバ間の通信データを暗号化することで、第三者によるデータの盗聴や改ざんなどを防ぐことができます。

ウェブサイトを見た時、「http://～」ではなく、「https://～」となっているページがSSLによってセキュリティ保護されている目印になります。最近のwebサービスではほとんど、このSSL化が施されています。ちょっとしたコーポレートサイトなどでは、ユーザーとやりとりの発生するお問合せフォームのあるページだけSSL化しているケースが多いです。

逆に、お問合せフォームのある企業ページで、SSL化が施されておらず、「http://～」になったままのページはセキュリティ意識が低いということになります。昨今はセキュリティ意識強化の唱えられる時代ですので、SSL対応をしていないことは会社の信用にも関わる問題になります。できることなら導入しておいたほうが良いでしょう。またweb制作側も、その旨をクライアントへ伝えて、SSL導入を反映するように努めるべきです。

SSLを扱う会社はたくさんある

エックスサーバーは共有サーバーで仕様制限があるため、エックスサーバーで提供されているSSLを利用します。（それ以外の利用はできません。）

対して、OS、ミドルウェア・アプリケーションなどを任意に選べる占有サーバーやAWSなどのクラウド（仮想サーバー）などを使っている場合、自分でSSL取扱会社と契約し、その証明書を利用することができます。有名なところでいうと、ベリサインやコモド、ジオトラストなどがあります。

エックスサーバーに頼んだSSL証明書を見ると、おそらくはコモド（COMODO）に頼んでSSLを実施しているようです。

クライアントに有料となることを伝える

Googleが「HTTPSのウェブサイトをSEOで優遇するアルゴリズムにした」と公式に発表してから、世はまさにSSL時代。今まで高価だったSSLがリーズナブルになった背景もあり個人でSSL化する人も増え、また、ウェブサイトに関連するwebサービスなどもSSLに次々と対応していっている状況です。

今まで、「費用が結構かかるんでしょ？ ならとりあえずナシでいいや・・・」と口にしてきた方々も、最近のタイミングならお手軽にSSLにしてセキュリティ強化に努められる良い時代になってきたのではないかと思います。そして、ある顧客様へ、そんな世間の流れを伝えてSSL化を提案してみたところ「その金額ならOK」というように回答を頂けました。

今回、適用したSSLプランは、エックスサーバーの「Core SSL」

「Core SSL」の基本料金

エックスサーバーでは、2016年3月31日(木)18:00まで、キャンペーン料金で、格安にCoreSSLを適用することできます。3年でたったの1.620円（税込）です。この機会に、SSL化を考えている人はぜひ検討してみてください。

注意として、この激安のCoreSSLは、1会員につき1契約までとなっていますので気をつけましょう。

ちなみにエックスサーバーはよくキャンペーンやっていますので、この機会を逃しても、すぐに同じような金額になるとは思います。

Core SSLには「SNI SSL(ネームベース)」と「IPアドレスベース」の２タイプが存在

今回、使用するのはSNI SSLです。こちらは追加料金なしで、発行から数時間程度で利用できて、一部の古いブラウザに対応していない仕様のものになります。今回のクライアント様のウェブサイトでは、古いブラウザに対応する必要はないため、とくに問題なしです。

もし、フィーチャーフォンなどの昔のブラウザへの対応もきちんとしたい場合、IPアドレスベースのタイプを選択する必要があります。こちらは初期設定費用と利用料が別途かかり、だいたい合計して1万円を超えます。また、発行してから利用するまで72時間以内となる仕様です。

格安だけど、CoreSSLのSNI SSL（ネームベース）では対応ブラウザに注意が必要

SNI SSL(ネームベース)は最近できた新しい規格ですので、対応ブラウザが少し限定されてしまいます。対応ブラウザは下記の通り。

サイトシールを使いたい場合は、もう少し料金が必要

サイトシールは、画像バナーのようなもので、対象のウェブサイトがSSL対応になってセキュリティ強化に努めていることを象徴するマークになります。端的にいえば、プライバシーマークのようなものです。CoreSSLではサイトシールがつかないので、もし表記したい場合は、別のプランを検討しましょう。

SSL化の手順

それでは、いよいよSSL化をしていきます。

手順１：SSL化をする前に.htaccessに「https→http」の301リダイレクト設定をしておく

エックスサーバーはApacheサーバーですので、.htaccessに下記のように記述することで「https→http」のリダイレクト記述ができます。

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{HTTPS} on
  RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule >

なぜ「https→http」の301リダイレクト設定が必要なのか。それは、httpsとhttpのページが混在しないようにするためです。httpsとhttpのページが両方存在すると、ロボットは、同じコンテンツのページが2個あると判断してしまいます。httpとhttpsが混在する場合は、悪質なコピーとは別の話なので、ペナルティを受けるわけではなさそうです。しかしながら、一つのページに対し、httpとhttpsで分かれているせいで、ユーザーのアクセスが分散してしまうリスクがあります。これはページランクを考えて、好ましいことではありません。

SSL証明書を発行した後、すぐにSSL化の手続きをできるなら不要かもしれませんが、その手続きをしている間にクローラーがインデックスすると、分散リスクが生じてしまいますので、ひとまず「https→http」を設定しておきましょう。これでクローラーは「http」だけのページがあると認識してくれて、SEO上の欠損が起きずに済みます。

手順２：エックスサーバーでSSL契約の手続き・サーバー証明書作成を進める

エックスサーバーで手続きを進めていきます。作業としては、主に2点。プランを選択し、SSL証明書に記載する自分自身の情報を埋めていきます。

この時、一点、コモンネームについて注意があります。コモンネームとは、独自SSLを利用する独自ドメインのことです。たとえば、本ブログサイトであれば、「https://my-terrace.com」のうち、「my-terrace.com」に該当します。

http://の後につく、"www"がない場合は、ナシでOKですが、一度ナシの設定にすると、その後にアリの設定に変更することができませんので気をつけてください。wwwアリで取得しておくと、wwwアリナシどちらにも後から選べるようになるので、wwwアリで設定した方が得かもしれません。しかし、URLを変更することは基本的にはありませんので、wwwナシならナシの設定で問題ないです。

支払いを済ませたら、メール案内が届きますので、その指示に従って、SSL証明書の取得申請を忘れずに手続きしましょう。承認作業後、Core SSLであれば数時間で審査完了し、SSLが扱えるようになります。自分の場合、1時間ほどで終了しました。

手順３：wordpressのサイトアドレスとWordPerssアドレスを「https://～」に変更する

管理画面のサイドバーにある「設定＞一般」から設定可能です。ページ全体をhttps化するため、両方ともhttps://に書き換えましょう。投稿画面でなく、データベースにログインして"site_url"と"home_url"の値を書き換えても同じことですので、お好みで修正すると良いかと思います。

手順４：.htaccessで今度は「http→https」の301リダイレクト設定に切り替える

サーバー証明書のインストールも終わっているので、全ページSSL化するため、以降はhttps://に統一するように、リダイレクト設定を切り換えます。

.htaccessに下記のように記述してください。

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTPS} !on
 RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule >

「https://」のリダイレクト統一が済んだら、次に、https://とhttp://が混在しているページのエラー除去作業を進めていきます。

手順５：wordpressサイトを構成しているtheme内のphp・jsなどのソースコードファイルに記載された「http://」情報を「https://」へ一括置換する

Grepや秀丸などを使って、各ファイルに記載された「http://」情報を「https://」に一括置換します。この時、外部サイトなどのリンクも誤って置換しないよう、置換する時はドメイン名も含めて置換するようにしましょう。

手順６：データベースの情報をエクスポートして、「http://」情報を「https://」に一括置換して、それをインポートする

おそらく、手順５までの段階だと、single.phpに該当する投稿記事ページにおいて、SSL化になっていないエラーが起きているかと思います。これは、たとえば投稿記事内の画像URLなどのディレクトリ情報が「http://」のままになっていることが原因です。

データベースの中身を「https://」に統一することで、single.phpのエラーはつぶせます。データベースの一括置換ですので、手順3のサイトアドレスとWordpressアドレスを修正する時、一緒にやってしまっても良いかもしれません。

手順７：contact form 7などインストールしているプラグインがきちんと動作するか確認する

今回、SSL化したサイトではcontact form7を使っていたので、きちんと動作するか確認をします。自分の場合、とくに問題なく動作していました。

手順８：各ページを見直して、エラーが起きていないかチェックする

自分の場合、手順３～手順７の作業で、すべての「http混在エラー」はつぶせていました。ありがちなミスとしては、ソースコードのhttp://を一括置換したつもりが、jsファイルだけしていなかった、など抜け漏れが考えられますので、しっかりと確認するようにしましょう。

ちなみにSNS関連のソーシャルボタンですが、これらはとくに修正することなく動作していました。使っていたボタンはfacebook,twitter,google+,hatenaの4種類です。

手順９：HSTSを設定しよう

SSL化を説明するブログ記事は多いですが、このHSTSに触れていない記事も多く見かけます。
HSTSについて、wikipediaを見てみます。

HTTP Strict Transport Security (エイチティーティーピー・ストリクト・トランスポート・セキュリティ、略称 HSTS)とは、WebサーバーがWebブラウザに対して、現在接続しているドメイン（サブドメインを含む場合もある）に対するアクセスにおいて、次回以降HTTPの代わりにHTTPSを使うように伝達するセキュリティ機構である。
引用：https://ja.wikipedia.org/wiki/HTTP_Strict_Transport_Security

じつはSSL化をして「https://～」にしても、セキュリティ的にはまだ甘いです。理由は、ユーザーが「http://～」でアクセスした時、リダイレクト設定をしたとしても、その通信自体はhttp://環境で実施されてしまうからです。

HSTSを使うと、「https://」による通信規制をするようにHTTP レスポンスヘッダにセットし、そのことをブラウザに送信して強制させることができます。

ただし、厳密には、HSTSを使っても、そのサイトに始めてアクセスする時に「http://」で接続した場合は、Strict-Transport-Securityのヘッダ情報を受け取るまでの間、「http://」の通信をしてしまいます。しかし、HSTSを設定しておけば、その後のアクセスにおいてはブラウザにセットされたヘッダ情報が残る限り、（クリアしない限り）https://接続を強制することができます。

HSTSを導入する具体的な方法は、下記のコマンドを.htaccessファイルに入力すればOKです。これは先ほどに入力した301リダイレクトよりも上の行にくるように記述してください。

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

max-ageでは、そのhttps://接続を強制させる期間を指定しており、上記の場合は1年間、となります。

とはいえ、HSTSにも欠点があります。最初の「http://」接続とブラウザ情報のクリアで、少し抜けがありますし、IEなど一部ブラウザでは対応していません。この問題の一部を解決するためにはプリロードHSTSというものもあります。

手順１０：プリロードHSTSｗｐ設定しよう

プリロードHSTSでは、https://hstspreload.appspot.com/のサイトに登録しておくことで、そのサイトにはHSTSが設置されている、と対応ブラウザにあらかじめ知らせておくことができるというものです。これで最初のアクセスに対して、より強化した対応が可能となります。

基本的にはドメインを入力するだけで登録完了ですが、ちゃんと機能させるためには.htaccess側に所定の記述をしておくなどの条件が必要となります。

手順１１：Googleウェブマスターツールの再登録

こちらは新規にプロパティを作成し、https://で作成する必要があります。古いhttp://のプロパティは残しておいて大丈夫ですが、インデックスの移行が終了した頃に削除したら綺麗かと思います。

手順１２：Googleアナリティクスの修正

これは、httpとhttpsを切り換えることができるので、既存データのプロパティを編集しましょう。

手順１３：自動配信サービス「dlvr.it」の修正

feed配信のURLが変更になっていますので、発信元を修正しておきましょう。テスト投稿をして、各SNSに情報が発信されていることを確認したら、以上の作業で、SSL化は無事に終了です。

SSL化をする時の注意点

SSL化をすると、SNS関連のソーシャルボタンのカウントがリセットされる

SSL化をすると、SNS関連のソーシャルボタンのカウントがリセットされてしまいます。ソーシャルボタンを導入している企業サイトをSSL化する場合、クライアントの了承をきちんと得てから着手するようにしましょう。トラブルの基です。

それまでに予約投稿していた記事の公開が失敗する

もし、SSL化する前にwordpressの予約投稿設定をしていた記事がある場合、気をつけてください。自分の場合、公開に失敗してしまいました。予約投稿していた記事が少なかったので、エラー解明するよりは、新たに作成しなおして解決しました。もし予約投稿している記事が多い場合は、色々と調査しなくてはいけないので注意です。

プラグイン「BackWPup」を使っている場合、エラーが起きるので注意

httpsになったので、function.phpに記述を加える必要があります。詳しくは下記の記事にまとめています。
wordpressのプラグインBackWPupで「HTTPレスポンステスト、エラー」が起きた時の対処法

まとめ

いかがでしたでしょうか。なかなか長文になってしまいましたが、SSL化をして「http://」を「https://」に変更することはカンタンに見えて、じつは、これくらいの作業が必要となります。きちんとスケジュールに余裕を持って取り組むようにしましょう！