常時SSL化は、まだ間に合う!(さくらインターネットでの設定例)

レンタルサーバーを借りて独自ドメインで運用している皆さんは「常時SSL化」を既に済ませましたでしょうか。Chrome68がリリースされる前にぜひとも済ませておきましょう。

そもそも「SSL化」って何?

ざっくり言えば「インターネットの無防備な通信状態のセキュリティを高めてくれる」もの。
例えば、SSL化されていないお問い合わせフォームからメールを送った場合、その入力内容が外部に漏れる可能性が出てくるというものです。
SSL化されていれば、通信内容を暗号化してくれるので安心度が上がります。

ウェブサイトの運営に欠かせないSSL。「SSLって何?」「SSLの役割」「SSLのメリットと効果」「SSLの種類」など、わかりやすくマンガで解説いたします。

現在でも、個人情報を扱うページ等はたいてい、SSL化されていると思います。
(逆に「https」ではないURLでクレジットカード番号などは絶対に入力しないように!)

SSL化しているかどうかはURLの最初を見れば分かりますし、現時点で例えばChromeの場合だと「 保護された通信」と表示され、URLは「https」から始まります。

▲メールアドレスや電話番号などの個人情報を入力するページはSSL化されてることが多い

当サイトは常時SSL化に対応済みなのでトップページも「https://」です!

ただし、現時点では「お問い合わせフォームやショッピングカート、予約、会員ログイン後のページだけSSL化しているけど、入力を要求しない普通のページはそのままだよ」ってサイトが圧倒的に多いかと思います。つまり部分的なSSL化だけされている状態です。

で、Chrome68がどうしたの?

Chrome67までは、入力フォームがないページに対しては「http://」から始まるページだろうとも、警告メッセージが表示されずに済みます。

ところが、Chrome68からは「http://」で始まるページは全て警告表示されます!

つまり入力フォームがあろうがなかろうが、トップページだろうが、全てが対象となります。
出典 Chromium Blog: A secure web is here to stay(公式アナウンス)

HTTPS接続をデフォルトと見なして「保護された通信」の文字を外す一方、HTTP接続に対しては赤いアイコンと文字で警告する。

ITmedia等でも取り上げられているので、ご存知の方もいらっしゃるかと思います。

なお、Chrome67でも、入力フォーム(パスワード入力やメールアドレスの入力など)が存在している場合には、httpだと警告表示されます。

ちなみに、Firefoxでも同様の警告がアドレス欄に表示されます。
なお、ここの「保護されていません」をクリックすると、例えばChromeの場合は

赤文字で「このサイトへの接続は保護されていません」と警告メッセージが出ます。
「そこをクリックしなければ、黒テキストで『保護されていません』と出ているだけでしょ。地味だし、目立たないから気にしなくていいんじゃない?」と思う方もいるかもしれません。

が。今年10月のChrome70からは「http://」というだけで「 保護されていません」と赤いテキストでURL横に表示されるそう! さすがにこれは目立つ。
一般の閲覧者なら、もうそれだけで、そのサイトを閲覧してくれなくなるかもしれません。

大手サイトでさえもトップページは「http://」のままというところが意外と多いのです。
レンタルブログやショッピングカート等については既にSSL化が済んでいるところも多いとは思いますが、レンタルサーバーを借りて自分でサイトを公開している人は、自分でSSL対応をせねばなりません。

ここでは「さくらインターネット」利用のユーザー向け【常時SSL化】情報を共有してみたいと思います。

さくらインターネットで常時SSL化する方法

お値段も手頃で使いやすい老舗レンタルサーバー「さくらインターネット」は愛用者も多いと思います。私もその一人です。

「さくらインターネット」では結構、早くから常時SSL化について情報を流していました。
私のように先送りにしていた人もいるとは思いますが…
そこまで難しい手続きは必要なく、また、無料でSSL化できますのでやってみましょう。

一般サイト/WordPress共通で必要な手続き

本家「さくらインターネット」のヘルプに、丁寧な解説が掲載されています。
これに沿って作業していけばそれでOKなのですが、それだとこのページが終わってしまうので実際に手続きする様子をあわせて紹介していきます。

対象サービス・プラン   さくらのレンタルサーバで無料SSLを導入する手順をご紹介します。 本ページでは新規にSSLを設定される方を対象にしております。すでにラピッドSSL等の有料SSLを利用していて無料SSLへ乗り換えをされる方は【無料SSL】ラピッドSSLなどの有料SSLからの乗り換え方法をご覧ください。  ...

なお、私の場合は下記のような環境になっています。
コスパが良いので、この組み合わせで利用している人も多い気がします。

SSL化した主な対象は、一般ページだけで構築している親サイト+WordPressの子サイト。
(もう1つWordPressサイトがありますが、手順は同じなので割愛)

  • lilish.com
  • note.lilish.com

さて、進めていきましょう!

1.サーバコントロールパネルにログイン

参考 さくらのレンタルサーバ「サーバコントロールパネル」

ドメイン名とパスワードを入れてログイン。ここまでは慣れたものだと思います。

なお、せっかくだから新コンパネ(β)でキャプチャして…と思ったら「ドメイン/SSL設定」で「取得エラー Internal Error」が出て進めなかった悔しさ。
また後日トライしてみたいと思います…

2.「ドメイン/SSL設定」で無料SSL証明書の申請

まずは左メニューの下の方にある「ドメイン/SSL設定」をクリックしてください。

次に、SSL化したいドメインのSSL証明書を申請するため「登録」をクリックします。

すると「SSLサーバ証明書概要」に進みます。
数種類の証明書がありますが、私は無料証明書の「Let’s Encrypt」を利用します。

【プレスリリース】さくらインターネットの「さくらのレンタルサーバ」、コントロールパネル上の簡単操作で無料SSL証明書「Let’s Encrypt」を設定可能に | さくらインターネット

ここでは『無料SSLの設定へ進む』をクリックします。

さらに『無料SSLを設定する』をクリックすれば、申請の手続きが完了します。
すぐに反映されるわけではないので数十分~数時間ほど待ちましょう。
設定完了後にはメールでお知らせが届きます。

法人やショップサイトの場合は、より信頼度の高い有料の証明書がおすすめ!

有名どころとしてはラピッドSSLやジオトラスト、SecureCoreあたりでしょうか。
料金を比較検討できるサイトから申し込むのがお勧めです。
参考 さくらインターネット (さくらのSSL)
参考 SSLボックス

3.メールの確認

少し待つと「[さくらインターネット]SSLサーバ証明書発行のお知らせ」が届きます。

4.SSLが適用されているか確認

メール本文にあるように、SSLが利用可能な状態になっています!
試しに、適用したドメインサイトに「https://~」でアクセスしてみましょう。
成功しましたでしょうか。おめでとうございます!

ここで、埋め込んだGoogleマップやYouTube動画が非表示に…ということが発生する場合があります。この対策も後述しますね。

ただし、このままだと「http」と「https」の、どちらでもアクセス出来てしまいます。

つまり…まだ常時SSL化は出来てない状態です。

そのサイトを「http」でブックマークしていたユーザーがアクセスをしてきた場合、せっかくSSL化していても「保護されていません」の警告表示が出ることに…

そこで「http→https」のリダイレクト設定をしましょう。
これも本家ヘルプで丁寧な説明があります。一般サイトとWordPressで対応が変わります。

一般サイトの場合

対象サービス・プラン   *************************************************** .htaccessを配置することで、ウェブアクセスに関わる設定を行なう事ができます。 *************************************************...

ヘルプの「WordPressを利用せずサイトを作成/公開されている場合 ~SNI SSLを利用~」に相当しますので、こちらを参考に .htaccess ファイルを用意しましょう。
※既に存在する場合がありますので、必ず先に「.htaccess」がないか確認してください。

▼2018年7月1日段階でのコード(必ず公式で最新の情報を確認してください)

SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !on
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

既存の.htaccessがある場合は一番最後の方にでもコピペしておけばOKです。
最後に空白行(※改行だけの行)を1つ入れるのをお忘れなく!

WordPressの場合

WordPressの場合、常時SSLを有効にするプラグインを利用します。

対象サービス・プラン さくらのレンタルサーバ、さくらのマネージドサーバ上で稼働するWordPress(ワードプレス)にて、常時SSLを有効にするプラグインを利用する方法について記載しています。 前提条件 設定手順 -----------------------------------------------...

クイックインストールした場合は既にプラグイン自体は入っているものの、無効になっていると思いますので『有効』に切り替えればOKです。

インストール済みプラグインの中に『SAKURA RS WP SSL』が見当たらない場合、自力でインストールすればOK!

WordPressの管理画面で「プラグイン」-「新規追加」にアクセスして
『さくらのレンタルサーバ 簡単SSL化プラグイン』
とキーワード検索すれば出てきますので、インストール→有効化です。

インストール後は「設定」-「SAKURA RS SSL」から設定画面へ移動。
あとはヘルプの説明にそってチェックを入れれば完了!

常時SSL化、完了!

あとは「http」でアクセスしようが、自動的に「https」へ瞬時にリダイレクト転送されるので安心してChrome68を迎えられます。

なお、現在は入力フォームが存在&SSL化しているページの場合に『保護された通信』と表示されますが、ゆくゆくは「保護されていて当たり前」ということで下記のように、いちいち保護されているとは表示されなくなるようです。

代わりに、保護されていない(常時SSL化していない)ページは赤いテキストで目立つように「保護されていない」と強調されるように…

なるべく早めに対応しておくと良いと思います!

埋め込んだGoogleマップや動画が表示されない?

「https」にしたら表示されなくなった!
…という場合ですが、その時はhtmlソースを覗いてみてください。
その、埋め込んであるGoogleマップや動画のURLが「http」から始まってないでしょうか?

「http」と「https」が混在しているのはNGなのです。
参考 favicon混在コンテンツ – Security | MDN

ということで「http」から始まっているリンクURLは「https」に差し替えましょう。
そのリンク元がSSL化を済ませている場合には、問題なく表示されるはずです。

リンクURLを「https」にしたらデッドリンクだった場合。
そのサービスは利用を諦めて、別の代替サービスを利用した方が良いと思います。

jQueryやAmazonアソシエイトのiframeも注意!

昔にコピペしたり生成したリンクは「http」のままになっている可能性があります。
jQueryもCDNで利用している場合、

http://ajax.googleapis.com/ajax/libs/jquery/(バージョン)/jquery.min.js

↓「s」をつけてSSL化されたものを読み込む

https://ajax.googleapis.com/ajax/libs/jquery/(バージョン)/jquery.min.js

あとは外部から読み込むCSSファイルのURLなんかもチェックしてみてください。

なお、単なる外部リンク(埋め込みで使用するための外部ソースではない)の場合は、特に気にしなくても良さそうです。
SSL化したページの表示自体に影響を及ぼすリンクでなければ問題ないかと思います。

外部サイトのバナー直リンクも注意!

その img タグに使ったリンクURLが「http」ならば混在コンテンツとなりますので注意。

まとめ

常時SSL化するための設定そのものよりも、混在コンテンツの確認をする方が手間かも。
Chrome68のリリースは7月下旬らしいのでそれまでにチェックを済ませたいですね。
…うちも混在コンテンツの確認はざっくりなので、再確認したいと思います。