CookieとSession

Web全般

2021.5.14

Web基礎知識まとめシリーズ、今日はCookieとSessionについて、それぞれの違いをまとめます。

前提:HTTPはステートレスなプロトコルである

HTTPは、クライアント側からサーバーへリクエストし、サーバーからレスポンスを返す一往復で通信が切断されます。

そしてそのあと再度クライアント側からリクエストを送信しても、サーバーはそのリクエストが初めてのものなのか、前からの続きなのか記憶していません。

このようなサーバーの状態のことを、State(状態)less(〜のない)、ステートレスといいます。

しかし、ログイン状態やショッピングカートの中身など、前の通信時の状態を覚えておいてほしい場合があります。 ページ遷移するたびにログアウト状態になったり、カートが空になっていては大変です。

そこで、状態を保持するためのものがCookieです。

Cookieとは

Cookieとは、クライアントに保存される小さなデータ(文字列のみ)です。 サーバーへアクセスするたびに自動生成され、サーバーとのやりとりで合言葉のように使います。

  1. サーバーからのレスポンスメッセージに「Cookieを保存してください」という指示があれば、クライアントは指示に従い、Cookieを保存します。
  2. クライアントにCookieが保存されていれば、クライアントは、常にリクエストメッセージに「このようなCookieがあります」とサーバーに教える仕組みになっています。

サーバーは、Cookieによって、アクセスしてきた相手が誰なのか調べることができるのです。

具体的な流れ

1. サーバーがレスポンスにSet-Cookieヘッダを付与

Set-Cookieヘッダフィールド
  • NAME=VALUE :  Cookieにつける名前とその値(必須)
  • Expires=DATE  :  Cookieの有効期限(デフォルトはブラウザを閉じるまで)

※過去の日時を指定するとCookieが削除される

  • Max-Age=DATE  :  クッキーの残存期間を秒数で指定

※ExpireとMax-Age両方指定した場合はMax-Ageが優先される

  • Path=PATH  :  Cookieの適用対象となるサーバ上のパス(デフォルトはドキュメントと同じパス)
  • Domain=DOMAIN  :  Cookieの適用対象となるドメイン名(デフォルトはCookieを生成したサーバのドメイン名)

※複数のドメインを対象にする必要がない場合は指定しないほうが安全

  • Secure  :  HTTPSで通信している場合にのみCookieを送信するオプション
  • HttpOnly  :  CookieをJavaScriptからアクセスできないように制限するオプション

2.レスポンスを受け取ったクライアントはCookieをブラウザに保存

3.それ以降のリクエストには受け取ったCookieをヘッダに入れてリクエスト

Cookie: name=value;

Cookieのセキュリティ上の問題点

CookieはHTTPOnly属性をつけないと、JavaScriptからの読み書きができてしまいます。

セキュリティ上は注意が必要です。

Sessionとは

Sessionとは、一連の処理の始まりから終わりまでを表す概念のことです。

ECサイトのような同一利用者からのアクセスを関連性のある一連のアクセスとして扱いたい場合、Cookieを使ってSession管理が行われます。

  1. クライアント側でユーザーがログイン、ユーザーIDとパスワードをサーバーに送信する
  2. サーバー側でセッションIDを生成し、Coockieに載せて返す
  3. クライアント側でセッションIDを管理し、リクエストのたびにCookieヘッダにセッションIDを含めて送信

クライアント側はCookieにセッションIDを載せてリクエストすることでセッションの維持ができるようになります。

Sessionの保存期間

ブラウザがサーバーに接続されている間(ブラウザを開いている間)サーバーに保存されます。

Megumi Tanimoto

Editor

フロントエンドエンジニア1年目。
エンジニアライフ、技術的なアウトプットを中心に発信します。