11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Web】HTTPでやりとりするデータの構造を図を使って説明してみた

Last updated at Posted at 2022-03-06

HTTPメッセージ

  • HTTPでは、ほかのクライアント/サーバーシステムと同様に、クライアントから要求を送り、サーバー画素の要求に対して必要なデータを返す。
  • WebブラウザとWebサーバーでやりとりする際に利用されるのが、HTTPメッセージ
  • HTTPメッセージには2種類あり、
    • HTTPリクエスト:Webブラウザからの要求
    • HTTPレスポンス:Webサーバーからの応答
  • HTTPでは基本的に、1つのHTTPリクエストに1つのHTTPレスポンスを返す。

p51-1.png

  • HTTPメッセージの構成
    • 複数行のデータで構成される。
    • 開始行はHTTPリクエストとHTTPレスポンスで構文が異なり、
      • リクエスト時は「リクエスト行」
      • レスポンス時は「ステータス行」

p51-2.png

HTTPリクエスト/HTTPレスポンス

  • HTTPリクエスト
    p53-1.png

①リクエスト行
Webサーバーに対してどのような処理を依頼するのかを伝える情報が含まれている。
②メッセージヘッダー(HTTPヘッダー)
Webブラウザの種類や、対応しているデータのタイプ、データの圧縮方法、言語などの情報を伝える。
③空白行
1行あけることでメッセージヘッダーの終わりを伝える。
④メッセージボディ
Webサーバーにデータを送るために使われる。空の場合もある。

  • HTTPレスポンス
    p53-2.png

①ステータス行
WebブラウザにWebサーバー内での処理の結果を伝える。
②メッセージヘッダー(HTTPヘッダー)
Webサーバーのソフトウェア情報や、返信するデータのタイプ、データの圧縮方法などの情報を伝える。
③空白行
1行あけることでメッセージヘッダーの終わりを伝える。
④メッセージボディ
HTMLや画像などのデータを格納する場所。

HTTPメソッド

  • クライアントがWebサーバーに要求する処理の種類を表す。
  • Webサーバーによっては制限されているメソッドもあるが、「HEAD」メソッドと「GET」メソッドは必須。
HTTPメソッド名 説明
HEAD HTTPヘッダーの情報のみを取得するHTTPメソッド。データの更新日時やデータのサイズのみを取得したい場合に利用。
GET HTMLファイルや画像といったデータを取得する場合に利用。Webサイト閲覧時において使用頻度が高い。
POST フォームに入力したパスワードといったデータを転送する場合に利用。
PUT データ(ファイル)をアップロードする場合に利用。Webサーバー上のファイルを置き換えることができるため、利用できないように制限されている場合が多い。
DELETE 指定したデータ(ファイル)を削除する場合に利用。利用できないように制限されている場合が多い。
CONNECT Webサーバーに接続するまでに別のサーバーを中継する場合に利用。CONNECTメソッドを悪用した攻撃があるため、利用を制限されている場合が多い。
OPTIONS 利用できるHTTPメソッドを問い合わせる場合に利用。PUTやDELETEメソッドのように利用を制限されているHTTPメソッドがあるため、事前に機能を確認する際に利用される。
TRACE WebブラウザとWebサーバーの経路をチェックする場合に利用。TRACEメソッドを悪用した攻撃があるため、利用を制限されている場合が多い。
  • データ送信における「GET」と「POST」の違い
    • ある会員サイトへユーザー名とパスワードを指定してログインする場合
      p55-1.png

ステータスコード

  • HTTPレスポンスに含まれるステータスコードは、応答の種類を表す。
    • 100番台:HTTPリクエストが処理中だと通知している。
    • 200番台:HTTPリクエストに対して、正常に処理した場合に通知している。
    • 300番台:HTTPリクエストに対して、転送処理などのWebブラウザ側で追加の処理が必要であることを通知している。
    • 400番台:クライアント(Webブラウザ)のエラーを通知している。
    • 500番台:Webサーバーのエラーであることを通知している。
ステータスコード 表示 説明
100 continue リクエスト継続中を通知
200 OK リクエストが正常に受理されたことを通知
301 Moved Paramanently リクエストされたコンテンツが移動したこと通知
302 Found リクエストされたコンテンツが一時的に移動(別の場所で発見)したことを通知
304 Not Modified リクエストされたコンテンツが未更新であることを通知。Webブラウザに一時保存されたコンテンツが表示される
400 Bad Request リクエストが不正であることを通知
404 Not Found リクエストされたコンテンツが未検出であることを通知
500 Internet Server Error リクエスト処理中にサーバー内部でエラーが発生したことを通知
503 Service Unavailable アクセス集中やメンテナンスなどの理由で一時的に処理不可であることを通知
  • クライアント(400番台)とサーバー(500番台)のエラー
    • 400番台:クライアント(Webブラウザ)のエラー
    • 500番台:Webサーバーのエラー

メッセージヘッダー

  • メッセージヘッダー:HTTPメッセージに関する詳細な情報を送信することが可能。
  • ヘッダーフィールド:HTTPメッセージでのやりとりにおける詳細な情報を示すために使われる。

p59-1.png

  • 一般ヘッダーフィールド
    • HTTPリクエストとHTTPレスポンスの両方に含まれるヘッダーフィールド
名前 内容
Connection リクエスト後はTCPコネクションを切断など接続状態に関する通知
Date HTTPメッセージが作成された日付
Upgrade HTTPのバージョンをアップデートするように要求
  • リクエストヘッダーフィールド
    • HTTPリクエストのみに含まれるヘッダーフィールド
名前 内容
Host リクエスト先のサーバー名
Referer 直前にリンクしていた(訪れていた)WebページのURL
User-Agent Webブラウザの固有情報(プロダクト名、バージョンなど)
  • レスポンスヘッダーフィールド
    • HTTPレスポンスのみに含まれるヘッダーフィールド
名前 内容
Location リダイレクト先のWebページの情報
Server Webサーバーの固有情報(プロダクト名、バージョンなど)
  • エンティティヘッダーフィールド
    • HTTPリクエストとHTTPレスポンスの両方に含まれるヘッダーフィールド。メッセージボディに含まれるデータの付加情報を示す。
名前 内容
Allow 利用可能なHTTPメソッドの一覧
Content-Encoding コンテンツのエンコード(データ変換)方式
Content-Language コンテンツの使用言語
Content-Length コンテンツのサイズ。単位はバイト(byte)
Content-Type コンテンツの種類(テキスト、画像など)
Expires コンテンツの有効期限
Last-Modified コンテンツの最終更新時刻

TCPによるデータ通信

  • TCP:Webサイトの閲覧だけでなく、メールの送受信やファイル転送といったさまざまなデータ転送時に利用されている。
  • TCPはクライアントとサーバー間でまずコネクションの確立を行ってから、データをやりとりする。
  • コネクションの確立は3回のやりとりによって行われるため、「3ウェイハンドシェイク」と呼ばれる。
  • データ送受信が完了して通信を終了(コネクションの切断)する際は、4回のやりとりが必要となる。
    • ①クライアントからの接続要求(SYN):SYNパケットで接続を要求
    • ②クライアントに対して確認応答および、サーバーから接続要求(SYN+ACK):ACKパケットで確認応答すると同時に、SYNパケットで接続を要求
    • ③サーバーに対して確認応答(ACK):ACKパケットで確認応答

p61-1.png

  • TCPでは信頼性の高いデータ通信を実現するために、「再送制御」および「順序制御」を行っている。また、効率よいデータ転送を行うため、データを受け取るたびにACKパケットを送信するのではなく、複数のデータを受け取ってからACKパケットを送信する。

再送制御
p61-2.png

順序制御

p61-3.png

HTTP/1.1のやりとり

  • HTTPキープアライブ:HTTPリクエストごとにコネクションを確立していると効率が悪く、無駄な通信が発生してしまうため、コネクションを継続して利用する方式。
    p63-1.png

  • HTTPパイプライン:HTTPリクエストに対するHTTPレスポンスを待つことなく、複数のHTTPリクエストを送る機能。

p63-2.png

HTTP/2のやりとり

  • WebブラウザとWebサーバー間で確率された1つのコネクション上に仮想的な通信経路(ストリーム)を生成し、ストリーム上でHTTPリクエストとHTTPレスポンスのやりとりを行う。ストリームは複数生成可能。

p65-1.png

  • 「HTTPパイプライン」と「ストリームによる多重化」の比較

p65-2.png

HTTP/2での改良点

  • バイナリ形式の利用:「フレーム」に分割され、バイナリ形式で送信される。
    p67-1.png

  • ヘッダー圧縮:差分のみ転送する圧縮方式(HPACK)を利用してデータ転送量を削減。
    p67-2.png

  • サーバープッシュ:HTTPリクエスト内容をもとにWebサーバー側で必要なファイルを判別して、WebブラウザからのHTTPリクエストなしに、事前にWebサーバーから転送する。

p67-3.png

HTTPSの仕組み

  • HTTP通信において、暗号化方式であるSSL(Secure Sockets Layer)TLS(Transport Layer Security) を利用することでWebサイトを安全に使うこと。
  • 「盗聴防止」:データを暗号化することで盗聴を防止

p69-1.png

  • 「改ざん防止」:メッセージダイジェストで改ざん防止
    • メッセージダイジェスト:あるデータから一意の短いデータ(ハッシュ値)を取り出す計算のこと。

p69-2.png

  • 「なりすまし防止」:SSLサーバー証明書でなりすまし防止
    • SSLサーバー証明書:電子証明書を接続時に検証して、利用者はWebサイトを運営する会社の身元を確認できる。「認証局」で発行されたものでないと、Webブラウザに警告画面が表示される。

p69-3.png

HTTPSのやりとり

  • SSL/TLSハンドシェイクの流れ
    • TCPコネクションが確立されたあとに以下の流れで行われる。

p71-1.png

ステートフルとステートレス

  • ステートフル:直前にやりとりした相手のなどの状態を、以降のやりとりでも覚えていること
  • ステートレス:直前にやりとりした相手のなどの状態を、毎回リセットするもの

p73-1.png

  • ステートフルのほうが便利そうですが、サーバーは一度に多くのクライアントとやりとりしなければならないので、負担が非常に大きくなる。
  • ステートレスなプロトコルでも、自分を特定する情報を毎回伝えるようにすれば、ステートフルと同じ結果が得られます。

p73-2.png

Cookie(クッキー)

  • HTTPはステートレスなプロトコルなので、WebブラウザとWebサーバーの一連のやりとりで、状態を保持する仕組みがない。そのため、状態をショッピングサイトなどで状態を保持し管理する必要がある場合にCookieを用いる。
  • Cookieのやりとり

p75-1.png

  • メッセージヘッダーの利用

    • Cookieの送信にはメッセージヘッダーが利用される。
    • Set-Cookie」ヘッダー:WebサーバーがHTTPレスポンスに含めることでCookieを送信できる。
    • Cookie」ヘッダー:WebブラウザがHTTPリクエストに含めることでCookieを送信できる。
  • Cookieで利用されるヘッダーフィールド

名前 内容 種別
Set-Cookie 状態を保持・管理するための情報(Cookie) レスポンスヘッダーフィールド
Cookie Webサーバーから受け取ったCookieの値 リクエストヘッダーフィールド
  • Set-Cookieで利用されるヘッダーフィールドに記述する属性
属性 内容
name=value Cookieに付ける名前とその値(必須)
expires=date Cookieの有効期限。この属性がない場合はWebブラウザを閉じるとCookieは削除される
max-age=seconds Cookieの残存時間を秒数で指定
secure HTTPSで通信している場合にのみCookieを送信
httponly JavaScriptからのCookieへの参照制限
domain=DOMAIN_NAME Cookieが利用されるドメイン名
path=PATH Cookieが利用されるサーバー上のパス

※各属性は「;」で区切ってSet-Cookieヘッダーに複数記述できる。

  • セッションCookie:有効期限が設定されていないCookie。Webブラウザを閉じると同時に削除される。
  • 有効期限が設定されたCookieは、Webブラウザを閉じても削除されず、有効期限までWebブラウザ上に残る。
  • セキュリティ上の観点からショッピングサイトなどではセッションCookieがよく利用される。

セッション

  • WebブラウザとWebサーバーのやりとりにおいて、一連の関連性のある処理の流れ。
  • セッションID:セッション管理でWebブラウザを識別するための情報。
  • セッションデータは、セッションIDと紐付けてWebサーバー上で管理されている。
  • Cookieなどを利用してセッションIDを送信し、Webサーバーが保存しているセッションデータを参照できる。

p77-1.png

セッションID ユーザー名 ログイン 買い物かご
aaaaa tanaka true アウター×1
シャツ×2
bbbbb guest false シューズ×1
  • セッションIDの渡し方

Cookieに含めて渡す:メッセージヘッダーのCookieにセッションIDを含めてやりとりする一般的な方法。
p77-2.png

リンクのURLに埋め込む:URLにパラメータとしてセッションIDを含めてやりとりする。
p77-3.png

フォームデータに埋め込む:フォームの入力データとしてセッションIDを含めてやりとりする。
p77-4.png

URI

  • 情報やデータといったリソースを識別するための記述方法。人や会社、書籍などあらゆるリソースを示すことができる。
  • URL:リソースの場所を示す
  • URN:リソースの名前を示す

URIの例

スキーム: スキームごとの表現形式
http: //example.jp/news/index.html
example.jpにあるnewsフォルダ内のindex.htmlファイル
ftp: //example.jp/docs/news01.doc
example.jpにあるdocsフォルダ内のnews01.docファイル
urn: isbn:0-123-45678-9
isbnコード0-123-45678-9で示される書籍
urn: ietf:rfc2648
ietfによって管理されているRFC2648で示される文書
  • リクエストURI:HTTPでリソースを特定するために利用されるURI。リクエスト行のメソッドに続いて記述される。
    • 絶対URI形式:URIのすべて含める
    • 相対URI形式:URIの一部を含める

p79-1.png

  • URIの規定では予約文字(!、#、$などの記号)、非予約文字(半角の英数字など)が決められており、URIでは非予約文字しか使えない。
    • 予約文字:特定目的で用いるために予約されている文字。その目的以外ではURIに使用できない。
    • 非予約文字: 数字やアルファベットなど自由にURIに使用できる文字。
  • パーセントコーディング:日本語などのどちらにも含まれない文字は、%のあとに文字コードを16進数で表した形に変換されること。
  • 「いい天気」をパーセントコーディングすると、
文字コード いい天気 → パーセントコーディング後
Shift-JIS %82%a2%82%a2%93V%8bC
EUC-JP %a4%a4%a4%a4%c5%b7%b5%a4
UTF-8 %e3%81%84%e3%81%84%e5%a4%a9%e6%b0%97

参考:Web技術の基本

11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?