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

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

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

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

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

当初の警告対象は、強く保護が必要な種類のページに限られていました。しかし、2018年7月にリリースされたChrome68からは、すべてのHTTP通信が警告の対象になりました。自サイトの閲覧者に「保護されていない」などという警告は見せたくありませんよね。今では無料でHTTPS化する方法もありますから、ぜひHTTPSでアクセスできるよう対策してみて下さい。本記事では、HTTPSとは何かという基礎から、SSL証明書を取得して自サイトにHTTPSでアクセス可能にする方法、常時SSL化の設定方法などを簡単にご紹介いたします。

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

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


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

HTTPSとは? HTTPとHTTPSの違い

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

データを暗号化せずに平文で通信するのがHTTP/データを暗号化して安全に通信するのがHTTPS

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

HTTPとHTTPSのどちらで通信しているのかは、ブラウザのアドレス欄で分かります。HTTPならURLの先頭が「http://」になっているか、または省略されています。HTTPSなら「https://」になっているほか、多くのブラウザでは錠前アイコンなどが表示されます。
 
上:HTTPで通信している場合/下:HTTPSで通信している場合

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


上図は、Chrome73での表示例です。HTTPで通信している場合には「http://」部分が省略された上で「保護されていない通信」という警告が表示されているのに対して、HTTPSで通信している場合には安全であることを示す錠前アイコンが付加されています。

 

HTTPS化していない場合の警告表示例

Chromeの場合、ログインフォームが存在するような特に安全が重要なウェブページでは、下図の下側のように警告が赤色で表示されます。
 
Chromeのアドレス欄に表示される「保護されていない通信」の警告が赤色になる例

Chromeのアドレス欄に表示される「保護されていない通信」の警告が赤色になる例


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

安全ではない通信の警告例


斜線の入った南京錠アイコンが表示されて、通信が安全ではないことを示しています。そのアイコンをクリックすると「この接続は安全ではありません」と警告が見えます。特に第三者に提供するサービスでこのように表示されると、ユーザを不安にさせてしまうでしょう。

入力フォームに直接表示される警告もある
Firefoxでは、ログインページなどの特に保護が必要だと考えられるページにHTTPでアクセスした場合は、入力欄にカーソルを入れたタイミングで下図のような警告文が入力欄そのものに連結されて表示される仕様になっています。
 
Firefoxでは、ログインページにHTTPで接続すると、入力欄に直接警告文が表示される

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


ウェブ上のサービスでこのような警告が表示されると、ユーザは利用をためらってしまうかもしれません。このような表示を避けるには、HTTPSで通信できるようにする必要があります。
 

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

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

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

SSL/TLSのバージョンの変遷 (TLSはSSLの後継規格であり、SSLとTLSの両方をまとめて「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証明書の発行は多くの認証局で有料ですが、この後でご紹介するLet's Encryptのように無料で発行している認証局もあります。

常時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とは

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

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


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

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

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

さくらインターネットでの無料SSL証明書の取得操作例
レンタルサーバのさくらインターネットでは、コントロールパネル内にある各ドメインの設定画面からSSL証明書の取得申請と設定ができます。「無料SSLの設定」ボタンから進めば、Let's Encryptによる無料SSL証明書の取得と設定ができます。
 
さくらインターネットで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証明書に関しては自動更新される仕様になっているところもあります。そのようなサービスを活用すると、うっかり失効させてしまうことがなくて安心でしょう。
 

HTTPでのアクセスをHTTPSにリダイレクトする常時SSL化の設定方法

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

HTTPをHTTPSにリダイレクトする.htaccessファイルの書き方
HTTPでアクセスされた場合にHTTPSでのURLへ自動転送させるには、.htaccessファイルに以下の3行を記述します。
 
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

1行目はRewriteモジュールを使うための記述です。2行目で「HTTPSではない」状態を判別し、3行目でHTTPSのURLに転送しています。自サイトで使っているドメイン名に関係なく、このままコピー&ペーストして使えます。最後の行末には改行が必要ですので忘れないで下さい。

※本記事では過去に、レンタルサーバのさくらインターネットでは独自の書き方が必要だと解説していました。しかし、現在ではサーバの仕様が変わっており、上記の書き方で問題なくリダイレクトできるようになっています(※参考)。

動作テストの段階なら302でリダイレクトさせても良い
上記のソースはHTTPステータスコードに301を返すことで転送する書き方です。動作テストをしたいだけの場合など、何らかの事情でSSL証明書を外す(=HTTPSからHTTPに戻す)可能性があるなら、301ではなく302で転送する方が良いでしょう。ブラウザは、一度301で転送されると転送条件を記憶するので、.htaccessから転送設定を削除した後でも転送先のURLにアクセスしてしまうからです。302で転送するには、ソース内の「R=301」の部分を「R=302」に書き換えます。

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

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

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

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

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

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


このような警告が表示されてしまう原因は、HTMLソース内で画像を読み込むためのimg要素を記述する際に、画像のURLを下記のように「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でも読み込めるようにsrc属性値を書く方法もあるが

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やアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。