Cookieとはそもそもなんなのか

こんばんわ、hisayukiです。

直近のやり取りでCookieの話が出てなかなか面白かったので、CookieとWebStorageについて改めてまとめる事にしました。

昔からある技術ではありますが、今でもかなり使われてますね🤔
仕組み的にも使い方も割と単純ですが、その分計画的なご利用が必要な仕組みです。

そもそもCookieって❓
Cookieの構成
1. 種類
2. 有効期限
WebStorageとは？
Cookieは万能なものではない
まとめ

そもそもCookieって❓

僕自身、ちゃんと調べたことなかったのですが通信プロトコルになるんですね💦
またはそのプロトコルで通信される情報もこれにあたるとのこと。
データの一時保存や送信等を行うのでStorageの一種かと思ってました。

用途は上記に書いたとおり、データの一時保管、記憶、そのデータをServerと通信するために使われます。

発行元はアクセス先のWebServerがほとんどです。
場合によっては、アクセス先の広告を発行しているServerの場合もあります。

Cookieの構成

Name	Cookie名
Value	Cookieの値。使われるのはこの値で、ユーザ情報やアクセス回数、訪問回数やブラウザ情報など各端末に記録しておいて、次のアクセスでServerが受け取ることで本人特定が出来るような情報を埋めることが多い。
Domain	Cookieが発行されるドメイン特定のドメイン下でのみ発行する場合に指定。
Path	Cookieが発行されるパス。特定のパス下のみでCookieを発行する場合に指定。
Expires	Cookieの有効期限
Size	Cookieのファイルサイズ
HttpOnly	HTTP経由でのみアクセスできるようにするための設定。 JSなどでの利用を制限する。
Source	アクセス先がSSLを実装しているような安全なサイトの場合のみにするか
SameSite	ドメインを跨いだRequest時の情報自動送信を制御する。 Strictは一切送らない、LaxはGETは許すけどPOSTは制御、NONEは制御なし。

種類

Cookieには1st party Cookieと3rd party Cookieがあります。
違いは発行元になります。

1st party Cookie

実際に訪れたドメインのサイトが発行しているCookieになります。
ユーザーにブロックされにくいという特徴があります。そのため、3rd party Cookieに比べてユーザーをトラッキングしやすいです。

ただし、該当ドメインからの発行のみとなるので、サイトを横断したCookieの付与はできません。

3rd party Cookie

訪れているサイト以外のドメインから発行されているCookieになります。
サイトドメインにかかわらずに付与できるので、横断的な対応が可能です。

具体的には、バナー広告やリスティング広告等になります。
広告はサイトのドメインではなく広告Serverから配信されているため、Cookieは3rd party Cookieとなります。

1st party Cookieと違いサイトを横断したCookieの付与が可能ですが、近年は訪れてるサイトのドメイン以外からのCookieをブロックするブラウザが増えているため、効果測定の面で精度が低くなって来ています。

有効期限

これ結構大事で設定しなきゃセッション切れたタイミングで消えてしまいます。

自動削除は事故に繋がる確率は減りますが、設定するならどのくらい持ちづつけるかをセキュリティとユーザビリティとの兼ね合いで考えましょう。
無期限に設定することはできないので、Cookieを長く有効にしたい場合は数年単位で有効期間を設定できます。

WebStorageとは？

WebStorageはクライアントからアクセスできるデータベースのような役割をします。
javascriptを用いてクライアント側にデータを保存、取得、削除が行えます。

	Cookie	WebStorage
保存場所	ブラウザ	ブラウザ
保存容量	最大4KB	5MB～10MB
データ型	文字列のみ	文字列のみ
Serverにデータ送信	自動送信する	自動送信しない
操作する人	JS以外にPHPなども利用可能	Javascriptのみ

Cookieと違い、Serverへ値を勝手に送信しないことと容量が圧倒的に大きいです。
Serverへ値を飛ばしたい時はPOSTで送ったり、リクエストヘッダの項目に埋め込むことで可能です。

WebStorageはLocalStorageとSessionStoragの2種類あります。
違いはLocalStorageだと保存期間が半永久的に消えずでSessionStorageだとタブやブラウザを閉じた時点で消されるという点です。

SessionStorageは消し忘れても勝手に消してくれますが、LocalStorageだと意図的に消さないとブラウザに残ってしまいます。
Cookieのように有効期限も設けられません。

極端なことを言えば、一度訪れただけでそれ以降訪れないサービスだった場合はLocalStorageに何かを残すと消すタイミングがなくなることもあります。

WebStorageは良くも悪くもJavaScriptによる意図的な操作でデータを残せるので、JavaScriptが発火するタイミングが無ければ追加も削除も出来ないことに注意しましょう。

Cookieは万能なものではない

システム側は埋め込みと削除のみ

システム側ができる操作は、クライアント側がCookieを有効にしてる場合のみになります
Cookieを登録、取得、更新、削除することまでです。

つまり、Cookie利用の有効・無効はクライアント側で設定します。

システム側は決して、ブラウザ側が無効にしてるCookieの設定を有効にする事は出来ません。

また、一度登録されるとリクエスヘッダにCookieという項目で送信されるようになります。
対象ドメインの制御やそもそも値を消すことは出来ますが、送信を止めることは出来ません。

プライバシーの問題

3rd party Cookieによって個人が特定され、その行動はトラッキングできるようになりました。
そのおかげで広告のターゲティングやリターゲティングができているのですが、これって行動監視されてる状態です。

なので当然プライバシー保護の観点で問題視されます。

EU圏ではこのことが問題視され、GDPR（EU一般データ保護規則）というCookieを個人情報として取り扱い、勝手に取得してはいけないという法律まで制定されました。

ユーザーに向けての試みとしては、プライバシーポリシーでCookieについて触れる、不必要に長期間のCookie保存を行わない等の対策が考えられます。
なので長期間有効にしたい場合は数年単位で有効期間を設定できますが、あまりおすすめされません。

セキュリティの問題

Cookieは安全？危険？なのかというと入れるデータと使いかた次第なのでは？

便利だからセキュリティも緩いので最低限ドメインはhttpsにしてSource項目はhttps onlyとかにしましょうというのを見ますが・・・

漏れないようににするのではなく、漏れても大丈夫な設計をしましょう。

たとえば、平文のパスワードやログインIDとか入れてたらCookieでもWebStorageでも危険。

これが暗号化されたパスワードなら少しましになります。
さらにIDとパスワードを合わせた文字列をバイナリデータに変えたら更に危険度は減ります。
加えてログイン時にだけその文字列を送り、以降サイト内ではログイン時にServerから発行されるログインセッションのみ持っていればいいようにすれば更に安全性が増します。

そうすれば、Server側のログインセッションとクライアント側のログインセッションが一致していればログイン済みとかに出来ます。
これに加えて期限を1週間とかにしちゃうとか、クライアント側で漏れたらServer側のログインセッション消しちゃえばいいのでシステム側で状態制御が出来ます。

必要なのは違いを理解して用途を変えることです。

基本設定がなければ無条件で自動通信してしまう事を考慮して、大丈夫なデータだけCookieに入れておけばいいですし、不安なものは期限付きにしたり時間で無効になる情報にしたり、SessionStoragに入れればいいですね。