HTTPSとは? SSLとは? 通信の暗号化と認証機能

危険だと言われないように

危険だと言われないように

世界で最も利用されているブラウザ「Chrome」の開発元であるGoogleが、「ウェブサイトをHTTPで閲覧した際には、通信が安全ではない旨の警告を表示する」という方針を発表して以後、たくさんのウェブサイトでHTTPS化が進んできました(※)。

保護されたウェブの普及を目指して(Googleウェブマスター向け公式ブログ)


 
従来の警告対象は、強く保護が必要な種類のページに限られていました。しかし、2018年7月にリリースされるChrome68からは、HTTPで通信しているだけで警告対象になります。自サイトの閲覧者に「安全ではない」などという警告は見せたくありませんよね。今のうちにHTTPSでアクセスできるよう対策しておきましょう。

本記事では、HTTPSとは何かという基礎から、SSL証明書を取得して自サイトにHTTPSでアクセス可能にする方法、常時SSL化の設定方法を簡単にご紹介いたします。

【本記事の目次】
SSLでHTTPS化する方法

SSL証明書を取得して、自サイトへHTTPSで通信できるようにする方法

基礎:
取得方法:
設定方法:

HTTPSとは? HTTPとHTTPSの違い

暗号化せずに通信するのがHTTP/暗号化して通信するのがHTTPS

暗号化せずに通信するのがHTTP/暗号化した状態でHTTP通信するのがHTTPS

HTTPとHTTPSの違いは、主に通信が暗号化されているかどうかです。HTTPSの「S」はSecure(セキュア)の意味で、SSLという仕組みによって暗号化された状態でHTTP通信が行われていることを示しています。

HTTPで通信しているのかHTTPSで通信しているのかは、例えば下図に示した箇所で分かります。HTTPで通信していれば、URLの先頭は http://~ になっています。HTTPSで通信していれば、URLの先頭は https://~ になっているほか、多くのブラウザではアドレス欄付近に錠前アイコンなどが表示されます。

上:HTTPで通信している場合/下:HTTPSで通信している場合

上:HTTPで通信している場合/下:HTTPSで通信している場合


上図は、Chrome67での表示例です。HTTPで通信している場合には特に何も表示されていないのに対して、HTTPSで通信している場合には錠前アイコンに加えて「保護された通信」との文字が表示されています。


 

HTTPS化した場合の表示、HTTPS化しない場合の表示

GoogleがHTTPS化を推奨する方針を公表して以後、Chrome以外でもHTTP通信時に何らかの警告を表示するブラウザが出てきました。下図は、ログインフォームの存在するウェブページにHTTPでアクセスした際の、ChromeとFirefoxでの表示例です。

安全ではない旨の警告 (上:Chrome67/下:Firefox61での表示例)

安全ではない旨の警告 (上:Chrome67/下:Firefox61での表示例)


上図の上側に掲載したChromeでは、黄色矢印で示したようにアイコンと文字を使って「保護されていません」と警告しています。上図の下側に掲載したFirefoxでは、緑色矢印で示したように斜線の入った南京錠アイコンで警告しており、そのアイコンをクリックすると「この接続は安全ではありません」と警告が見えます。

アドレス欄に表示される警告の種類
ブラウザのアドレス欄内に、通信が安全かどうかのサインが表示されるようになった

ブラウザのアドレス欄内に、通信が安全かどうかのサインがアイコンや文字で表示されるようになった

ブラウザとウェブサーバとの通信状況に応じて表示されるChromeの警告は、例えば図のようなアイコンや文字で構成されています。図は上から順に、以下の場合の表示例です。

  1. HTTPSで通信できている場合
  2. HTTPSで通信しようとしているが、できていない場合
  3. 保護が必要だと思われるページにHTTPで通信している場合
  4. その他のページにHTTPで通信している場合


 
これまでは、クレジットカード番号などの個人情報を入力するページやログインフォームのあるページなど、特に安全性が重要なページだけで上記3のように警告が表示され、それ以外のページでは4のように警告はありませんでした。しかし、少なくともChromeに関しては、Ver.68からはHTTPで通信しているだけで3のように警告されるようになります。

入力フォームに直接表示される警告
Firefoxを使ってHTTP通信している場合に、ログインページ(などの保護が必要だと思われるページ)の入力欄にカーソルを入れた際には、下図のような警告文が入力欄そのものに連結されて表示される仕様になっています。

Firefoxでは、ログインページにHTTPで接続すると、入力欄に直接警告文が表示される

Firefoxでは、ログインページにHTTPで接続すると、入力欄に直接警告文が表示される


ウェブ上の何らかのサービスでこのような警告が表示されると、第三者は入力をためらうかもしれません。このような表示を避けるには、HTTPSで通信できるようにしておく必要があります。


 

HTTPS化に必要なSSL証明書とは

ブラウザとウェブサイトとの間の通信を安全にすることは「HTTPS化」や「SSL化」などと表現されます。HTTPSとは、SSLという仕組み(後述)を使って暗号化されたHTTP通信のことですから、「HTTPS化」も「SSL化」もどちらも同じ意味を指しています。次に、SSLについて簡単に紹介いたします。

SSLとは :暗号化や認証の仕組み
SSL/TLSバージョンの変遷

SSL/TLSバージョンの変遷 (TLSはSSLの後継規格であり、両方まとめてSSLと呼ばれることもある)

SSLとは、通信を暗号化したり通信相手を認証したりする仕組み(プロトコル)の名称で、Secure Sockets Layerの略です。ブラウザとウェブサイト間の通信を安全にする目的では、現在ではSSLの後継規格であるTLS(Transport Layer Security)が使われていますが、それも含めてSSLと呼ばれています。

そのため、安全に通信できるようにするという意味での「SSL化」は「TLS化」や「SSL/TLS化」と表記されることもあります。SSLとTLSを厳密に分けるような文脈以外では、どれも同じ意味だと考えて差し支えないでしょう。


 
SSL証明書とは :暗号化や認証に必要な情報
SSL証明書の中身は、ブラウザの錠前アイコンをクリックするなどすれば表示できる

SSL証明書の中身は、ブラウザの錠前アイコンをクリックするなどすれば表示できる

通信を暗号化しても、誰でも復号化(解読)できたら意味がありません。そのため、暗号化には固有の鍵が必要です。その情報を示すのがSSL証明書です。ここには、対象ドメイン、その所有者、証明書の発行機関の情報なども含まれています。それらを参照することで、なりすましを防いで安全に通信できる仕組みになっています。

このSSL証明書があるウェブサイトに対して https://~ のURLでアクセスすれば、SSLを使った安全な通信ができます。SSL証明書のないウェブサイトに対してURLの先頭を https://~ にしてアクセスしても、ブラウザはエラー画面を表示するだけです。

認証局とは :電子証明書の発行機関
SSL証明書を発行する機関のことを認証局と呼びます。SSL証明書を取得するには、どこかの認証局に申請して発行してもらう必要があります。レンタルサーバによっては、コントロールパネル上から簡単な操作をするだけで取得手続きが完了する仕組みを用意しています。SSL証明書の発行は多くの認証局で有料ですが、無料で発行している認証局もあります(後述)。

常時SSL化とは :常にHTTPSで通信されるようにする
HTTPで通信するかHTTPSで通信するかは、URLの先頭(プロトコル名)部分を http://~ とするか https://~ とするかで決まります。どちらでもアクセス可能な状態だと、https://~ でアクセスしているときにしか通信は安全になりません。ページによってHTTPだったりHTTPSだったりするのを避け、どのページでも常にHTTPSで通信するよう設定しておくことを「常時SSL化」と呼んでいます。

つまり、自サイトへ常にHTTPSで通信できるようにするためには、どこかの認証局からSSL証明書を取得し、HTTPで通信が試みられた場合でも常にHTTPSで通信させるための設定が必要です。それらの方法を、以下に解説します。



 

SSL証明書の種類(3つの認証レベル)と取得条件

HTTPSで通信するために必要なSSL証明書には、以下に示す3種類の認証レベルがあります。どの認証レベルでも、通信が暗号化される点は同じです。

認証レベル1(ドメイン認証)
個人でも取得可能なSSL証明書です。ドメイン名の所有権を確認して発行される証明書で、ほぼ通信を暗号化するためだけに使うようなものです。

認証レベル2(企業認証)
ドメイン名の所有権だけでなく、運営企業・組織の実在(登記情報)も確認して発行されるSSL証明書です。法人でないと取得できません。ウェブサイトにこの認証レベルのSSL証明書が使われていれば、実在する企業・組織によって運営されているウェブサイトだと判断できます。

認証レベル3(EV認証)
書類上の確認だけでなく、その他の方法でも運営企業・組織の実在を確認して発行されるSSL証明書です(※EVはExtended Validationの略)。このSSL証明書を使っているウェブサイトでは、下図のようにアドレス欄の端に運営企業名が表示されます。今アクセスしているウェブサイトが「本当に自分の望んでいる企業が運営しているウェブサイトなのか?」という点を確認しやすく、最も信頼度の高いSSL証明書です。

EV認証だと、ウェブサイトを運営している企業名がアドレス欄の端に表示される (りそな銀行の例)

EV認証だと、ウェブサイトを運営している企業名がアドレス欄の端に表示される (りそな銀行の例)


どの認証レベルのSSL証明書を取得するか
個人ならドメイン認証しか取得できませんから選択肢は1つだけです。認証レベルが高くなるにつれ、取得費用も高くなります。企業サイトでも、物販などで個人情報(クレジットカード情報など)を集めるようなサイトなど、強く身元を明らかにしておかないと信頼が得られないようなサイトでない限りは、ドメイン認証でも充分でしょう。


 

無料でSSL証明書を取得できるLet's Encryptとは

無料でSSL証明書を発行する認証局Let's Encrypt

無料でSSL証明書を発行する認証局Let's Encrypt

Let's Encryptは、電子フロンティア財団やMozillaなどによって設立された非営利団体が運営している認証局です。取り扱っているSSL証明書は認証レベル1(ドメイン認証)だけですが、無料で発行しています。費用を掛けずにSSL化ができるため、特に個人運営のウェブサイトにとってはありがたいでしょう。

レンタルサーバによっては、このLet's Encryptによる無料のSSL証明書を簡単に取得して使用できる機能を用意している場合もあります。もしSSL化に費用をかけたくないなら、このLet's Encryptによる無料のSSL証明書を利用してみて下さい。


 

SSL証明書を取得してHTTPS化するには

お使いのレンタルサーバで提供されているコントロールパネル内などにSSL証明書を取得する機能があるなら、それを使うのが簡単です。下記に2例ほど紹介しておきます。

レンタルサーバのさくらインターネットでは、コントロールパネル内にある各ドメインの設定画面からSSL証明書の取得申請と設定ができます。「無料SSLの設定」ボタンから進めば、Let's Encryptによる無料SSL証明書の取得と設定ができます。

さくらインターネットでSSL証明書を取得したり設定したりできるコントロールパネルの表示例

さくらインターネットでSSL証明書を取得したり設定したりできるコントロールパネルの表示例


レンタルサーバのロリポップでは、コントロールパネル左側にあるメニューの「セキュリティ」→「独自SSL証明書導入」からSSL証明書の取得申請と設定ができます。「独自SSL(無料)」の表示部分からドメインを選択することで、Let's Encryptによる無料SSL証明書の取得と設定ができます。

ロリポップでSSL証明書を取得したり設定したりできるコントロールパネルの表示例

ロリポップでSSL証明書を取得したり設定したりできるコントロールパネルの表示例


上記のように操作方法はレンタルサーバ会社によって様々ですから、具体的な操作方法は各サーバのヘルプなどをご参照下さい。

SSL証明書には有効期限がある
SSL証明書には有効期限があり、更新作業をしなければ失効してしまいます。SSL証明書の期限が切れていると、ブラウザは下図のように警告だけを表示してウェブページそのものは表示しません。SSL証明書を取得した後は、失効させないよう気をつける必要があります。

有効期限が切れて失効したSSL証明書を使ったウェブサイトは、警告が表示されて閲覧できない (Edgeでの表示例)

有効期限が切れて失効したSSL証明書を使ったウェブサイトは、警告が表示されて閲覧できない (Edgeでの表示例)


Let's Encryptによる無料のSSL証明書をコントロールパネル上で簡単に設定できるようにしているレンタルサーバでは、Let's Encryptによって発行されたSSL証明書に関しては自動更新される仕様になっているところもあります。そのようなサービスを活用すると、うっかり失効させてしまうことがなくて安心でしょう。



 

常時SSL化(=HTTPでのアクセスをHTTPSにリダイレクト)するための .htaccessファイルの書き方

SSL証明書を取得して実際にHTTPSでアクセスできることを確認できたら、常にHTTPSでアクセスされるようウェブサーバを設定しておきましょう。そうすれば、HTTPでリンクされていたりブックマークされていたりする場合でも、HTTPSでのアクセスに統一できます。また、Googleなどの検索結果でも https://~ で始まるURLの方が表示されるようになります。

HTTPでのアクセスをHTTPSでのアクセスに転送(リダイレクト)する方法
自サイトのドメインが www.example.com のとき、HTTPでのすべてのアクセスをHTTPSでのURL( https://www.example.com/~ )へ転送するには、.htaccessファイルに以下の5行を記述します。
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]
</IfModule>
3行目で「HTTPSではない」状態を判別し、4行目でHTTPSのURLに転送しています。1・2・5行目は、Rewriteモジュールを使うための記述なので、このままコピー&ペーストして下さい。最後の行末には改行が必要ですので忘れないで下さい。

なお、一般的な記述は上記の通りですが、レンタルサーバによっては少々異なる記述が必要な場合もあります。例えば、さくらインターネットでは以下のように書く必要があります(※参考)。
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>
1行目と4行目で「HTTPSではない」状態を判別し、5行目でHTTPSのURLに転送しています。それ以外は先程と同じです。

上記のソースはどちらも、HTTPステータスコードに301を返すことで転送する方法です。もし、テスト段階であるなど何らかの事情でSSL証明書を外す(=HTTPSからHTTPに戻す)可能性があるなら、301ではなく302で転送しておく方が良いでしょう。301で転送するとブラウザがキャッシュするので、たとえ.htaccessファイルから転送設定を削除したとしても、ブラウザ側が最初から移転先URLにアクセスしてしまうからです。なお、301ではなく302で転送したい場合は、「R=301」の部分を「R=302」に書き換えて下さい。

meta要素にもURLを書いているなら、https://で始まるURLに変えておく
HTMLソース内にmeta要素を使って rel="canonical" の記述を加えているなら、そこもhttps://で始まるURLに変えておきましょう。
<link rel="canonical" href="https://www.example.com/">
このように記述しておくと、HTTPとHTTPSのどちらでもアクセス可能な状態にしていたとしても、Googleなどの検索結果に表示されるURLはHTTPS側のURLになります。

また、SNS向けにOGPを記述している場合は、そこに含まれるURLも同様に書き換えておきましょう。
<meta property="og:url" content="https://www.example.com/">
このように記述すれば、FacebookやTwitterなどのSNSで言及された際にも、HTTPS側のURLが表示されるようになります。

HTTPSでアクセスしているのに警告が表示される場合の対処方法

ウェブサイトをHTTPSでアクセスできるようにするためには、単にHTMLがHTTPSで読み込めるだけでは不十分です。HTMLソースの中から参照しているオブジェクト(画像、CSS、JavaScriptファイルなど)も同様にHTTPSで読み込めなければなりません。もし、それらのファイルをHTTPで読み込んでいる場合には、警告が表示されたり読み込めなかったりします。

画像の場合は、読み込みはできるが警告も表示される
ウェブページにHTTPSでアクセスできていても、そのページ内部で読み込まれている画像がHTTPで読み込まれていると、下図のように「一部は安全ではない」旨の警告が表示されます。
HTTPSで通信できているものの、一部の画像などがHTTPで読み込まれている場合の警告例

HTTPSで通信できているものの、一部の画像などがHTTPで読み込まれている場合の警告例


これは、HTMLソース内で画像を読み込む際に、下記のようにhttp://から書き始めていることが原因です。
<img src="http://example.com/images/photo.jpg" ...>
したがって、https://~に書き換えるか、「/」で始まる絶対パスなどに書き換えましょう。
<img src="https://example.com/images/photo.jpg" ...>
 または
<img src="/images/photo.jpg" ...>


 
CSSやスクリプトの場合は、読み込まれない
ウェブページがHTTPSでアクセスされているとき、そのページ内部で読み込まれているCSSファイルやJavaScriptファイルがHTTPで読み込まれるように記述されている場合、それらのファイルは読み込まれません。その結果、ページの表示がおかしくなる可能性があります。

HTTPSで通信している際にHTTPでスクリプトを読み込もうとしても、デフォルトでは読み込まれない

HTTPSで通信している際にHTTPでスクリプトを読み込もうとしても、デフォルトでは読み込まれない


上図のように、閲覧者がブラウザの設定を操作すれば、ブロックされているファイル(=HTTPで読み込むよう記述されたCSSやJavaScriptファイル)を読み込むことはできます。しかし、このように操作してくれるユーザはあまり居ないでしょうから、事前に対処しておきましょう。

これも、CSSやJavaScriptを読み込む際に、http://から記述している点が原因です。
<script src="http://example.com/common/abc.js"></script>
https://~に書き換えるか、「/」で始まる絶対パスなどに書き換えましょう。
<script src="https://example.com/common/abc.js"></script>
 または
<script src="/common/abc.js"></script>

外部サイトで提供されているスクリプトを読み込む際に、スクリプトのURLをhttp://から書いている場合が多々あるので注意して下さい。その場合は、提供元にアクセスして最新のURLを調べて書き換えましょう。もし、そういった情報がないなら、試しにhttps://に書き換えてみて、読み込めるかどうかを確認して下さい。相手のサーバがHTTPSに非対応なら、残念ながら読み込みは諦めるしかありません。


 
ウェブページ内で読み込むオブジェクトの参照方法
HTTPでもHTTPSでもアクセス可能にしたい場合は、「//」で始まるURLを使って読み込む方法もあります。例えば以下のような感じで記述します。
<script src="//example.com/common/abc.js"></script>
この場合は、そのページがHTTPでアクセスされているならHTTPで読み込まれ、HTTPSでアクセスされているならHTTPSで読み込まれます。

ただ、HTTPSページ内からHTTPで何かを読み込むのはダメでも、その逆のHTTPページ内からHTTPSで何かを読むのは問題ありません。したがって、単に全部をhttps://から書いておくのが簡単で良いでしょう。

とはいえ、望ましいのは「/」記号で始まる絶対パスで書いておくことです。これならプロトコルに影響されずに読み込めますし、移転などでURLが変わった際でも書き換える必要がありません。なお、相対パスで書いておけば、ローカルで表示確認したい場合でも読み込めるメリットがあります。

SSL証明書を取得してHTTPS化する設定方法

今回は、SSL証明書を取得してウェブサイトをHTTPSでアクセスできるようにする方法を簡単にご紹介いたしました。自サイトが「安全ではない」と表示されてしまわないように、ぜひ早めに対処してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。