2017.7.8 Web制作

【SSL対応】SEOにも効果有り！WebサイトをHTTPからHTTPSに移行する方法

【SSL対応】2017年版！さくら×お名前のWebサイトをHTTPからHTTPSに移行する方法

以前からフォームがあるページのみHTTPS通信を行うようにSSL対応しているサイトはありましたが、数年前からWebサイトの全ページをSSL対応すべきという流れになってきています。
そしてGoogleは「HTTPSをランキングシグナルに使用します（SSL対応しているWebサイトをわずかですが検索で有利にする）」と発表しています。

遅ればせながらよらノートもようやくSSL対応したので、「一度もやったことない」「これからやろうと考えている」という方向けに私が行った方法を残しておこうと思います。

この記事の目次

よらノートの環境

ドメイン：お名前ドットコムにて取得・管理
サーバー：さくらインターネットのレンタルサーバーにて管理
運営：中の人

当ブログよらノートの場合、「yoranote.com」のドメインはお名前ドットコムにて取得・管理しており、さくらインターネットのレンタルサーバーで運営しています。

今回お話するのはこの環境についてです。その他の環境の場合、大筋の流れは似たような感じだと思われますが、細かい手順が違う可能性が高いので私より詳しい方の記事を参考にした方が良いと思います。

そもそもSSLって何？

時代の流れだとか、よく分からないけどやっておいた方が良いんでしょ？というイメージはありますが、SSLとは一体何なのでしょう。

SSLとTLS

SSL（Secure Sockets Layer）とTLS（Transport Layer Security）は、どちらもデータを暗号化して送受信する仕組みのことです。暗号化通信というやつですね。大事な個人情報やクレジットカード情報といった機密性の高い情報をやりとりする時、悪意のある第三者によって傍受や改ざんされないよう暗号化して送受信します。

TLSとはSSLの後継バージョンのことです。SSLの仕組みに改善を重ね、SSLバージョン3.0を基にしたTLS1.0が生まれました。HTML4.01からXHTML、HTML5になったようなものです。SSL3.0には大きな脆弱性が発見されたため、2017年現在ではTLSでの通信が推奨とされており、各証明書もTLSに対応していますがSSLという名称が一般的に普及しているためSSLとTLSをまとめてSSLと呼ぶことが多いみたいです。へぇ～。

全ページSSL化の手順

それでは全ページSSL化に向けて順を追って説明していきます。

さくらコンパネにログイン

まずはさくらインターネットのコントロールパネルにログインします。

CSR（Certificate Signing Request）の作成

コントロールパネルにログインしたら「ドメイン設定」から一覧表の中の利用したいドメインのSSLの証明書列にある「登録」をクリック。次に「2048ビット」が選択されていることを確認し、「秘密鍵を生成する」ボタンをクリックします。

いきなり訳の分からない言葉が出てきました。CSRって何・・・？

CSRとは、サーバIDを申請・取得するために認証局へ提出する署名リクエスト（Certificate Signing Request）です。サーバIDを導入するサーバで、ウェブサイトの情報（ディスティングイッシュネーム）などを入力して生成します。

シマンテック・ウェブサイトセキュリティCSR生成手順より引用

簡単に言うとSSL暗号化通信をしたいんですけどという申請書のようなものです。実際の紙ではなく暗号化された文字列の形です。
認証局（SSL証明書の発行機関）からSSL証明書を発行してもらうために、まずはこの申請書を作成します。

新規でCSRを作成する場合には「CSRを作成する」を選択。既に証明書を持っている場合は「証明書をインストールする」を選択します。
新規に作成する場合、ここでの入力項目は次のようになります。

ドメイン: デフォルトのままでOK
会社名: 管理者ではなく、そのサイトを持ってる人の会社名・医院名を入力。日本語などのマルチバイト文字が使えないので半角英数字で入力。他の人達が証明書情報を見た際に表示される会社名ってだけ。
部門名: 特になければ空欄でOK
国コード: JPのままでOK
都道府県: 会社名に入力した会社・医院が存在する都道府県を半角英数字で。
市町村: 会社名に入力した会社・医院が存在する市町村を半角英数字で。
aaa: bbb

入力できたらCSRを作成ボタンをクリック。

作成したCSRをバックアップしておく

非常に重要です。

出てきた長い文字列がCSRです。やり直しが利かないので念のためにどこかにコピペしてバックアップしておきましょう。

SSLの申し込み

SSLにもいくつか種類があり、その組織が法的に存在しているかどうか証明するものや、法的だけではなくちゃんと実在しているかどうかまで証明するものもあります。
ブログや一般のサイトであればドメイン型SSLで十分なので安いRapidSSLにそのまま申し込みをします。

これで申し込みは完了。

SSLを設定する

コントロールパネルからSSLを使用できるように設定します。コントロールパネルのメニューにある「ドメイン設定」の画面に入り、「4.SSLの利用：SNISSLを利用する」を選択します。

これでhttpsでアクセスできるようになります。
ただこのままだとhttpでもhttpsでもアクセスできるのでアクセスが分散してしまいます。またhttpでアクセスされてしまうとせっかくSSLを設定したのに意味を成しませんのでhttpsに統一すべきですよね。

転送設定

次の2つのファイルを編集します。
さくらのレンタルサーバーは独自仕様になっていて他と同じ対処だと動作しなかったり少し癖があるみたいです。

wp-config.php
.htaccess

wp-config.phpの編集方法

WordPressの場合はwp-config.phpを編集します。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
	$_SERVER['HTTPS'] = 'on';
	$_ENV['HTTPS'] = 'on';
	$_SERVER['HTTP_HOST'] = 'sample.jp';
	$_SERVER['SERVER_NAME'] = 'sample.jp';
	$_ENV['HTTP_HOST'] = 'sample.jp';
	$_ENV['SERVER_NAME'] = 'sample.jp';
}

1行目はさくら用の記述です。
上記の「sample.jp」の部分をSSL対応させたいサイトのドメインに変更し、wp-config.phpの一番上に追加します。
よらノートの場合「yoranote.com」にします。

.htaccessの編集方法

次にWebサイトのルートディレクトリにある.htaccessを編集します。WordPressを使っている場合、WordPressをインストールしたディレクトリにも.htaccessが存在しますが、そちらではなくルートディレクトリにある.htaccessに下記の内容を追加してください。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-SAKURA-FORWARDED-FOR} ^$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

最初は転送が上手くいかずハマってしまいました。
原因としては、さくらサーバーのWAF（Webアプリケーションファイヤーウォール）というセキュリティを上げるソフトをオンにしているとプロキシを通してしまうらしく、サーバー側でHTTPなのかHTTPSなのか判断ができなくなっていたために.htaccessで転送ができなくなっていたらしいです。もしもWAFがオンになっていて上手くいかない方はWAFをオフにして試してみてください。

管理人「よら」はこう思う

今年に入ってからGoogle ChromeではSSL/TLSに対応していないサイトでフォームに入力しようとすると「保護されていません」とか「このフォームは安全な接続を使用していないため・・・」と警告が表示され、ユーザーに注意を促すようになりました。こんなこと言われたら『よく分からないけど危ないサイトなのかな・・・？』と思う人もいるかもしれません。
SSL/TLSを利用することでサイトを訪れてくれるユーザーの安心感につながることは大きいと思います。

安全な通信を行えることは当然大きなメリットですし、GoogleもHTTPSをランキングシグナルとして使用すると発表していますのでSEOの1つの手段にもなります。
手順さえ分かっていればたいして時間もかかりません。どうせなら早く導入してしまった方が良いので、この機会にぜひ導入を検討してみましょう。