LoginSignup
0
2

More than 1 year has passed since last update.

Cookie についてまとめてみる

Last updated at Posted at 2020-04-05

Overview

今更ですが、食べられないほうの Cookie についてまとめたいと思います。

Summary

だらだらと書きすぎた感があるので最初にまとめを。

  • Cookie はユーザー情報が格納されている小さなテキストファイル :cookie:
  • HTTP は本来 Stateless なプロトコルだが、Cookie を使うことでユーザーの状態を保持した通信を実現する
  • Cookie のやり取りは、サーバーは**「Set-Cookie」ヘッダーフィールドを使い、ブラウザは「Cookie」**ヘッダーフィールドを使う
  • サーバーサイドで保持しているユーザー情報を Session 情報といい、ブラウザが送ってきた Cookie と照合する。
  • アクセスしたページと異なるドメインから送られてきた Cookie を Third Party Cookie という。
  • Cache は再度同じページにアクセスした時に、ページのコンテンツを保存しておいて読み込み速度を上げる仕組み

時間がある方は、最後までどうぞ。

食べられない Cookie とは? :cookie:

Web の文脈で Cookie という場合、:cookie: HTTP Cookie :cookie: を指します。
HTTP Cookie は何かというと、ユーザー(Web ブラウザ)が Web サーバにアクセスした時に、Web サーバが発行しユーザー(Web ブラウザ)に渡されるファイルのこと、またはそのような Web ブラウザの機能のことです。

Cookie の形式は**「名前(Key)」と「値(Value)」のペア**になっており、
詳細は「RFC 6265:HTTP State Management Mechanism」で定義されています。
https://tools.ietf.org/html/rfc6265

Cookie の何が美味しいのか? :cookie:

では、HTTP Cookie の旨味は何なのでしょうか?

例えば、ショッピングサイトを利用していてカートに商品を色々入れていたけど、離席する必要があったのでログアウトした。その後しばらくして、ショッピングサイトを再度開くとカートの商品情報がログアウトする前の状態に保たれているという経験があると思います。

本来、HTTP は状態を保持できない(Stateless)プロトコルなはずなのになぜなのでしょうか?

これは Cookie の中身にはユーザーを識別できるようにセッションIDが格納されており、次回のアクセスのリクエストにそのファイルを含めることでどのユーザーからのリクエストなのか、ということが判定できるからです。

つまり、Cookie が会員証のような役割を果たすことで、擬似的にユーザの状態を保持することができます。

この機能を利用して、Cookie はログインしているかどうかの判定やショッピングサービスのカート機能の実現に利用されているのです。

クライアント・サーバー間の Cookie のやり取りを追ってみる :cookie:

  1. Web ブラウザ(クライアント)が Web サーバーに HTTP リクエストを投げた場合、サーバーはレスポンスメッセージと共に、Cookie の情報を**「Set-Cookie」というレスポンスヘッダーフィールド**を使い、ブラウザに返却します。

  2. レスポンスに「Set-Cookie」ヘッダーがあったということは、サーバーはリクエストに Cookie を要求していると判定し、Cookie の情報を**メモリ(Session Cookie)もしくはディスク(Parmanent Cookie)**に保存します。

  3. それからは、リクエストを投げる際に、Cookie ヘッダーフィールドに Cookie 情報をセットしてやり取りするようになります。Cookie ヘッダーフィールドは Cookie の名前と値のセットになっており、複数ある場合は**「;」**で区切って並べます。

Cookie の中身の詳細 :cookie:

Cookie の中身は以下のようになっています。

  • [name]=[value] : Cookieの name と value は「=」で結合して、Set-Cookie/Cookie ヘッダフィールドの先頭にセットする。
  • Max-age/Expires : Cookieの有効期限。
  • Domain : Cookieが有効なドメイン範囲。
  • Path : Cookieが有効なパス範囲。
  • Secure : HTTPS の時のみ有効で HTTPでの通信時には送信されない。
  • HttpOnly : HTTP プロトコルの Cookie ヘッダフィールドでのみ参照可能になる。document.cookie などから参照できなくなるので、セキュリティのために使われる。

Third Party Cookie :cookie:

ブラウザの設定によっては、アクセスした Web ページと異なるドメイン名からの Cookie は保存されないようになっている場合があります。たとえば a.com にある Web ページから b.com にある JavaScript を読み込んだ場合などです。
このような、アクセスしたページと異なるドメイン名から送信されてきた Cookie のことを「Third Party Cookie」と呼びます(アクセスしたページのドメインからの Cookie は「ファーストパーティクッキー」です。)

Session とは?

Session は日本語訳すると会議や授業という意味ですが、抽象化すると**「一定時間の活動」という文脈になります。
Web においてはこの意味で使われており、ログインした後に色々な活動を行うことを Session と言っています。
ブラウザに保存しておくユーザー情報は Cookie ですが、当たり前ですが
サーバー側も払い出した Cookie がどのユーザーと紐づいているかということをわかるようにしておかなければなりません。**
このようにサーバー側で管理しているユーザー情報を Session 情報と言います。

Cache と何が違うの?

最後に Cache と Cookie の違いについてです。
Cookie がユーザーの情報を保存・管理しているのに対し、Cache は一度アクセスした Web ページの情報を一時的に保存しておいて、次回アクセスした時にページの読み込み速度を向上させる機能のことを言います。

おまけ

なんで Cookie って名前なの? :cookie:

一説によると、フォーチュンクッキーから来てるらしいです。(クッキーの中に未来のことが書かれた紙切れが入ってるやつですね。どう●つの森アプリ版のガチャのやつ。)
Cookie もユーザー情報をテキストで保存してるものですし、なるほどなあという感じですね。

Cookie を焼く? :cookie:

とあるプレゼンで Cookie に情報を格納することを、Cookie を焼くと言っていて良いなあと思いました。

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