ゆめさくコード

HTTP と HTTPS

luagate/http-https-introHTTPとHTTPS入門26 枚ネットワーク
スライド103触れる図解124レッスンの導入6

上から下へ、全 26 枚そのまま並べています。

発表モードで開く

HTTPとHTTPS入門

HTTP と HTTPS

Webの会話ルールを2時間で理解する

1
1

目次

今日の流れ

1. Webページが表示されるまで（全体像）

2. HTTP — ブラウザとサーバーの会話

3. メソッドとステータスコード

4. HTTPの弱点と HTTPS のしくみ

5. 証明書とデモ・まとめ

2
2
HTTPとHTTPS入門 - イントロ

今日のゴール

この2時間で身につけてほしいことです。

  • ブラウザとサーバーがどう会話しているかをイメージできる
  • HTTPのリクエストとレスポンスの中身が読める
  • 主なメソッドとステータスコードの意味が分かる
  • HTTPSがなぜ安全なのか、人に説明できる
  • 開発者ツールで実際の通信をのぞける
10
3
HTTPとHTTPS入門 - イントロ

Webページが表示されるまで（全体像）

URLを入力してから画面が出るまで、裏ではこんな流れが起きています。

1. 名前を住所に変換

DNSがドメイン名をサーバーのIPアドレスに翻訳する

2. リクエスト送信

ブラウザがサーバーへ「このページをください」と頼む

3. サーバーが応答

HTMLやCSS・画像などのデータを返す

4. 画面に描画

ブラウザが受け取ったデータを組み立てて表示する

11
4
HTTPとHTTPS入門 - HTTP

HTTP とは

ブラウザとサーバーが会話するための「共通の言葉」です。

HTTP（エイチティーティーピー / HyperText Transfer Protocol）

ブラウザ（クライアント）とサーバーがWebページやデータをやりとりするときのルールやWebの土台となる通信の約束ごと。

・クライアントが頼み、サーバーが応える形

・やりとりはテキストで書かれていて人も読める

・1回のやりとりごとに完結する（後で詳しく）

・HTTPSはこのHTTPを暗号化で守ったもの

12
5
HTTPとHTTPS入門 - HTTP

HTTP ＝ 手紙のやり取りに似ている

ブラウザとサーバーの会話は、手紙の往復にたとえると分かりやすいです。

あなた（ブラウザ）
  • 「このページください」と手紙を書く
  • これがリクエスト
郵便（HTTP）
  • 決まった書式で手紙を運ぶ
  • 行きと帰りの約束ごと
相手（サーバー）
  • 手紙を読んで返事を書く
  • これがレスポンス
13
6
HTTPとHTTPS入門 - HTTP

リクエストとレスポンス

HTTPの会話は「頼む側」と「応える側」の往復で成り立っています。

リクエスト（頼む）

  • ブラウザからサーバーへ送る
  • 「何を」「どうしたいか」を伝える
  • メソッド と URL を含む
  • ヘッダーと本文（ボディ）が付く

レスポンス（応える）

  • サーバーからブラウザへ返す
  • 「結果どうだったか」を伝える
  • ステータスコードを含む
  • ヘッダーと本文（ボディ）が付く
14
7
HTTPとHTTPS入門 - HTTP

実際のリクエストとレスポンスを見る

・中身はただのテキストです。1行目にやりたいこと、続いてヘッダー、空行のあとに本文が入ります。

http
# ブラウザが送るリクエスト
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome

# サーバーが返すレスポンス
HTTP/1.1 200 OK
Content-Type: text/html

<html>...ページの中身...</html>
15
8

HTTPとHTTPS入門 - メソッドとステータス

3

第3部 メソッドとステータス

何を頼み、どう返ってくるか

20
9
HTTPとHTTPS入門 - メソッドとステータス

主なメソッド（GET / POST）

メソッドは「サーバーに何をしてほしいか」を表す動詞です。代表的なものを押さえます。

やること
身近な例

GET

取得する（見るだけ）

ページや画像を表示する

POST

送って作る・処理する

フォーム送信・ログイン

PUT / PATCH

更新する

プロフィールを書き換える

DELETE

削除する

投稿を消す

21
10
HTTPとHTTPS入門 - メソッドとステータス

ステータスコード（200 / 404 / 500）

レスポンスの先頭につく3桁の数字で「結果どうだったか」を表します。先頭の数字で大まかに分類されます。

2xx 成功
  • 200 OK うまくいった
  • 201 Created 新しく作られた
4xx こちら側の間違い
  • 404 Not Found ページが無い
  • 403 Forbidden 権限が無い
5xx サーバー側の問題
  • 500 Internal Server Error 内部エラー
  • 503 Service Unavailable 混雑・停止中
22
11
HTTPとHTTPS入門 - メソッドとステータス

よく見るステータスコードの割合

実際のWebアクセスでは、ほとんどが成功（2xx）です。エラーは全体のごく一部にすぎません。

95 %765738190
92%
4%
3%
1%
200番台 成功
300番台 転送
400番台 client
500番台 server

出典: 一般的なWebサイトのアクセス傾向をもとに作成（概算）

23
12
HTTPとHTTPS入門 - メソッドとステータス

ヘッダーとボディ（何が入ってる？）

リクエストもレスポンスも「ヘッダー」と「ボディ」の2段構成になっています。

ヘッダー と ボディ

ヘッダーは「付帯情報（メタdata）」を書く場所、ボディは「本体のデータ」を入れる場所。荷物でいうと送り状がヘッダー、中身がボディ。

・ヘッダー 例 Content-Type（中身の種類）、データの大きさ、日時

・ボディ 例 HTML本文、JSONデータ、送信したフォームの内容

・GETのリクエストにはボディがほぼ無い

・レスポンスのボディに、表示したい中身が入っている

24
13

HTTPとHTTPS入門 - HTTPS

4

第4部 HTTPの弱点とHTTPS

なぜ暗号化が必要なのか

30
14
HTTPとHTTPS入門 - HTTPS

HTTP の弱点 ＝ 丸見え問題

HTTPはテキストをそのまま送るため、途中で誰かにのぞき見られる危険があります。

  • 通信内容が暗号化されていない
  • Wi-Fiの途中などで盗み見できる（盗聴）
  • 内容を書き換えられる恐れ（改ざん）
  • 相手が本物か確認できない（なりすまし）
  • パスワードやカード番号がそのまま流れると危険
31
15
HTTPとHTTPS入門 - HTTPS

HTTPS とは（暗号化で守る）

HTTPに「鍵」をかけて、安全にやり取りできるようにしたものです。

HTTPS（エイチティーティーピーエス / HTTP Secure）

HTTPの通信をSSL/TLSという仕組みで暗号化し、盗聴・改ざん・なりすましを防いだ通信方式。URLは https:// で始まる。

・中身を暗号化するので、途中で読まれても解読できない

・内容が書き換えられていないかを検知できる

・相手が本物のサーバーかを証明書で確認できる

・今のWebサイトはほぼすべてHTTPSが標準

32
16
HTTPとHTTPS入門 - HTTPS

HTTP と HTTPS のちがい

・同じやり取りでも、守られているかどうかが大きく違います。

HTTP（鍵なし）

  • http:// で始まる
  • 中身が平文（そのまま）
  • 盗み見・改ざんされうる
  • 相手が本物か不明
  • ブラウザに「保護されていない通信」

HTTPS（鍵あり）

  • https:// で始まる
  • 中身が暗号化されている
  • 盗み見・改ざんを防げる
  • 証明書で相手を確認
  • アドレスバーに鍵マーク
33
17
HTTPとHTTPS入門 - HTTPS

鍵マークと SSL/TLS のさわり

HTTPSでは通信を始める前に、安全な通り道を作る手順を踏みます。

1. あいさつ

ブラウザとサーバーが「暗号化で話そう」と取り決める

2. 本人確認

サーバーが証明書を提示し、本物だと示す

3. 共通の鍵を用意

二人だけが分かる暗号の鍵を安全に共有する

4. 暗号で会話

以降のやり取りはすべて暗号化されて流れる

34
18
HTTPとHTTPS入門 - HTTPS

証明書って何？（なりすまし防止）

「このサーバーは確かに本物です」と第三者が保証してくれる電子の身分証です。

サーバー証明書（SSL/TLS証明書）

信頼された第三者（認証局）が「このドメインの持ち主は本物だ」と発行する電子的な身分証明書。なりすましサイトを見破る手がかりになる。

・認証局（CA）が審査して発行する

・ブラウザは証明書を見て相手が本物か確認する

・偽サイトは正しい証明書を用意できない

・期限切れや不正があると警告画面が出る

35
19

HTTPとHTTPS入門 - デモとまとめ

5

第5部 デモとまとめ

実際の通信をのぞいてみよう

40
20
HTTPとHTTPS入門 - デモとまとめ

デモ：開発者ツールで通信を見る

ブラウザの開発者ツールを使えば、今まさに流れている通信をその場で確認できます。

ブラウザでサイトを開き、F12（または右クリック→検証）で開発者ツールを出す
「Network（ネットワーク）」タブを開く
ページを再読み込みすると、通信が一覧で表示される
1つクリックして Headers・Status・Response の中身を見る
41
21
HTTPとHTTPS入門 - デモとまとめ

コマンドでも通信は見える

・ターミナルから curl コマンドを使うと、レスポンスのヘッダーやステータスをそのまま確認できます。

bash
# ヘッダーとステータスだけを見る（-I）
curl -I https://example.com

# 返ってくる例
# HTTP/2 200
# content-type: text/html
# ...

# 通信のやり取りを詳しく見る（-v）
curl -v https://example.com
42
22
HTTPとHTTPS入門 - デモとまとめ
クイズ

振り返りクイズ

今日の内容を確認しましょう。

HTTPSがHTTPより安全な理由として、最も適切なものはどれ？

A
通信速度が必ず速くなるから
B
通信を暗号化し、相手が本物か確認できるから
C
エラーが絶対に起きなくなるから
D
データ量が小さくなるから
50
23
HTTPとHTTPS入門 - デモとまとめ
答え

振り返りクイズ 解答

HTTPSがHTTPより安全な理由として、最も適切なものはどれ？

A
通信速度が必ず速くなるから
B
通信を暗号化し、相手が本物か確認できるから
C
エラーが絶対に起きなくなるから
D
データ量が小さくなるから

HTTPSはSSL/TLSで通信を暗号化し、証明書で相手が本物かを確認します。だから盗聴・改ざん・なりすましを防げる、が正解です。速度やエラーの有無とは関係ありません。

51
24
HTTPとHTTPS入門 - デモとまとめ

質疑・次回予告

今日のまとめと、次に学ぶテーマです。質問があればここで受け付けます。

今日のおさらい
  • HTTPはブラウザとサーバーの会話
  • メソッドとステータスで意図と結果を表す
  • HTTPSは暗号化と証明書で守る
次回予告
  • SSH 〜サーバーに安全にログイン〜
  • 鍵を使った安全な遠隔操作を学ぶ
52
25
"

HTTPは「ブラウザとサーバーの会話のルール」、HTTPSは「その会話に鍵をかけたもの」。この土台が分かれば、Webで起きていることの大半は読み解けます。

— HTTPとHTTPS入門

53
26