HTTP入門

HTTP 入門
2021.02.06 作成
2021.02.13 更新
1

本スライドの目的
インターネットで Web サイトを閲覧するときの仕組みについ
て理解する。
2

World Wide Web
● 直訳: 世界に広がるクモの巣
● インターネット上で、文書や画像、動画等を公開したり閲
覧したりできる仕組みのこと
3

● 直訳: ハイパーテキストを伝送するための規約
● インターネット等を介して、クライアント (Web ブラウザ等) と
Web サーバが通信するための決まり事
HTTP (HyperText Transfer Protocol)
4
HTTP リクエスト (要求)
HTTP レスポンス (応答)
クライアント
(Web ブラウザ等)
Web サーバ
http://〜〜をください
…等
コンテンツ (HTML、画像ファイル等)
どうぞ

HTML (HyperText Markup Language)
ハイパーテキストを記述するための言語
● ページのタイトルの指定
● 見出し、段落の作成
● 文字色、サイズの指定
● ハイパーリンクの指定
● 画像の埋め込み等々
5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>秘密のホームページ
</title>
<style type="text/css">
body {
background-color:
#f0f0f2;
margin: 0;
padding: 0;
}
:
<h1>ようこそ</h1>
<p><strong>秘密のホームページ </strong>
にようこそ</p>

HTML 以外のファイルの例
● 画像ファイル
○ 写真やイラスト、アイコン等
○ JPEG, GIF, PNG 形式がよく使われる
● スタイルシート (.css)
○ HTML の装飾 (見栄え) を制御する
○ HTML に埋め込むこともできる
● JavaScript (.js)
○ ブラウザ上で動くプログラム
○ HTML に埋め込むこともできる
6

Web ブラウザ
Web サーバにリクエストを送り、返ってきたコンテンツ (HTML
や画像等) を解釈して表示するソフトウェア
○ Internet Explorer
○ Mozilla Firefox
○ Google Chrome
○ Safari 等
7
Web ブラウザ Web サーバ

Web サーバ
Web ブラウザから受け取ったリクエストに対して、コンテンツ
を返すソフトウェア
○ Apache, Nginx, IIS 等
もしくは、(物理的な) サーバコンピュータ自体のこと
8

URL (Uniform Resource Locator)
Web ページの場所を表す文字列
9
http://www.example.com:80/cart/cart.php?page=top
(1) (2) (3) (4) (5)
# 項目名説明必須
(1) スキーム名プロトコルの名前 ○
(2) ホスト名接続先サーバの名前もしくは IP アドレス ○
(3) ポート番号接続先サーバのポート番号
(4) パス名サーバ上のディレクトリやファイル名
(5) クエリ文字列リクエストに付加する文字列

ドキュメントルート
● Web サーバ上の公開ディレクトリ (フォルダ)
● ここに入れたファイルがインターネット上に公開される
10
/var/www/html
http://www.example.com/index.html
index.html

URL からファイル名を省略してアクセスしたとき
● ディレクトリインデックスファイル (index.html 等) の内容が表
示される
● そのファイルがない場合、Web サーバの設定により、次
のいずれかとなる
1. 「403 Forbidden」エラーを返す
2. ディレクトリ内のファイルリストを表示する
11

HTTP リクエストと HTTP レスポンス
12

HTTP メソッド
● method: 方法、方式
● Web ブラウザが Web サーバにリクエストを送るときの方
式
● 8種類くらいある
○ 主に使用されるのは「GET」と「POST」
13
メソッド説明
GET
コンテンツ (HTML や画像ファイル等) を Web サーバから取得す
るときに使用される
POST
フォームに入力された情報等を Web サーバに送信するとき
等に使用される

HTTP リクエストの構造 (ブラウザ → サーバ)
14
(1) GET /index.html HTTP/1.1
(2) Host: example.co.jp
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15;
rv:85.0) Gecko/20100101 Firefox/85.0
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
(3) (空行)
(4)
(1) リクエスト行
HTTP メソッド、要求するページ名、HTTP のバージョン
(常に1行)
(2) ヘッダリクエストの詳細情報 (複数行)
(3) 空行
(4) ボディ
POST メソッドの場合、サーバに送るデータ。空のことも
ある
リクエスト行
OS やブラウザの
ソフトウェア名

HTTP リクエストの構造 (ブラウザ → サーバ)
15
(1) POST /form/form.cgi HTTP/1.1
(2) Host: example.co.jp
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15;
rv:85.0) Gecko/20100101 Firefox/85.0
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
(3) (空行)
(4) name=yamada&age=20&email=yamada@example.com
(1) リクエスト行
HTTP メソッド、要求するページ名、HTTP のバージョン
(常に1行)
(3) 空行
(4) ボディ
POST メソッドの場合、サーバに送るデータ。空のことも
ある
ボディ
リクエスト行
OS やブラウザの

HTTP レスポンスの構造 (サーバ → ブラウザ)
16
(1) HTTP/1.1 200 OK
(2) Date: Mon, 01 Feb 2021 07:04:10 GMT
Server: Apache/2.4.29 (Ubuntu)
Content-Length: 293
Content-Type: text/html; charset=UTF-8
(3) (空行)
(4) <html>
<head>
<meta charset="utf-8">
:
(1) ステータス行 HTTP のバージョン、ステータスコード (常に1行)
(3) 空行
(4) ボディコンテンツ (HTML 本文や画像データ等)
コンテンツのデータ量
コンテンツの種類
ボディ (コンテンツ)

ステータスコード
Web サーバ側で、リクエストの処理が正常に終了したかどう
かを示すコード
1. 情報レスポンス (100番台)
2. 成功レスポンス (200番台)
3. リダイレクト (300番台)
○ redirect: 転送
4. クライアント側のエラー (400番台)
5. サーバ側のエラー (500番台)
17

主なステータスコード
18
コード説明
200 OK リクエストの処理が成功した。
301 Moved Permanently コンテンツが恒久的に移動した。
302 Moved Temporarily コンテンツが一時的に移動した。
304 Not Modified 前回の要求から変更がない。
400 Bad Request リクエストの仕方が正しくない。
401 Unauthorized
認証情報の不足 (パスワードがかかっているペー
ジ等)。
403 Forbidden ページを見る権限がない。
404 Not Found 要求されたコンテンツが見つからない。
500 Internal Server Error サーバ内部でエラーが発生した。
503
Service Temporarily
Unavailable
サーバが一時的に応答できない。

HTTP ヘッダの例
リクエストヘッダ
レスポンスヘッダ
19
Host リクエスト先 Web サーバのホスト名
User-Agent Web ブラウザや OS の種類
Referer 参照元の URL
Cookie
以前のアクセスで Web サーバから与えられた Cookie (後述)
の内容
Content-Length 返されるデータの容量
Content-Type 返されるデータの種類 (HTML, 画像等) や文字コード
Last-Modified 最終更新日時
Location (移動している場合) 移動先の URL

バーチャルホスト (Virtual Host)
● virtual: 仮想
● Web サーバにおいて、1つの IP アドレスで複数のホスト
名を使用する技術
○ HTTP 1.0 の時代は1つの IP アドレスで1つのサイトしかホスト
できなかったが、Web サイトの増加等により IP アドレスが足り
なくなってきたため、HTTP 1.1 で実装された
○ レンタルサーバ等でも使用される
※ 上記は「ネームバーチャル」の解説であり、この他に「IP バーチャル」もあるが、
今回は省略
20

バーチャルホスト (Virtual Host)
● Web サーバは、リクエストヘッダの「Host:」行で、どのサ
イトに対するリクエストなのかを判別する
21
203.0.113.10
GET /index.html HTTP/1.1
Host: example.co.jp
:
example.co.jp への
アクセスですね
test.com
hoge.net
example.co.jp
...

HTTP 通信の中身を見てみよう (Firefox 編)
1. 右上の [≡] アイコンをクリック
2. 「ウェブ開発」をクリック
3. 「ネットワーク」をクリック
4. 「HTML」タブをクリック
5. 適当な Web ページにアクセス
22

コマンドラインで HTTP 通信してみよう
23
$ telnet www.yahoo.co.jp 80
Trying 183.79.219.252...
Connected to edge12.g.yimg.jp.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.yahoo.co.jp
(空行)
HTTP/1.1 301 Redirect
Date: Mon, 15 Feb 2021 04:33:33 GMT
Via: http/1.1 edge2874.img.kth.yahoo.co.jp
(ApacheTrafficServer [c s f ])
Server: ATS
Cache-Control: no-store
Location: https://www.yahoo.co.jp:443/
(以下略)
www.yahoo.co.jp の
80番ポートに接続
リクエストヘッダ
を送信
サーバからの
レスポンス

静的ページと動的ページ
24

静的ページと動的ページ
静的ページ (static)
● (管理者が更新しない限り) 何回アクセスしても同じ内容が表示され
る
動的ページ (dynamic)
● 状況に応じて異なる内容が表示される
例)
○ 検索サイト
検索キーワードにより異なる結果が表示される
○ 通販サイト
クリックした商品がカートに入る
○ SNS
25

サーバサイドプログラム
サーバ側で動作するプログラムのこと
● クライアントからのリクエストを受け付けて、処理した結果
を返す
○ CGI, PHP, JSP, Java Servlet 等で実現 (詳細は略)
● クライアント側には、処理結果しか見えない
○ サーバ上のプログラムのソースコード等は見えない
26

HTTP はステートレスなプロトコル
● state: 状態、less: 無い
● 状態を保持しない
○ サーバは、以前に何があったかを覚えていない
27
こんにちは。トップページを
ください。
はいどうぞ。
先ほどはどうも。
次のページをください。
何の話ですか？
〜〜〜

HTTP はステートレスなプロトコル
状態を維持したいシーンは多々ある
● 通販サイトのカートの中身
● SNS のログイン状態等
⇒ どこかに記憶しておく必要がある
28

Cookie (クッキー)
Web サーバがクライアントに記憶して欲しい内容
● サーバがレスポンスに付加する (Set-Cookie ヘッダ)
● クライアントはそれを記憶し、次回以降そのサイトにアクセスする際
に、リクエストに付加する (Cookie ヘッダ)
29
リクエスト
レスポンス + Cookie
リクエスト + Cookie
これ覚えててね
覚えてたよ

セッション
● Web サイトにアクセスして行う一連の行動
○ 例) 通販サイトにアクセス ⇒ 商品をカートに ⇒ カートの中身を
確認 ⇒ 購入手続き
● サーバはクライアントごとにセッションを作って状態を保持
し、「セッション ID」を発行して Cookie 等でクライアントに
渡す
30
リクエスト
レスポンス + セッション ID
リクエスト + セッション ID
セッション
データ
あなたのセッションを作りました。
セッション ID は ○○○○ です。

% エンコード
● マルチバイト文字 (日本語等) を ASCII 文字 (≒ 半角文字) で
表現する手法の一つ
● HTTP のヘッダでは、マルチバイト文字を使用できないの
で、これを使う
○ これにより、検索サイトの検索キーワードや、通販サイトの送り
先住所等に日本語を入力できる
31
こんにちは！
%E3%81%93 %E3%82%93
%E3%81%AB %E3%81%A1
%E3%81%AF %EF%BC%81
% エンコード
デコード

DNS (Domain Name System)
● インターネット上のドメイン名を管理・運用するための仕
組み
○ ドメイン名 (ホスト名) と IP アドレスを相互に変換する
○ 分散管理されている
● HTTP においても、クライアントがサーバにリクエストを送
るときにDNS を利用し、サーバのホスト名を IP アドレス
に変換してから通信している
● 詳細は長くなるので別途
33
www.example.com 203.0.113.10

HTTPS (HTTP over SSL/TLS)
HTTP 通信をより安全にするための仕組み
● HTTP は平文で通信するのに対し、HTTPS は内容を暗
号化する
● 盗聴や改ざん、なりすましを防ぐ
● ただし、以下の部分は暗号化されない
○ トランスポート層以下
■ 送信元、宛先の IP アドレスとポート番号等
○ Web サーバのホスト名
34

HTTPS (HTTP over SSL/TLS)
証明書: なりすましを防ぐ仕組み
● OS やブラウザが信頼する認証局が、ドメインに対して証
明書を発行する
○ 身分証明書みたいなもの
○ 証明書は、ドメインの正規の登録者にしか発行されない
35
信頼する機関から発行された
証明書
持っているのは、本人である
に違いない

● proxy: 代理
● インターネットに直接接続できない (させない) クライアン
トの代理で、インターネットに接続するサーバ
社内ネットワーク等
プロキシサーバ
36
HTTP リクエスト
クライアント
Web サーバ
プロキシサーバ
クライアント
HTTP レスポンス
HTTP リクエスト
HTTP レスポンス
代理で聞いてきます

プロキシサーバを置くメリット
● セキュリティの向上
○ アクセスログの記録
○ ウイルスチェック
○ 匿名性の確保
● インターネット接続の高速化
○ キャッシュ
※ HTTPS 通信の場合、Peer-to-Peer (クライアントと Web サーバの間) で暗
号化されるので、プロキシサーバでは通信を復号できず、機能は制限される。
37

HTTP入門

More Related Content

What's hot

Similar to HTTP入門

More from Sho A

HTTP入門