cookie
More than 1 year has passed since last update.

Cookieとは

Cookieとは、ブラウザに保存される、ドメインと関連付けられたkey-valueペアのことである。

Cookieを保存する方法

ブラウザにCookieを保存する方法は2つある。

  • HTTPレスポンスヘッダーで保存する方法
  • JavaScriptで保存する方法

HTTPレスポンスヘッダーで保存する方法

Set-Cookie HTTPレスポンスヘッダーでCookieを送ることで、ブラウザにCookieを保存できる。次の例ではa=appleb=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=appleb=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とリファラーなどにより、ユーザーの行動を追跡することが可能である。

参考文献