ホームページをSSL対応するための流れを一気に解説!あなたのホームページもSSL化しよう。


最近はホームページにSSLを導入しようと思っている人はたくさんいると思います。
特にGoogleの検索結果に影響すると言う発表があってから、SSLが標準化してきては多くのホームページがどんどんSSL化してきています。
GoogleのサービスであるSearchConsoleを使っている人は、メッセージでSSL化を促されている人もいるかもしれません。
GoogleのChromeブラウザでは、アドレスバー上に「保護されていない通信」という表記がされるため、ユーザーからの信頼にも影響するのでいち早くSSL化したいですね。
img
SSLの標準化の流れはGoogleの先導によるところが多いです。
利用ブラウザとしてもどんどんシェアを伸ばしています。
img
https://yaruzou.net/browser-shareより

今回はSSLの実際にSSLに対応する時の流れについて説明します。
個別で書いていくとかなり長くなりそうなのと、技術的なことが入ると概要をつかむには難しくなってしまいそうなので、とりあえずは最低限知っておきたいアウトラインを説明します。
これ知っておくだけでも、制作会社にお願いしやすいと思います。
SSL化って実際こうやってやるんだなっていうのを、ざっくりと知っておきましょう。

サーバーでドメインをSSL設定する

SSL化をするためには、第三者機関にSSLの証明書を発行してもらい、それをドメインに紐づけて行います。
これまでは、証明書の発行機関とサーバー間でいくつかの情報をやり取りしながら、SSL化を進めて結構面倒くさいものでした。
証明書の発行にもお金がかかるし、本当にSSL化が必要な一部ホームページでしか導入されてきませんでした。

ですが、はじめに述べたようにGoogleの検索順位やブラウザ上での表記に対応するために、SSL自体が一般的になってきて、サーバー側でもSSL化を安くて簡単にできるということが差別化になりました。
サーバーもお客さんをたくさんつくるには、ユーザの需要を満たしていかないといけません。
同じようなタイミングで無料のSSL証明書と言うものも出てきたため、今ではサーバー上でボタン一つで無料でSSLにできるという、SSL対応自体は非常に簡単になっています。
今では、差別化どころか簡単にSSL化できるのが当たり前のようになってきましたけどね。
SSLの認証にはレベルがあって、サーバーで無料で提供されているようなものはドメイン認証型といわれるもっとも下位のレベルのものです。
認証のレベルについては、
SSL証明書の3つの型「ドメイン認証型(DV)」「実在証明型(OV)」「EV認証」を知っておこう。
をどうぞ。
一般のホームページはドメイン認証型で十分です。

サーバーのSSLの設定は、サーバーごとにそれぞれやり方が違うので各サーバー会社のヘルプなどを見てください。
基本は先ほども書いたように、誘導に従ってボタンを何回か押すだけで簡単にSSL対応のドメインとなります。

SSLを設定作業の後、しばらくするとSSLは有効になります。これまでhttpでアクセスしていたアドレスの先頭を、「https」とするだけでSSL化されたアドレスにアクセスできるようになります。
実際にアドレスバーのアドレスの先頭を「https://」としてみてください、同じようにホームページが表示されるはずです。
img
SSLが有効になっているかどうかと言う意味では、アドレスを「https://」にして、正常にホームページが表示されていれば設定完了です。
どうですか超簡単ですね。

アドレスバーを鍵マークに

サーバーでのSSLの設定自体はそんなに難しいものではありません。
ただそれだけで完全にSSL化するとは限りません。
「https」でアクセスができるようになっても、そのページ自体がSSLに準じた作りになっていなければ警告が表示されます。
通常、SSL化に対応したページでは、アドレスバーが鍵マークとなります。
img
エラーのあるページでは、アドレスバーに「!」が表示されます。
またそういった場合にはSearchConsoleでも警告がされますので、そういった場合には今から述べるようなことをやってみましょう。
img
SSLに対応したページというのは、原則としてそのページ内の全ての通信をSSLによるものにしなければいけません。
例えば、ページ自体はSSL化していても、SSL化していないデータを呼び出そうとしている部分があれば、そこがセキュリティ上の穴となるので認められません。
もう少し具体的に言えば、ヘッダ内のメタ情報の部分として書かれる、CSSやJavascriptなどの外部ファイルの読み込みです。
また、IMGタグでの画像の読み込みもSSL化していないアドレスの画像を読み込むとエラーとなります。
一般的なホームページでは、気を付けるのはこの2点でしょうかね。
これに限らず、外部のファイルを参照する場合などは全て関係してきますが、一般的にはこの部分が原因のことが多いでしょう。

実際に鍵マークになっていないソースコードっていうのはどういうものかっていうの見てみると
img
このように、「http://」で始まる参照が入っていたりします。
あくまで一つの例なのですが、セキュアではないHTTPのページへの参照があるということは、参照元のこのページもセキュアとは言えません。
例えば、この参照先がJavascriptだったりすると、セキュアでないHTTPSでないアドレスのJavascriptが動くということになるので、安全ではないということです。

少し話が知識的なものになりますが、リンク先のURLの指定方法には2つあって、相対パス絶対パスというものがあります。
今いるアドレスを基準として、相対的なアドレスの指定する「相対パス」(例えば、「../policy/index.html」などと書く)と、
今いる場所に関係なく、絶対的なアドレス(具体的にはhttp::などで始まるフルパス)のことを「絶対パス」という。

相対パスと言うのは自分のいるアドレスを基準にパスなので、今のページがSSL化されれば、相対的なパスも同じSSL化されたページとなります。
一方、絶対パスに関しては「http:」などで始まるパスなので、今のページがSSL化されていようと、指定されているhttp:のアドレスを参照したままです。
問題はこのような絶対パスで指定されたコードが書かれている場合で、絶対パスで指定されているURLを修正しないといけません。
img
この例でNGとなるのは、赤い枠で囲ったように「http:」から始まる絶対パスで指定された部分です。

一般的に相対パスを中心に書かれているホームページというのは比較的修正箇所は少ないかと思います。
初心者の方が作ったような絶対パスを多用して作られたページなんかは、修正するのに手間がかかるかもしれませんね。

その他の事例では例えばワードプレスとかを使っている場合、はシステムの関係もありますのでそう簡単ではなかったりします。
システムを使っている場合は単純にソースコードのアドレスを書き換えると言うことではなく、多くの場合はプラグインでできるのだと思いますが、実際にはデータベースの中身自体を書き換えたりとか結構厄介なんですね。
その辺はまた後日かける範囲で開きたいと思います。

SSL化されたページにリダイレクトする

アドレス欄の表記が鍵マークになって正常にSSL化が終わりました。
じゃあ、これで完了かというとそうではなくて、相変わらずGoogleなどの検索ではSSL化されていないアドレスで引っかかるんです。
SSL化ってアドレスが「https:」になったというわけではなくて、「https:」でもアクセスができるようになったということなんです。
なので、これまで通り「http:」でアクセスはできるし、Google検索などもこれまでと同じく「http:」をしばらくの間は検索結果で表示します。
また、名刺やチラシなどにURLを書いて告知している人もいると思います、せっかくSSL化をしたのですが、このままではSSL化したページにはアクセスしてもらえません。

なので、SSL化ができれば必ずhttpからhttpsのアドレスへ自動的な転送するようにしておきましょう。
これを「リダイレクトさせる」と言ったりします。
ここはちょっと専門的で、一般的には.htaccessというファイルを作って設定をします。
サーバーによって設定の方法が多少変わる可能性もありますので、詳しいことは調べてもらうのがよいのですが、
細かいことは抜きにして、.htaccessというファイルに以下の内容を追記してアップするだけでリダイレクトが行えます。
img
こんな風にサーバーにアップします。
中身はこんな感じ、URLの部分だけ変更してそのまま使えます。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

「https://example.com/」の部分を自分のサイトのアドレスに変更してください。
「http://example.com/」以下のアドレスにアクセスすると、自動的に「https://example.com/」へ転送してくれます。
たいていはこれでうまくいくでしょう。
きちんとリダイレクトかけておけば、これまでと同じようにアクセスをするだけで自動的に適正なhttpsのSSL化されたアドレスに誘導されます。

解析ツールなど周辺の設定も忘れずに

結構忘れがちなのがGoogleAnalyticsやSearchConsoleなどの解析系です。
http:からhttps:にアドレスが変わるのできちんと再設定をしておかなければいけません。

Googleのアナリティックスの場合はプロパティー上から「https:」に変更するだけ。
img

SearchConsoleはアドレスが変わった場合は改めて新アドレスを登録する必要があります、。
img

これらを忘れちゃうとアドレスが変わってしまって正確にデータを蓄積することができませんので運用上データを活用できなくなります。
気をつけてくださいね。

大雑把ですがここまでがSSL化するための流れです。
いきなり細かいこと話なかなかわからないのですが、まずはこういった大きな流れだけでもつかんでおくと話もしやすくなりますよね。
制作会社などに依頼する場合にも、こういったことを知っているのと知っていないのでは依頼のしやすさが違います。

SSL化はどんどん進んでいます。
できる限り早くSSL化をしていきましょう。