Webデザイナーなら知っておくべき サーバ知識相談室

第3回 SSL証明書ビギナー歓迎! httpsから始まるURLの役割と仕組みを0から学ぼう

この記事を読むのに必要な時間:およそ 8.5 分

昨年12月に話題になっていた,次のニュースを覚えていますか?

要約すると,ハローワークのサイトをFirefoxで開くと「接続の安全性が確認できない」という警告画面が出て,サイトが表示されない事態になっていたというニュースです。さてここで「うわー,ハローワークいけてないな」と思われた方に質問です。このニュースが言っていることがきちんと分かりましたか?

「ハローワークが何かやらかしたようだ」ということは分かると思います。そして、ニュース内で「証明書」という単語が何回か出てくるため,もしかしたらSSL証明書がらみで何か失敗したのかな?ということくらいは推察できます。

でも何をやらかしたのでしょうか。そして何をどうしたら,ハローワークのサイトはまたきちんと見られるようになるのでしょう? また,皆さんが制作しているWebサイトで,同じことは絶対に起きないのでしょうか。万が一,こんなことが起きたらどうしたらいいのでしょうか。

立て続けに疑問点を出してしまいましたが,SSL証明書絡みのことはとにかく分かりにくく,苦手意識を持っている方も多いかもしれません。しかし安心してください。SSL証明書のことが分からないのは,あなただけではありません。今日,相談室へ駆け込んできたWebデザイナーもそんな一人です。

プロローグ:ネットショップのhttpsではじまるページで,鍵のマークが壊れて表示される! なにこれ?

ここは企業のWebサイトの構築を専門としているA社の一室。納期が迫り切羽詰まったWebデザイナーと,その駆け込み寺となっているインフラエンジニアがいました。

Webデザイナー「助けて! このままじゃクライアントのネットショップがサービスインできないよ!」

エンジニア「落ち着いて! 何がどうした?」

Webデザイナー「画像制作も,HTMLとCSSのコーディングも終わって,サーバにファイルもアップできたんだよ」

エンジニア「あ,鍵認証無事にできたんだね,よかった」

Webデザイナー「うん,その節はありがとう。でもダメなんだ! サイトをチェックしてたら,決済ページでURLの左側に鍵のマークがちゃんと出ないんだよ!」

エンジニア「あー,URLの左側に壊れた鍵とか,警告マークが出て『このページには安全でない他のリソースが含まれています』とか『このWebサイトとのすべての通信が暗号化されていません』ってメッセージ出るあれ?」

鍵のマークが壊れたり警告マークが出ている例

画像

Webデザイナー「そうそれ! なにこれ? 俺ファイルアップするときになんか失敗した? それかウイルスとか?」

エンジニア「いや,違うと思う。ちょっとソースコード見ていい? あ,やっぱり。絶対パスで画像とCSS表示してるね」

Webデザイナー「何が悪いの?」

エンジニア「うーん,ページをhttpsで開いてるのに,画像とCSSはhttpで開いてるのが悪い,かな」

Webデザイナー「何言ってるのか全然分かんない。まあいいや,とりあえず解決方法教えてよ」

エンジニア「んー,対処方法だけ教えても,仕組みが分かってないとまた似たようなところでつまづくんだよね。……あ,ねえ,ちょっと前に出てたFirefoxでハローワークのサイトが開けないニュース,見た?」

Webデザイナー「あー,見た見た。でもなんで突然その話になるの?」

エンジニア「今困ってる鍵マークが壊れる件と,根は一緒だから。よし,これを機に,SSL証明書の仕組みをちょっと説明しとこうか」

Webデザイナー「えー,長い? 納品前で焦ってるんだけど……」

エンジニア「長くない長くない。SSL証明書ってネットショップみたいにお金がからむサイトとか,ログインがあるサイトだと絶対出てくるから,きちんと理解しとこう。何回も同じようなことで悩むのは嫌でしょ?」

Webデザイナー「確かに全然分かんないもんなー」

エンジニア「よし,じゃあ始めよう!」

そうなんです。冒頭のニュースとWebデザイナーが困っている問題は,どちらもSSL証明書の仕組みに深く結びついています。今回は仕組みを学んで,SSL証明書に対する苦手意識をなくしていきましょう。

2つのSSL証明書

皆さんの中には,SSL証明書という名前を初めて聞いたという人もいるかもしれません。名前だけは知っている,案件で使ったことがあるという方もいると思います。

実はSSL証明書には,SSLサーバ証明書とSSLクライアント証明書の2種類があります。ただしSSLクライアント証明書はあまり一般的ではなく,⁠SSL証明書」という略称で呼んだときは,だいたいは「SSLサーバ証明書」のことを指すと思ってください。この記事でもSSL証明書という言葉が何度も出てきますが,すべてSSLサーバ証明書のことです。

SSLサーバ証明書はWebサーバに置いてあり,ブラウザでサイトにアクセスすると,エンドユーザのパソコンへWebページと一緒に届けられます。

SSL証明書はどんなシーンで使われている?

さて,SSL証明書こと,SSLサーバ証明書はどんなシーンで使われているのでしょうか。それは,次のようなシーンです。

  • 「お問い合わせ画面」「ネットショップの決済画面」など,ブラウザでエンドユーザが何かを入力して,登録や送信といったボタンを押すような画面
  • 「購入履歴画面」「会員情報確認画面」など,過去に入力した自分の情報をブラウザで受信して表示するような画面

もっと分かりやい言い方をすると,httpsから始まるURLをブラウザで開いて,次のような鍵のマークが表示されているときに使われています。全く同じページを見ていても,httpから始まるURLのときには使われていません。

株式会社アイ・エム・ジェイのお問い合わせ画面

画像

TwitterやFacebookでは以前,httpとhttpsのどちらを使うかは選択制でしたが,最近ではhttpsから始まるURLを使うようになっています。試しにhttp://twitter.com/と入力してTwitterのWebサイトを開いてみてください。自動でhttps://twitter.com/に飛ばされるはずです。

SSL証明書は全然違う2種類の仕事をしている

SSL証明書はhttpsから始まるページで使われているということが分かったところで,次に,httpsから始まるページでは,SSL証明書は一体何をしているのでしょうか。

実は,SSL証明書は全然異なる次の2つの仕事をしています。この点がSSL証明書の話の分かりにくさの原因なのです。

  1. Webサイトで送受信する情報を暗号化すること
  2. Webサイト運営者の身元を証明すること

それでは1つ目の役割,Webサイトで送受信する情報を暗号化することをから,詳しく説明していきます。

皆さんがhttpから始まるURLをブラウザで開いたとき,ここで入力したURLの文字やサーバから届くWebページ,画像などは何も暗号化されていません。パソコンからサーバまでのリクエスト(往路)も,サーバからパソコンまでのレスポンス(復路)も,透明なトンネルをだーっと流れていきます。

例えば,流行のハンドサインジェネレータ診断メーカーを実際に見てもらうと分かりますが,どれもhttpから始まるURLです。つまり,データは暗号化されないため,パソコンとサーバの間のネットワークを盗聴すれば,入力した文字やできあがった画像は,誰でも盗み見ることができます。こうしたサイトは,入力した言葉や生成された画像が公開されるのが前提なので,盗み見られても特に問題はありません。

でもこれがAmazonやFacebookにログインするときだったらどうでしょうか。入力したIDやパスワードが透明なトンネルを流れていったり,過去の購入履歴がAmazonのサーバから自分のパソコンまで透明なトンネルを流れてきたりして,途中誰でも盗み見られる状態だったら困りますよね。

そこで出てくるのがhttpsです。httpsならネットワーク上を流れるデータが暗号化されます。分かりやすく言うと,ブラウザでhttpsから始まるURLを開いたとき,自分のパソコンとサーバの間を流れるデータのすべてはSSL証明書によって暗号化されます。

これは送信も受信も両方ですので,ログインやファイルアップロードなどの送信のときも,購入履歴画面や会員情報確認画面など,自分の情報をサーバから受け取って表示する受信のときも,データはすべて暗号化されます。データが,中の見えない(透明ではない)安全なトンネルを通っていくようなものだと思ってください。

SSL証明書がないと,httpsから始まるURLでページを開くことはできません。これがSSL証明書の1つ目の役割,⁠Webサイトで送受信する情報を暗号化すること」です。このような理由から昨今,エンドユーザに情報を送ったり,受け取ったりするサイトでは,SSL証明書は必須となっています。

著者プロフィール

堀越良子(ほりこしよしこ)

株式会社アイ・エム・ジェイのインフラエンジニア。ウェブインテグレーションの下支えとなるサーバホスティングサービスの構築と運用を担当している。

モバイルサイトのエンジニア,SIerとソーシャルゲームの広報を経て,2013年より現職。「分からない気持ち」に寄り添える技術者になれるように日々奮闘中。

コメント

コメントの記入