独自SSLが3年で1500円!エックスサーバーのcore SSLでwordpressサイトを完全httpsにした一連の作業・注意点まとめ

web制作

読了の目安時間: 1653

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

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

今回は、その企業様のサイト(エックスサーバーのwordpress製)を完全SSL化した時の一連の作業をまとめてみました。これからSSL化をやる人の参考になれば幸いです。(プラグインには一切頼りません。)

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

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

SSL(Secure Sockets Layer)とは、インターネット上で通信を暗号化する技術です。SSLを利用してパソコンとサーバ間の通信データを暗号化することで、第三者によるデータの盗聴や改ざんなどを防ぐことができます。
引用:https://www.symantec.com/ja/jp/ssl-certificates/

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

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

SSLについて、詳しくはコチラ
https://www.symantec.com/ja/jp/ssl-certificates/

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

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

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

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

▼COMODO Creating Trust Online
https://www.comodo.com/?key5sk1=92c2c950fe0456d912af1421db4061ae0f7314fb

▼COMODO Japan
https://comodo.jp/

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

「Core SSL」の基本料金

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

○CoreSSL(1会員様1契約まで)
1年契約・・・1,000円無料
2年契約・・・1,800円→1,000円(税抜)
3年契約・・・2,500円→1,500円(税抜)

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

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

▼エックスサーバーの公式サイトはこちら
http://www.xserver.ne.jp/

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

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

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

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

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

SNI SSL(ネームベース)に対応するブラウザ
・Windows Vista以降のInternet Explorer7
(※WindowsXPのIEは非対応。)
・Mozilla Firefox 2.0 以降
・Google Chrome 6 以降
・Safari 3.0 以降
・iOS 4以降のMobileSafari
・Android 3以降のAndroidデフォルトブラウザ
・Windows Phone 7以降

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

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

エックスサーバーのSSL仕様・一覧ページ
https://www.xserver.ne.jp/revice_ssl.php

SSL化の手順

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

手順1: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上の欠損が起きずに済みます。

.htaccessは重要なファイルのため、基本的には隠しファイルになっています。そのため、使っているFTPソフトの設定を変えて、隠しファイルを表示する設定へ切り替える必要があります。.htaccessファイルはだいたい、public_htmlディレクトリの下に入っています。

winscpで隠しファイルを表示する方法
http://chihochu.jp/winscp-htaccess/

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

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

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

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

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

具体的な方法は、公式サイトに分かりやすくまとめてあります。
https://www.xserver.ne.jp/manual/man_order_domain_ssl.php

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

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

SSL証明書がサーバーに設定された後、各ページを見ていくとURL先頭部分にSSL化を示す鍵マークの存在するページと存在しないページがあると予測されます。これは、「http://」と「https://」の情報が混在していると起きるエラーになります。Google Developerツールなどで見てみても、Mixなど混在を示すエラーが起きていることが確認できます。もちろん、混在していると良くないので、手順に従って、適宜修正していきます。

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

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

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


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

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

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

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

一括置換をしてもエラーが解決しない場合、外部からのAPIソースコードを入れているケースが考えられます。この場合はhttp://情報を細かく追う必要があります。たとえばGoogle map APIを導入している場合では、http://とhttps::が混在していることで地図が表示されなくなったりするので、headタグに記述している<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>のhttp://をhttps://に修正する必要があります。

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

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

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

データベースのバックアップは絶対に保存しておいてから作業するようにしましょう。もし変な作業をしてしまい、データに変な欠損が生じると、wordpressが機能しなくなってしまいます。

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

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

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

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

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

SSL化では、大きいデータを追っかけていくことになるので、Grepなどワイルドカード検索・一括置換の方法は、絶対に準備しておくようにしましょう。

手順9: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というものもあります。

手順10:プリロードHSTSwp設定しよう

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

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

プリロードHSTSの詳しい設定方法はこちら
https://hyper-text.org/archives/2015/01/full_time_ssl_website_quick_start.shtml

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

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

手順12:Googleアナリティクスの修正

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

手順13:自動配信サービス「dlvr.it」の修正

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

SSL化をする時の注意点

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

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

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

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

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

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

まとめ

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

エックスサーバーはこちらから
http://www.xserver.ne.jp/

今読んだ記事をシェアする

ssl-thumb

独自SSLが3年で1500円!エックスサーバーのcore SSLでwordpressサイトを完全httpsにした一連の作業・注意点まとめ

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。