さくらのレンタルサーバーで SNI SSLにしてみる


そろそろ、こちらのサイトは さくらのレンタルサーバーなので 常時SSL にしよう と思ってたところなので SNI-SSL にしてみました。簡単な手順や やる事などまとめてみました。
 

ラピッドSSL(SNI SSL)申込

さくらサーバーで以下の手順でSNI-SSLの設定をします。
「ラピッドSSLを初めて設定する|さくらインターネット公式サポートサイト」
https://help.sakura.ad.jp/hc/ja/articles/206056822

簡単に言うと CSRの作成 → ラピッドSSLのお申し込み です。
CSR設定
※使っているURL が www付(http://www.ドメイン/) の場合は注意してください。
特に難しくなく画面のボタンをポチポチ押しながら進む感じです。
SSL申込
 
ラピッドSSLの申し込みをすると、「お申込受付完了のお知らせ」のメールが来ます。
今回はクレジットカードで決済しましたので、すぐ作業をやってくれました。
しばらく待つ(30分くらい)と「ジオトラスト SSLサーバ証明書発行のお知らせ」 というメールが来ます。
サーバーの設定が終わったよという内容のメールです。

メールでは 「中間CA証明書のインストールが必要」 となっていましたが、すでに入っていましたので作業する必要はありませんでした。
※サポートに聞いてみたら「サーバコントロールパネル」からCSR発行した流れで申し込んだ場合は作業不要だそうです。

サーバコントロールパネルで 「SNI SSLの有効化」をしてさくらサーバー側の設定は終了です。
これでサイトは http でも https でもどちらも使える状態になりました。

 
 

WordPressの設定

次に、WordPresst側の設定をします。FTPでサーバーに入れるように準備してください。

WordPress管理画面wでの設定

SSLが反映して使えるようになった状態で管理画面へログインします。
この時、http://ドメイン/wp-login.php ではなく https://ドメイン/wp-login.php でアクセスしてください。
※非SSL(http://)だと 変更後、再ログインになるからです。
 
もし「WP Fastest Cache」プラグインを使ってる場合は、全てのキャッシュの削除をしてから プラグインを停止するか、「キャッシュ:有効にする」等のチェックを全て外して保存してください。
※動作確認、サイトチェック等全て作業が終わってから、有効化してください。
 
管理画面の「設定」→「一般」で、以下の項目のURL を 非SSL(http://~)~ から SSL(https://~) に変更して保存します。
【例】
 WordPress アドレス (URL) http://ドメイン   → https://ドメイン
 サイトアドレス (URL)   http://ドメイン/wp → https://ドメイン/wp

 

wp-config.phpの設定

FTPで wp-config.php をダウンロードして以下のコードを書き加えてからアップロードします。
WordPress内で強制的にSSLモードで動作するようにします。( 初めて出てくる define(‘DB_NAME’,~ の行より上に設置してください )
※以下のコードの「nendeb.jp」の所は使ってるドメインに変えてください。

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

※これはさくらのレンタルサーバー独特の設定です。

これで、サイトは SSL(https://~)で表示するようになりました。
次はサイトが正常に表示されているかをチェックします。

 



 

サイトのチェック

Firefox や Chorome などで サイトを各ページ(テンプレート)で 確認します。(鍵マークのところ)
jsやCSSが外れてないか、とか混在コンテンツになっていないかのチェックです。
問い合わせフォームがある場合は、問い合わせテストも必ず行ってください。

テーマやウィジェット、プラグイン

サイト全体としてはテーマ側(テンプレートやCSS内)で設定している画像が 非SSL(http://~)な場合はそれぞれ修正していきます。
また、テキストウィジェット等で直接 画像(バナー等)を設置している場合もそれぞれ修正していきます。
もしかしたらプラグイン側で非SSL(http://~)なスクリプトや画像を読み込んでいるかも知れませんのてチェックしてください。

Choromeでは、Chromeのデベロッパーツールの Console で具体的にファイル名がわかりますので見つけるにはいいですよ。
Chromeのデベロッパーツール

 

投稿ページや固定ページの記事

SSL化する以前に 投稿記事に入れた画像( <img src=http://~ ) では Firefoxでしたら「このページの一部(画像など)は安全ではありません。」と警告が出てきます。
SSL警告画面

その場合は一括で(データベース内で)置換してくれるプラグインを使う方法もありますが、一度 以下のコードをmy-plugin.php に張り付けてみてください。

/*
 * $content内 の imgタグの画像URLを https に置換する
 *
 * License: GPLv2 or later
 */
function nendebcom_http2https_img_src( $content ){

	$site_ssl = site_url( '/', 'https' );
	$site_url = site_url( '/', 'http' );

	$content = str_replace( 'src="' . $site_url, 'src="' . $site_ssl, $content ); 
	$content = str_replace( "src='" . $site_url, "src='" . $site_ssl, $content ); 

	return $content;
}
add_filter( 'the_content', 'nendebcom_http2https_img_src', 99 );

 
出なくなりました。
SSL安全画面

 

また、テーマが Responsive Images に対応している場合は警告がでません。
デフォルトテーマでしたら「Twenty Sixteen」「Twenty Seventeen」が対応しています。
Responsive Images は 「srcset=…」で画像URLを追加していますがここは https://~ で出力されています。
「src=…」ではなく「srcset=…」の方を読んでいると思われます。

Responsive Images in WordPress 4.4
https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

どうせだったらテーマ側で「Responsive Images」にしてしまってもいいのかもしれません。

 

物件画像

不動産プラグインの物件画像は変更しなくても自動で https://~ で表示されます。
※不動産プラグインは最新版(ver1.7.9~)をお使いください。

デモ サンプル不動産
https://nendeb.jp/demo4/

 
 

.htaccessの設定

サイトチェックがOKでしたら、リダイレクトの設定をします。
サイトへ http://~で アクセスしてきたら https://~ にリダイレクトするようになるコードを追加します。

FTPで .htaccess をダウンロードして以下のコードを書き加えてからアップロードします。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://nendeb.jp/$1 [R=301,L]
</IfModule>

※上記コードの「https://nendeb.jp/」の所は使ってるドメインに変えてください。
※.htaccess内の「# BEGIN WordPress」行より上に設置してください
※.htaccessファイルが無い場合は一度、管理画面の設定->パーマリンク設定で 一度、「数字ベース」等に して保存してから、元に戻して保存するといいですよ。(.htaccessが作られいてます)

 

ついでに HSTS も設定する事も検討してください。
ブラウザ側で http→https に対応してもらう仕組みだそうです。
.htaccessに以下のコードを書き加えてください。

Header set Strict-Transport-Security "max-age=31536000;"

又は

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

※HSTS、includeSubDomains や preload にするには いろいろ必須な条件がありますので注意してください。
※サブドメインで別のサイトがある場合はサブドメインのサイトが表示できなくなる場合があります。

HTTP Strict Transport Security – Web セキュリティ | MDN
https://developer.mozilla.org/ja/docs/Web/Security/HTTP_Strict_Transport_Security

 
 

Google Search Consoleの設定

SSL化ができましたら、Google Search Console(Google ウェブマスター ツール) にも登録しましょう。既にサイト登録済みかと思いますが、https://~ も必要です。
サイトマップとか設定が必要です。
いちおう、https://ドメイン と https://www.ドメイン で登録しときましょう。

Google Search Console
https://www.google.com/webmasters/tools/home?hl=ja

 
 

あとがき

WordPressを長らくメンテナンス(コアやプラグインのバージョンアップ)していない場合は、そこからになります。
WordPressのメンテナンスをまめにされていても サーバー設定とかFTPとかコード追加とかとなりますので、詳しくない方は自分で作業しない方がいいかもしれません。
特にテーマ側を修正していくとなれば 素人さんでは無理かなと思います、web業者に頼んだ方がいいと思います。ょ
また、もし(SSL非対応の)ガラケー向けコンテンツがある場合は両立はできませんので「SSLにしない」という選択も必要かもです。

 
SSL化をするにあたっては、以前からやろうと思っていたのですが 面倒くささが勝っていたので なかなか実行できませんでした。
しかしSSL化できた時の安心感は結構あって、もっと早くやっとけばよかったと思う次第でありました。

 
サイトを 非SSL(http://~)~ から SSL(https://~) に変更するとSNSのシェアカウントも 0 になります。
不動産シェアボタンプラグイン」では httpの時のカウントも取得するように変更してテストしています。
(Google+ のカウントだけ、どうやら、たまにGoogle側でリセットされるようで取得できませんでした。)
現在テスト中で1月中頃にはバージョンアップして提供予定です。