HTTPSの仕組みをストーリーテリング形式で解説 


## はじめに
今回は、HTTPとHTTPSの仕組みをストーリーテリング形式で解説していきます。複雑な通信プロトコルを楽しく学んでいきましょう。

インターネットの世界では、ブラウザくんとサーバーさんが日々せっせと働いています。彼らの仕事は、私たちユーザーが欲しい情報を安全に届けることです。でも、その裏側ではどんなドラマが繰り広げられているのでしょうか？

## 登場人物紹介

```
   ブラウザくん                  サーバーさん
      _____                        _____
     /     \                      /     \
    | o   o |                    | ^   ^ |
    |   ∧   |                    |   ∨   |
    |  \_/  |                    |  \_/  |
     \_____/                      \_____/
        |                           |
       / \                         / \
```

- **ブラウザくん**: 好奇心旺盛で、ユーザーの要望に応えるために頑張る主人公
- **サーバーさん**: 膨大な情報を持つ、頼れる相棒

## 第一幕：出会いの準備

ある日、ブラウザくんはユーザーから
"https://www.example.com" というURLを受け取ります。

まず、ブラウザくんはDNSサーバーに「www.example.comってどこにあるの？」と尋ねます。DNSサーバーは「IPアドレス192.0.2.1だよ」と教えてくれました。

```
   ブラウザくん                  DNSサーバー
      _____                        _____
     /     \                      /     \
    | o   o |                    |  DNS  |
    |   ∧   |  「www.example.comって   |
    |  \_/  |   どこ？」         |       |
     \_____/  -----------------> |       |
        |                        |       |
        |     「192.0.2.1だよ」  |       |
        |     <----------------- |       |
        |                         \_____/
       / \
```

ブラウザくん：「よし、これで行き先がわかったぞ！」

## 第二幕：安全な関係を築くために

ブラウザくんはサーバーさんとの接続を始めます。まずはTCP接続という基本的な道を作ります。

- ブラウザくん :「こんにちは！」（SYN） 
- サーバーさん :「こんにちは、どうぞ！」（SYN+ACK） 
- ブラウザくん :「ありがとう！」（ACK）

```
   ブラウザくん                  サーバーさん
      _____                        _____
     /     \      SYN             /     \
    | o   o | -----------------> | ^   ^ |
    |   ∧   |                    |   ∨   |
    |  \_/  |     SYN+ACK        |  \_/  |
     \_____/  <-----------------  \_____/
        |           ACK             |
        | ------------------>       |
```

これで基本的な道ができました。でも、これだけでは安全ではありません。そこでTLSハンドシェイクという特別な挨拶を始めます。

- ブラウザくん：「僕はこんな暗号が使えるよ！あと、この乱数も覚えておいてね」（Client Hello）

- サーバーさん：「わかった！じゃあこの暗号を使おう。私もこの乱数を覚えておくね」（Server Hello）

- サーバーさん：「あと、これが私の証明書だよ。本当に私が正しいサーバーだという証拠さ」（Certificate）

- ブラウザくん：（証明書を確認して）「うん、確かにあなたは本物のサーバーさんだね！」

```

   ブラウザくん                  サーバーさん
      _____                        _____
     /     \                      /     \
    | o   o |  「Client Hello」   | ^   ^ |
    |   ∧   | -----------------> |   ∨   |
    |  \_/  |  「暗号+乱数」      |  \_/  |
     \_____/                      \_____/
        |                           |
        |     「Server Hello」      |
        |     「暗号+乱数」         |
        | <------------------       |
        |                           |
        |     「Certificate」       |
        |     「証明書」            |
        | <------------------       |
        |                           |
        |  「証明書確認OK!」        |
        | ------------------>       |
       / \                         / \

```


## 第三幕：秘密の鍵を作る

- ブラウザくん：「これから秘密の会話をするための鍵を作るね」（Client Key Exchange）

両者は互いの情報を使って、同じ「共通鍵」を別々に作り出します。この鍵は第三者には知られていません。

- ブラウザくん：「これからは暗号化して話そう！」（Change Cipher Spec）

- サーバーさん：「了解！私も暗号化するよ！」（Change Cipher Spec）


```
   ブラウザくん                  サーバーさん
      _____                        _____
     /     \                      /     \
    | o   o |    「鍵を作るよ」   | ^   ^ |
    |   ∧   | -----------------> |   ∨   |
    |  \_/  |                    |  \_/  |
     \_____/                      \_____/
        |                           |
        |        🔑                 |
        |---(共通鍵を作成)---       |
        |                           |---(共通鍵を作成)
```

ブラウザくん：「これで安全に話せるね！」

## 第四幕：本題の会話

安全な通信路ができたので、ブラウザくんは本当の目的を伝えます。

- ブラウザくん：「トップページを見せてください！」（暗号化されたHTTPリクエスト）

サーバーさんは、暗号化されたリクエストを受信すると、事前に共有された鍵を使用して復号します。復号した内容を処理した後、再度暗号化を行い、暗号化されたレスポンスをブラウザさんに返します。

- サーバーさん：「はい、どうぞ！これがトップページです」（暗号化されたHTTPレスポンス）

```
   ブラウザくん                  サーバーさん
      _____                        _____
     /     \    🔒暗号化された🔒   /     \
    | o   o |     HTTPリクエスト   | ^   ^ |
    |   ∧   | -----------------> |   ∨   |
    |  \_/  |                    |  \_/  |
     \_____/                      \_____/
        |                           |
        |    🔒暗号化された🔒       |
        |      HTTPレスポンス       |
        | <------------------       |
```

## 最終幕：表示

ブラウザくんはレスポンスを受け取り、暗号を解読します。そして美しいWebページをユーザーさんに見せるのでした。
「やったー！安全に情報を受け取れたぞ！」
こうして、ブラウザくんとサーバーさんは、第三者に内容を見られることなく、安全に情報をやりとりすることができました。

```
   ブラウザくん                 ユーザーさん
      _____                        _____
     /     \                      /     \
    | o   o |     Webページ      | ^   ^ |
    |   ∧   | -----------------> |   o   |
    |  \_/  |                    |  \_/  |
     \_____/                      \_____/
        |      「やったー！」       |
        |                           |
        |     「安全に情報を        |
        |      受け取れたぞ！」     |
```

## まとめ

このように、HTTPSはHTTPに比べて暗号化や認証の手順が加わることで、より安全な通信を実現しています。ブラウザくんとサーバーさんの努力のおかげで、私たちは安心してインターネットを利用できるのです。

ストーリーテリング形式で説明することで、複雑な仕組みも親しみやすく理解できるようになりました。これからインターネットを使う時は、ブラウザくんとサーバーさんの活躍を思い出してみてくださいね！

## 参考文献

1. [HTTPSプロトコルはなぜ必要？HTTP・SSLとの違いや通信の仕組み](https://www.gmo.jp/security/ciphersecurity/http-https/blog/https-protocol/)
2. [サーバ証明書・TLS/SSL通信・HTTPS暗号アルゴリズム 実践解説](https://note.com/toppakou/n/n792b0e8d01ec)
3. [Webサイト全体HTTPS化（常時SSL）の流れはもう止まらない](https://webtan.impress.co.jp/e/2016/02/01/21806)