Cookieとは
Cookieとは、ブラウザに保存される、ドメインと関連付けられたkey-valueペアのことである。
Cookieを保存する方法
ブラウザにCookieを保存する方法は2つある。
- HTTPレスポンスヘッダーで保存する方法
- JavaScriptで保存する方法
HTTPレスポンスヘッダーで保存する方法
Set-Cookie HTTPレスポンスヘッダーでCookieを送ることで、ブラウザにCookieを保存できる。次の例ではa=appleとb=bananaの2つのCookieがブラウザに保存される。
Set-Cookie: a=apple; path=/
Set-Cookie: b=banana; path=/
※path=/というのはCookieが有効なパスの指定である。普通はpath=/でよいだろう。
HTTPレスポンスヘッダーで保存する方法では、Cookieはそれを送信したサーバーのドメインと関連付けられる。
JavaScriptで保存する方法
JavaScriptでは、document.cookieにCookieをセットすることで、ブラウザにCookieを保存できる。次の例でもa=appleとb=bananaの2つのCookieがブラウザに保存される。
document.cookie = 'a=appple; path=/';
document.cookie = 'b=banana; path=/';
JavaScriptで保存する方法では、CookieはそのJavaScriptが実行されるページのドメインと関連付けられる。
Cookieにアクセスする方法
ブラウザがHTTPリクエストをするとき、ブラウザはリクエスト先のドメインと関連付けられたCookieをCookie HTTPリクエストヘッダーで送る。サーバーではそれを読み取ることで、ブラウザに保存されたCookieにアクセスすることが可能である。
JavaScriptからもCookieにアクセスすることが可能である。次の例では、JavaScriptが実行されるページのドメインと関連付けられたCookieを取得している。
const cookies = document.cookie;
// "a=apple; b=banana"のように";"で連結されたCookieが文字列として取得できる。
Cookieの有効期限
Cookieの有効期限は、expires属性かmax-age属性で指定できる。（ただしmax-age属性は新しい属性で、サポート状況が怪しいので、expires属性を使う方がよいだろう。）
HTTPレスポンスヘッダーで保存する場合：
Set-Cookie: a=apple; path=/; expires=Wed, 21 Oct 2015 07:28:00 GMT
JavaScriptで保存する場合：
document.cookie = 'a=appple; path=/; expires=Wed, 21 Oct 2015 07:28:00 GMT';
expires属性もmax-age属性も指定されていないCookieは、ブラウザを終了したら削除される。そのようなCookieをセッションCookieと呼ぶ。
httponly属性
次のように、CookieをHTTPレスポンスヘッダーで送るときにhttponly属性を付けると、そのCookieはJavaScriptからはアクセスできなくなる。
Set-Cookie: a=apple; httponly; path=/
httponly属性により、悪意のあるJavaScriptからCookieを守ることができる。
サードパーティCookie
昨今よく聞くサードパーティCookieとは、表示中のページから別ドメインのリソースを読み込むときに送受信されるCookieのことである。
サードパーティCookieではない例
例えば、http://my-domain/に
<script src="http://their-domain/setcookie.js"></script>
とあり、http://their-domain/setcookie.jsに
document.cookie = 'a=apple; path=/';
とあったとする。
http://my-domain/を表示すると、a=appleというCookieがmy-domainに関連付けられて保存される。
a=appleというCookieを保存したのは別ドメインにあるJavaScriptだが、a=appleは表示中のページのドメインと関連付けられ、別ドメインには送られない。よって、a=appleはサードパーティーCookieではない。
サードパーティCookieの例
例えば、http://my-domain/からhttp://their-domain/setcookie.jsを読み込んだとき、次のHTTPレスポンスヘッダーが返ってきたとする。
Set-Cookie: id=12345; path=/
このとき、id=12345というCookieがtheir-domainに関連付けられて保存される。このCookieは今後、http://my-domain/からhttp://their-domain/setcookie.jsを読み込むときも、http://your-domain/からhttp://their-domain/setcookie.jsを読み込むときも、HTTPリクエストヘッダーでtheir-domainのサーバーに送られるであろう。これがサードパーティーCookieである。
このサードパーティーCookieとリファラーなどにより、ユーザーの行動を追跡することが可能である。