search
LoginSignup
73
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

株式会社ビットエー Advent Calendar 2017 Day 5

posted at

Cookieの基本

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とリファラーなどにより、ユーザーの行動を追跡することが可能である。

参考文献

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
What you can do with signing up
73
Help us understand the problem. What are the problem?