Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Cookieの基本

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

参考文献

yassh
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away