サーバーを SSL 対応にした

1年くらい前からネットニュースなどで Google が以下のようなことを発表しているのを知って、気になっていたのでサイトを SSL 対応させることにした。

僕が借りているのは XREA と言うサーバー。
無料で SSL 対応にできるそうです。

サーバー設定

「無料SSLの新規設定」のページには「新規作成」の説明しかありませんでした。
「まぁ多分こうだろう。」と思いながら操作をしていきました。

xreassl01.jpg

コントロールパネルに「ログイン」後、左メニューにある「サイト設定」のボタンをクリック。

該当するサイトをクリック。
僕の場合は「antonsan.net」です。

xreassl02.jpg

「SSL設定」が「無効」になっています。
「サイト設定の変更」をクリック。

xreassl03.jpg

この画面の「無料SSL」をクリック。

xreassl04.jpg

同じ画面、下にある「サイト設定を変更する」をクリック。

xreassl05.jpg

この画面が出たら、完了です。

xreassl06.jpg

コントールパネルに戻ると「SSL設定」が「無料SSL」となっている事が確認できます。

xreassl07.jpg

で、自分のサイトを見てみると・・・あらら「この接続ではプライバシーが保護されません」だそうですよ。

xreassl08.jpg

2~3分後に覗いてみると今度は「403 Forbidden」が表示されていました。

xreassl09.jpg

で、またしばらくして見てみると今度は「Internal Server Error」。
「やらかしちまったかも・・・。」と少しヒヤヒヤしました。

xreassl11.jpg

コントルールパネルを操作してから20分後位でこの画面に復帰しました。
おお、「https」になってる。
と一瞬は喜びましたが、「このサイトへの接続は完全には保護されていません」とのメッセージ。
(これは Google Chrome で見た画面です。)

xreassl10.jpg

こちらは Firefox で見た画面です。
こちらも「この接続は安全ではありません。」

ワードプレスの設定

SSL 対応に関してはいろんな方々が丁寧に解説して下さっているので、それほど慌てる事もなく設定できると思います。

まずは、ワードプレスの URL 変更をしました。

シングルサイトの場合

覚え書きとして使用しているサイト「antonsan.net/vt」はシングルサイトなので、以下の処理をして完了です。

  1. 「ダッシュボード」→「設定」→「一般」にはいる。
  2. 「WordPress アドレス (URL)」と「サイトアドレス (URL)」を「http」を「https」に変更。
    僕の場合は「http://antonsan.net」を「https://antonsan.net」に変更しました。

マルチサイトの場合

「あんとんさんち」と「ギター教室あんとん」はマルチサイトなので phpMyAdmin で変更しました。

  1. 「wp_options」内の「siteurl」と「home」の「option_value」を編集。
    「http」を「https」に変更。
  2. 「wp_2_options」内の「siteurl」と「home」も同様に編集します。
    編集前の画面
    xreassl12.jpg
    編集後の画面
    xreassl13.jpg

設定変更できているか確認したければ、ワードプレスのダッシュボードから「設定」→「パーマリンク設定」で確認するといいと思います。

xreassl14.jpg
これが編集前の画面です。
「http://antonsan.net」になっています。

xreassl15.jpg
これが編集後の画面です。
「https://antonsan.net」になっています。

ワードプレスの記事内にある「http」を「https」に置換。

「Search Regex」と言うプラグインを使ってワードプレスの記事内の文字列を置換します。

僕の場合は以下の通り入力しました。
Search pattern → http://antonsan.net/
Replace pattern → https://antonsan.net/xreassl16.jpg

Source を「Post content」にして「Search」ボタンを押すと検索できます。
「3467個」の置換項目が発見されました。xreassl17.jpg

「Replace & Save」ボタンを押すと置換されます。xreassl18.jpg

Source を「Comment author URL」にしたら「29個」の置換項目があったので、これも置換しました。xreassl19.jpg

他にも「Comment content」で「1個」見つかったので置換しました。

Google Chromeのデベロッパーツールでエラーを確認し修正

「Search Regex」だけでは、問題項目を置換できなかったので Google Chrome のデベロッパーツールでエラーを確認し修正しました。

Google Chromeのデベロッパーツールを起動して「Console」をクリックすると黄色く表示されるのがエラーです。

xreassl20.jpg

僕の場合は、バナー画像の URL が「http」のままだったので、使用しているテーマ(Cocoon)から設定変更しました。

後はウィジェット内にある「おともだちリンク」の画像 URL が「http」のままだったので、ウィジェットの中の文字列などを変更しました。

完成しました

ここまでの操作をして完成しました。
Chrome では「保護された接続」の表示になります。xreassl21.jpg

Firefox では「安全な接続」と表示されます。xreassl22.jpg

転送設定をする

閲覧者が「http」で接続してきても「https」に転送されるように設定します。
.htacces に以下を追加します。

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

これで、検索サイトに「http」と記載されていても安心です。

SSLの安全性評価をしてみる

サイトのセキュリティ レベルと設定をテストするために Qualys SSL Labs というサイトでサイトの安全性を評価してみました。

使用方法などに関しては「株式会社アールエムエス」様の以下のページを参考にさせていただきました。

Qualys SSL LABS SSL Server Test で SSL サイトの安全性を評価する

xreassl23.jpg

最高グレードである「A+」をいただきました。
って、僕は何もしていないんですが・・・。

それでも、なんだか嬉しいものですね。

XREA さんに感謝です。

スポンサーリンク
あんとんさんち 覚え書き

コメント