1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Web技術の基本3

Posted at

はじめに

これからエンジニアとして学んでいくうえで基本となる技術をまとめてみました。
間違い等があればご指摘いただけると幸いです。

1.HTTPメッセージ

 HTTP(HyperText Transfer Protocol)は、「Hyper Text」つまりHTMLなどのテキストファイルや、画像などのコンテンツをやりとりするときに使われるプロトコル。

HTTPの基本的動作

  1. ユーザー(クライアント)はWebに対してHTTPリクエストを送る
  2. リクエストを受けたWebサーバーはデータを返す
    image.png
     HTTPメッセージは、Webブラウザからの要求である 「HTTPリクエスト」 と、Webサーバーからの応答である 「HTTPレスポンス」 の二種類に分けることができる。

HTTPリクエスト

WebブラウザからWebサーバーに送っているHTTPリクエストは、

  • リクエストライン
  • ヘッダー
  • ボディー

の三要素で構成されている。

リクエストライン

GET /index.html HTTP/1.1

Webサーバーに対してどのような処理を依頼するのかを伝える情報が含まれている。構成は

  • メソッド : GET
  • パス名 : /index.html
  • HTTPバージョン : HTTP/1.1

メソッドは具体的にGET(データ取得)、POST(データ登録)、PUT(データ更新)、DELETE(データ削除)等があります。

メッセージヘッダー
リクエストに対しての情報や属性について記載されています。

Host: localhost:8080
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36
Accept: */*
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6
Cookie: user_id=12345678

メッセージボディ
実際にリクエストで送るデータが入ってくる。
例えば、フォーム欄で入力したテキストデータをWebサーバーに送る目的で使用される。

HTTPレスポンス

WebブラウザからHTTPリクエストを受け取ったWebサーバーは、リクエストを処理して、その結果をHTTPレスポンスとして応答する。
構成は下記

  • ステータスライン
  • ヘッダー
  • ボディー

ステータスライン

HTTP/1.1 200 OK

WebブラウザにWebサーバー内での処理の結果を伝える。構成は下記。

  • HTTPバージョン/ HTTP/1.1
  • ステータスコード/ 200
  • フレーズ/ OK

よく見るステータスコード

  • 2xx: リクエストが成功した
  • 4xx: リクエストに誤りがある
  • 5xx: サーバー側のエラー

詳しいステータスコードは下記の記事に

ヘッダー
Webサーバーのソフトウェア情報や、返信するデータのタイプ、データの圧縮方法などの情報を伝える。

alt-svc: quic=":443"; ma=2592000; v="44,43,39,35"
cache-control: private, max-age=0
content-encoding: br
content-type: text/html; charset=UTF-8
date: Thu, 23 Aug 2018 15:37:28 GMT
expires: -1
server: gws
status: 200
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

ボディー
具体的なサーバー側からの応答データが返却される。
HTMLや画像など

2.HTTPS

HTTPSは安全性を高める!!

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

 HTTPはシンプルなプロトコルで、特徴としてステートレスであるということが挙げられる。

クライアントの状態を保持して次の処理に反映させるような方式をステートフル、状態を保持せずに次の処理に反映させない方式をステートレス。
 多数のクライアント情報を1台のサーバ内に保持するとサーバに負担がかかり処理が遅くなるので、サーバ上にクライアント情報を保持しない「ステートレス」な設計がWebの原則としてある。

4.Cookie

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

Cookieのやりとり
 Webサーバーへ接続してきたWebブラウザに対して、コンテンツなどと一緒にWebブラウザに保存してもらいたい情報をCookieとして送る。
WebサーバーはHTTPレスポンスに 「Set-Cookie」ヘッダーを含めることでCookieを送信でき、WebブラウザはHTTPリクエストに 「Cookie」ヘッダーを含めることで送信できる。

セッションCookie

 有効期限が設定されていないCookieは、Webブラウザが閉じられると同時に削除される。このようなCookieを 「セッションCookie」 と呼ぶ。
一方、有効期限が設定されたCookieは、Webブラウザを閉じても削除されず、有効期限が来るまでWebブラウザに残る。CookieはWebブラウザの識別にも利用されるため、盗まれると他人になりすまされることがある。そのため、ショッピングサイトなどでは、セッションCookieがよく利用される。

5.セッション

 WebブラウザとWebサーバーのやりとりにおいて、一連の関連性のある処理の流れを 「セッション」 と呼ぶ。
 例えば、ショッピングサイトで商品を買う場合の「商品を選ぶ」→「商品をカゴに入れる」→「商品を購入する」といった処理の流れがセッションという。

セッション管理

 Webサーバーへのアクセスは一台のWebブラウザだけでなく、多数のWebブラウザから行われる。そのため、あるWebブラウザからの処理を関連性のある一連の処理(=セッション)として扱いたい場合は、Cookieを用いて施ションを管理できます。
 セッション管理において、Webブラウザを識別するための情報を「セッションID」と呼び、セッションIDはWebサーバーで生成され、Cookieに含めてWebブラウザに送信される。WebサーバーからセッションIDを受け取ったWebブラウザは、次回以降、CookieにセッションIDを含めて処理を行うことで、Webサーバーとのセッションを維持できる。

image.png

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?