httpからhttpsに乗り換えた具体的手順を公開します

こんにちは、ゆーすけ(@yusuke_plmrstn)です。

ブログに限らずネットコンテンツを取り扱う人であればセキュリティに対して注意を払う必要があります。
僕はこのブログとは別にご署名ネットを運営しています。
今回はそのサイトのセキュリティを高めようと思い、http→httpsへの切り替えを行いました。
その時の手順をご紹介しますので、これからhttpsの導入を考えている方の参考になれば幸いです。

この記事の目次一覧

httpとは？httpsとは？

ブラウザのアドレスバーを見るとどのサイトのhttp、もしくはhttpsから始まっていることがわかります。

Chromeで見るとhttpのサイトは最初が省略されて表示され、httpsの場合は緑色でhttpsと表示されていることがわかります。

http

インターネット上では様々な情報がやり取りされていますが、ちょっと知識のある人であればhttpで表示されるサイトデータの中身を簡単に見ることができます。つまり情報を盗み見されてしまうということ。
例えば個人情報やクレジットカード情報を入力するサイトがhttpの場合、悪意を持った人であれば個人情報を抜き取ることが可能です。

https

一方のhttpsは暗号化されたデータをやり取りするためデータは盗まれません。つまり個人情報を取り扱うサイトにおいてhttpsで表示されていればセキュリティの高い安心なサイトであるといえるわけです。

httpからhttpsへの移行

それでは順番に手順を追っていくことにします。
なお今回の導入は下記条件において実施した内容です。

・エックスサーバー
・ワードプレス
・Google Chrome

目次は次のとおりです

1. エックスサーバーからSSL設定
2. ワードプレスの設定を変更する
3. Search Regexを使って内部リンクを置換する
4. .htaccessにリダイレクト用のコードを追記
5. SSLエラーの確認をする
6. その他のサービス・ツールの設定

ちなみにhttpsに移行しようとした場合、通常であれば年間1000円くらいの登録料が必要になったり面倒な申請手続きを行う場合がほとんど。
ところがエックスサーバーの場合は2016年6月から完全無料でhttpsへの移行が数クリックで完了するサービスを始めています。
これのお陰でグッと敷居が下がっていますので、この機会にエックスサーバーへの乗り換えを検討するのもアリですね。
安定したサーバー運営に加えてサービスも良しでいうことありません。

1. エックスサーバーからSSL設定

まずはエックスサーバーのサーバーパネルにログインし、SSL設定をクリックします。
※ SSLとはhttpsのことです。

表示された画面には現在登録しているドメインが表示されるので、httpsに移行したいドメインの「選択する」をクリックします。

そして「独自SSL設定の追加」タブをクリック。

確定ボタンをクリック。これでお終いです。
ちなみに左下のチェックボックス「CSR情報を入力する」にはチェックをいれる必要はありません。

↑このように取得申請中と表示されればOK。
申請をして30分〜1時間くらいすれば自分のサイトがhttpsで表示されるようになります。
今までhttp://〜で使っていましたがsを付け加えてhttps://〜でアクセスしてみてください。ここまでは迷うことなく比較的かんたんにできますね。
ちなみに切り替えがまだ終わってない状態でhttpsページを表示させようとしてもエラー画面が出てしまいます。

しばらく時間をおいてアクセスすると↓のようにhttpsから始まるようになっていることがわかりますね。

でもまだこの段階ではhttpsの文字色は灰色です。
つまり完全に移行が終わっていないことを意味しています。
これ以降の設定についてはエラー画面が表示されなくなったことを確認した上で進めるようにしてください。

2. ワードプレスの設定を変更する

お次はワードプレスの設定変更です。
管理画面に入り、[設定]→[一般]に進めます。

そこに表示されている「WordPressアドレス」と「サイトアドレス」をhttpsに修正して保存しましょう。

3. Search Regexを使って内部リンクを置換する

今まで投稿した記事では内部リンクを貼っている場合があると思います。内部リンクとは自分の過去記事を紹介する時に記事のリンクを貼るアレですね。
せっかくhttpsを登録したのにリンク先がhttpだと意味がありません。
1つ1つ手作業で修正することもできますが、ここでは作業簡略化のために “Search Regex”というプラグインを使います。

まずワードプレスのプラグイン画面から “Search Regex”を検索、インストールして有効化します。

有効化されるとツールの中に “Search Regex”が追加されているので選択します。このプラグインを使い、httpをhttpsに一括置換しようというわけ。

その先の設定画面では次のように入力してください。

・Search pattern→https化する前のサイトアドレス
・Replace pattern→https化した後のサイトアドレス

ここまで出来たら一度 “Replace”をクリックします。
すると置換される候補がズラリと表示されます（この時点ではまだ置換されませんので安心してください）

↑が一括置換する候補一覧です。
ご署名ネットはコンテンツが少ないサイトなので置換候補の数はわずか62しかありませんが、一般的なブログだとかなりの数が表示されると思います。

https化する前のもの（みどり枠で囲んだもの）をhttpsに置き換え（茶枠で囲んだもの）ますよ、というものです。
一度変更すると戻すことができなくなるため、多少時間をかけてでもこの内容はしっかりチェックしておきましょう。

内容に問題がなければ “Replace & Save”をクリックします。

しばらくすると一括置換が終了しました。

ここまでで作業の大半が終了しました。

4. .htaccessにリダイレクト用のコードを追記

次はリダイレクトの設定を行います。
今まで “http://gosyomei.net/“に来ていたアクセスを “https://gosyomei.net”に転送する必要がありますが、.htaccessというファイルにちょこっとコードを追記することで自動的に転送してくれるようになります。

まずはFTPソフトを使ってサーバーにアクセスします。
僕が使っているのは “Cyberduck”という無料ソフトです。

FTPで “Pulic_html”ディレクトリを開きます。
ワードプレスの場合このような構造になっていると思います。

そして “Public_html”の中にある “.htaccess”というファイルをダウンロードします。

※ .htaccessが見つからない！？ ※
人によって “Public_html”の中に “.htaccess”が見つからないという場合があります。
実は.htaccessファイルはもともと不可視ファイルのためFTPソフトの設定を変更して不可視ファイルでも表示されるようにする必要があります。
Cyberduckの場合は[表示]から不可視ファイルを見るよう設定変更ができます。

※ Macで.htaccessが見えない！？ ※
.htaccessが不可視ファイルのためダウンロードしてもMacで表示されないことがあります。
その場合はターミナルからコマンドを入力すると不可視ファイルが見える設定に変更することができます。

まず[Finder]→[アプリケーション]→[ユーティリティ]の中からターミナルを開きます。次に下のコマンドを入力し、

defaults write com.apple.finder AppleShowAllFiles -boolean true

そして次のコマンドを入力すると不可視ファイルが見えるようになります

killall Finder

今まで通り不可視ファイルは見えない設定に戻したい場合はターミナルに次のコマンドを入力し、

defaults delete com.apple.finder AppleShowAllFiles

そしてさらに下のコマンドを入力すれば元通り。

killall Finder

無事.htaccessファイルが見えるようになったところでエディタで開きましょう。そして先頭に次のコードを入力して保存します。

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

そして保存した.htaccessファイルをFTPソフトを使って “Public_html”ディレクトリにアップロードして上書き保存すればOKです。
これで自動転送されるようになりました。
試しに「http://gosyomei.net」にアクセスしてみてください。ちゃんと「https://gosyomei.net」に転送されていることがわかりますね。
ちょっと手間がかかりますが、.htaccessを転送設定しておくことで今までのサイト評価も引き継ぐことが可能です。

5. SSLエラーの確認をする

転送設定も無事終わりましたがまだ作業は終了していません。
サイトにアクセスしてもhttpsがみどり色になっていないはず。

安全な接続が確立されていれば鍵マークが表示されて下のように文字がみどり色になります。

これを解決するためにはページを1つ1つ開いて原因をこまめに潰していく必要があります。
まずみどり色になってないページ（＝エラー）を開き、エクスクラメーションマーク（＝ビックリマーク）をクリックします。

メッセージが表示されるので「詳細」をクリックします。

すると次のような診断画面が表示されます。

問題は一番下の黄色の枠。
抜き出してみると次のようなメッセージが見られます。

「Mixed Content: The page at ‘https://gosyomei.net/’ was loaded over HTTPS, but requested an insecure image ‘http://gosyomei.net/wp-content/uploads/2016/11/facebook-1.png’. This content should also be served over HTTPS.」

要約すると次のような意味になります。
「ページはhttpsで呼び出したんだけど使われてる画像がhttpから呼び出されてるから混在（＝Mixed content）になってますよ」

httpsは安全な接続ですが、その中にhttpのページ、つまり安全に接続できないコンテンツが混じっていると Mixed Contentエラーになってしまいます。
これを1つ1つ潰していくんですね。けっこう手間がかかります。

試行錯誤して無事安全な接続が確立されました。

ちゃんと保護された接続になっていることがわかりますね。
この時に手を加えたのは次の項目でした。

・ウィジェットのテキスト
先程の “Search Regex”ではウィジェットのテキストの内容まで変更できないようです。そのため手動でhttpsへの書き換えが必要でした。
・ヘッダー画像の張り替え
ヘッダー画像も手動で変更する必要があります。設定している画像を一度削除して再設定するとhttps接続になりました。

これを全てのページで行います。
コンテンツが多くある人だと気の遠くなる作業ですね。

6. その他のサービス・ツールの設定

仕上げの作業として外部ツールの設定も変更しておきましょう。
まず代表的なところはGoogleアナリティクスですね。
登録サイトのプロパティからhttpsを選択しておきましょう。

次はエディタの設定を変更します。
僕はMarsEditを使っているのですが、設定画面から変更することができます。

これら以外にもツールを使っている人は設定を変更しておきましょう。

乗り換えた感想

これでご署名ネットは安全なサイトになりました。よかったよかった。
ご署名ネットサービスを開始してまだ日が浅いことからコンテンツも少なくhttpsへの乗り換えは比較的らくな作業でした。
もしムクッといこうブログを乗り換えようと思うともっと大変な気がします。
このブログでは個人情報を入力するようなページはないためhttpsの優先順位は低めですが、将来的には乗り換えを検討する必要があります。

最初からhttpsでサイトを作っておけば無駄な労力をかけることなく作業できますね。
手間はかかるかもしれませんが情報の取扱いの重要性が高まる昨今、検討してみてもいいかもしれませんね。