Cookie・SessionとWeb Storageについて整理する

Cookie・SessionとWeb Storageについて整理する

その他

普段何気なく使っている技術や言葉について、表面的な知識にせず、しっかりとイメージできるまで自分なりに調べて整理し、理解するシリーズ。

Cookieとは

正式には HTTP Cookie という名称で、一般的には略してCookieと呼びます。

Cookieは、クライアント側に保存される情報のことで、Webサイトの訪問者の情報を一時的に保存します。

例えばECサイトに訪問した時に既にログイン状態になっている、以前カートに入れた商品が残っているなどは、Cookieによって実現されています。

Cookieの構成

Cookieの構成は、サーバー側で設定することができます。nameとvalueは必ず設定しなければならず、それ以外の値に任意設定です。

  • name: Cookie名
  • value: Cookieがもつ値
  • expires: Cookieの有効期限を設定
  • domain: Cookieが発行されるドメインを設定
  • path: Cookieが発行されるパスを設定
  • secure: アクセス先がSSLを実装しているような安全なサイトの場合のみ、Cookieを発行するように設定

1st party Cookieと3rd party Cookie

ユーザーが訪れたサイトである発行元のCookieが1st party Cookieと呼ばれ、ログイン情報などが保存されます。一方、広告などのサーバーから発行されたユーザーが訪れているサイトではない発行元のCookieが3rd party Cookieになります。

まとめると以下のような違いがあります。

  • 1st Party Cookieは、ユーザーが訪れたサイト(自社サイト)での用途に使う
  • 3rd Party Cookieは、ユーザーが訪れたサイトでないサイト(他社サイト)での用途に使う

広告はターゲティングや効果測定のためにサイトをまたがってユーザーを識別する必要があります。これを実現するために3rd Party Cookieを使用しています。

3rd Party Cookieにより、ユーザーがどんなサイトを見ているかなどの情報を収集できてしまいます。

そのため、個人情報保護の観点からAppleはITP (Intelligent Tracking Prevention) という仕組みを自社ブラウザであるSafariに導入し、広告目的のクッキー(Cookie)の使用が制限され始めています。

 

Session

Sessionは通信における開始から終了までの一連の処理のことで、ここではCookieを使用した一連の操作・仕組みのことを指します。

Sessionはログイン情報など、ユーザーと紐づく情報をサーバー側に一定期間保存しておくことができます。

CookieとSession

SessionにIDを割り振って管理し、保持されたSessionが欲しいときはIDを指定して取り出します。

クライアント側でこのSessionIDをCookieに格納し、CookieはHTTPリクエスト時に自動的にCookie情報を送受信するため、サーバー側は送信されたSessionIDを元にユーザーの識別が可能となります。

クライアント側はSessionのIDは改ざんできても関連している中身はサーバーにあるからデータの改ざんすることはできません。

このようにCookieを利用することで、Session管理をすることができます。

 

Web Storageとは

Web Storageはクライアント側にデータをローカル環境に記録するための仕組みです。

同じような仕組みとしてCookieが使われていますが、Web Storageはより高機能で扱いやすくなっています。ほとんどのモダンブラウザがWeb Storageに対応しており、InternetExplorerもバージョン8以上から対応しています。

Web Storageの使いどころ

Web Storageはクライアント側からアクセスできるデータベースのような役割をしています。

そのため、クライアント側であるJavascriptからアクセスしてメリットがあるような使い方をすると良いかと思います。

例えば以下のような場合に効果を発揮します。

  • お知らせや通知など表示に関する各種設定情報
  • お気に入りや商品のカート追加などのユーザーによる操作やアクションによる情報

Web Storageの種類とCookieとの比較

Web StorageはさらにlocalStorageとsessionStorageの2種類に分かれ、保持するデータの有効期限に違いがあります。

有効期限データ量サーバへのデータ送信
Local Storage永続的に有効ドメインに対して5MBデータ利用時のみ
Session Storageウィンドウ・タブを閉じるまでドメインに対して5MBデータ利用時のみ
Cookieウィンドウ・タブを閉じるまで、または指定期限まで4KBリクエスト毎に自動送信

CookieとWeb Storageの共通点と違い

共通点

  • クライアントから参照をすることができる
  • 保存するデータをKey-Valueで保存する

異なる点

  • Web Storageは大きなデータ量を簡単に取り扱える
  • Cookieは通信ごとに毎回自動で送信される

また大きな用途の違いとして、Cookieの情報はサーバーサイドが使用するのに対し、Web Storageはクライアントサイドからしか参照することができません。

基本的にはCookieにはJavascriptからアクセスできず、Web StorageはJavascriptによってアクセスできるため、サーバーで参照する必要がないデータはWeb Storageで格納すると良いでしょう。

Web StorageとCookieを比較した場合、通信量やセキュリティなどほとんどの面でWeb Storageに軍配があがりますが、CookieはHTTPリクエスト時に自動的にCookie情報を送受信するため、単純にサーバー側プログラムとの連携を考えると、Cookieの方が扱いやすいといえます。

 

参考

Web Storageの概要 Web Storageはクライアント側にデータをローカル環境に記録するための仕組 […]
rfs.jp
引用/参考書籍 「よくわかるPHPの教科書」 「初めてのPHP5」 「パーフェクトPHP」 「体系的に学ぶ安全なWebアプリケーションの作り方」 「PHPスーパ…
qiita.com
動機 半年前にWeb Storageというものフロントエンドに詳しい友達から知りました。 それ以来、Web Storageのことを思い浮かぶこともなかったのです…
www.1915keke.com
はじめに PHPでメールフォームや掲示板などWebアプリケーションを作りたいと考えている方は、Cookieとセッションについて必ず理解しておく必要があります。 …
qiita.com
https://media.kaizenplatform.com/n/n13f0904db164