全くの思いつきで始めて見た我がサイトのSSL化。なかなか骨が折れたよ(-.-;) いざ完了してみれば、そんなに難しいこともないんだけど。
SSLとは
その前に一応おさらい。SSLとは・・・SSL(Secure Sockets Layer)とは、インターネット上で通信を暗号化する技術です。 SSLを利用してパソコンとサーバ間の通信データを暗号化することで、第三者によるデータの盗聴や改ざんなどを防ぐことができます。(出典:SSLのまとめ | シマンテック)
ということで、http://ではなく、https://で始まっているサイトなら少なくとも暗号化はされてるよ、ということ。
SSL証明書の取得
で、SSL化するには、まずSSLを証明してくれるところから証明書をもらわなくてはならないのだが、今回はなんと!タダで証明書を発行してくれる(それでいいのか?(笑))「Let’s Encrypt – Free SSL/TLS Certificates」で証明書を発行してもらった。ここは本来はSSH(コマンドを使いサーバーにアクセスするツール)を使って直接サーバーに証明書をインストールするのが本来のやり方らしいが、私の場合まだそこまでスキルがないので、「ネットオウル株式会社」のサイトより申し込んで、取得した。(※トップページのSSLボックスと書いてあるところより進んで行けば取得可能。)
ちなみに
bono-ism.com
www.bono-ism.com
は別ドメインと看做される。と言うわけで、お金を出せば、どちらも同一ドメインと認識してくれるSSL証明書もあるのだが、私は、Let’s Encryptでどちらも申請してしまった。まあタダだし・・・。
さくらのレンタルサーバーへSSL証明書をインストール
以下、さくらインターネットのサーバーコントロールパネルからまずドメイン設定。下記の様に、念のため、bono-ism.comとwww.bono-ism.comの2つのドメインを登録している。それぞれに対応するSSL証明書をインストール。(※真ん中の○○○.sakura.ne.jpはさくらからデフォルトで貰える外せないドメイン)
どちらも上級者向けを選択。
SNI SSLを選択する。
コントロールパネルでの設定は以上で修了。
関連ファイルの更新
この作業は最後でいいが重要事項なので先にご説明。今回、アドレスをhttp://~(旧アドレス)からhttps://~(新アドレス)に変更するので、http://~でアクセスして来た人をhttps://~へ誘導したい。それも大事だが、それ以上に大事なのが(笑)、下記に説明する301リダイレクトというのを行うと、今まで培ってきた旧アドレスのGoogleのページランクがhttps://~(新アドレス)にそのまま引き継げる。と言うわけで、301リダイレクトの設定をするのだが、これは.htaccessファイルとwp-config.phpファイルを更新してやる必要がある。
.htaccessの更新
ftpアプリでサーバーに入ると、WordPressをインストールしたフォルダに「.htaccess」というファイルが作成されているので(私の場合「www/bono-ism.com/blog」内)、これをutf-8で保存出来るテキストエディタで編集する。(Windowsのメモ帳は止めた方がよい。) ちなみに私の.htaccessの内容は下記の通り。
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$ RewriteRule ^(.*)$ https://bono-ism.com/blog/$1 [R=301,L] </IfModule> # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /blog/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /blog/index.php [L] </IfModule> # END WordPress
いい機会なので、.htaccessには一体何が書いてあるを下記サイトで学ばせていただこう。正規表現が、ちと難しいけども。
【分かって書いてる?】.htaccessの書き方と設定方法まとめ | Adlib
私の場合の設定のキモは私のブログはドメイン(bono-ism.com)のひとつ下の「/blog」に収められているので、4行目の通り「bono-ism.com/blog/$1」
とすること。これのせいで1時間以上色々な設定を見直してたのはここだけの話。「# BEGIN WordPress」以下はWordPressが勝手に設定するので弄る必要はない。その部分をよく見るとこのブログのベースは「/blog」直下ですよ、と設定してくれているようだ。
wp-config.phpの設定
// プロクシでIPが入るとSSLアクセス状態をセットする if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) { $_SERVER['HTTPS'] = 'on'; $_ENV['HTTPS'] = 'on'; $_SERVER['HTTP_HOST'] = 'bono-ism.com'; $_SERVER['SERVER_NAME'] = 'bono-ism.com'; $_ENV['HTTP_HOST'] = 'bono-ism.com'; $_ENV['SERVER_NAME'] = 'bono-ism.com';
「wp-config.php」ファイルの冒頭に上記のコードを入れて、WordPressをSSLに対応させる。
WordPressの設定
WordPressのダッシュボード>設定>一般設定より下記の様にアドレスを「https://」に変更する。
これで少なくともWordPress自身が吐き出すコードで今まで「http://~」だったところは「https://~」に置き換えられるはず。(Pluginなどを除く)
これで終わり・・・じゃない(泣)
上記をつつがなく終えて、さあ安心安全な鍵マーク
になっているかと思いきや、さにあらず!
クリックすると・・・
安全だってばよー(泣)
どうしてこのようなことになるかというと、画像などへのリンクが一部SSL接続でないもの(要するに http:// で画像に接続してしまっているリンク等)が残っているために、「混在コンテンツ」として警告が出てしまうのだ。と言うわけで、ここからバグつぶしの様にこれらの原因を取り除いていく。ここでお手元の「F12」キーをポチッと押して頂きたい。・・・すると大体のブラウザは開発モードに移ると思う。そこでさらにコンソールタグに移ってもらうと、エラーの原因がツラツラと出てくる。そこで当たりをつけながら、未だに非SSL接続をしてるのは何が原因なのか当たりをつける。(大体は古いアフィリエイトタグだったりするが、古いプラグインが悪さをしてる可能性もあり。)
そこで登場するのがWordPressのプラグイン「Search Regex」。これで「http://」出力されている箇所を「https://」に全て置き換えてしまえる。詳しい使い方は、下記ブログ記事の下の方にある。
WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)|寝ログ
これで潰せないものは、恐らくプラグインが原因だと思う。これはひとつひとつ、プラグインを点検するしかない。
最後に・・・
下記参考サイトを始め、色々なサイトを見て、一日がかりでの設定だった。私の場合「bono-ism.com」の下に「/blog」「/photo」と2つのWordPressを入れているので、若干状況が特殊だったかもしれない。私の場合「.htaccess」ファイルはWordPressがあるフォルダだけにあればよく、root直下に別にある必要はなかった。また、敢えて触れなかったが、さくらのレンタルサーバー特有の問題もあり(どことは指摘していないが、上記は全て対策済みのコード)、それも障害と言えば障害だった。まあ、そのあたりは参考サイトに詳しいのでそちらを当って欲しい。
とにかくネットの先人達の知恵抜きには何も出来なかった。改めて深謝。
参考サイト:
さくらのレンタルサーバでHTTPS(SNI SSL)な独自ドメインのWordpressサイトを構築する際の注意点|Qiita
さくらでURL正規化を正しく行うSSLの設定方法|はるかのひとりごと