【Cookieの属性】「設定方法」などを分かりやすく解説！

この記事では『Cookieの属性』について、以下の内容を説明します。

Cookieに設定することができる属性の種類
Cookieに設定することができる属性の特徴と設定方法

サンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Cookieに設定することができる属性

Cookieに書き込む際には、有効期限やパスなどの属性も一緒に書き込むことができます。

Cookieに書き込むことができる属性とその意味を以下に示しています。

属性	意味
`Expires=DATE`	Cookieの有効期限(日付)
`Max-Age=DATE`	Cookieの有効期限(秒数)
`Path=PATH`	Cookieを送るパス
`Domain=DOMAIN`	Cookieを送るドメイン
`Secure`	HTTPS通信をしている時だけCookieが送信されるようにする
`HttpOnly`	JavaScriptから`document.cookie`を使って操作できないようにする
`SameSite=VAL`	他サイト間リクエスト時にCookieを送るかどうかを決める

Cookieに値を書き込む際に、属性を設定する場合、以下に示すようにセミコロン(;)の後に、属性名=属性値を記述します。

document.cookie = 'name=Taro; Max-Age=100; Domain=example.com';

上記のサンプルコードでは、Max-Age属性を用いて、Cookieの有効期限を100秒に設定しています。また、Domain属性を用いてexample.comドメインに属するページでのみアクセス可能にしています。

補足

document.cookieを使ってWebブラウザに保存されているCookieを取得しても、Cookieに設定されている属性を取得することはできません。例えば、以下に示すようにMax-Age属性をつけて値を書き込んでも、Cookieを取得する際には、name=Taroのみが取得されます。

document.cookie = 'name=Taro; Max-Age=100';
console.log(document.cookie);
// ログ出力
// name=Taro

Expires属性とMax-Age属性

Cookieに書き込む際に、有効期限を日付または秒数で設定することができます。有効期限を設定しない場合、Cookieの有効期限はセッション終了までとなります。

Expires属性

有効期限を日付で設定する場合にはExpires属性を使用します。

Expires属性を使用すると、特定の日時を設定して、その時刻にCookieが自動的に失効するように設定できます。Expires属性の値は、'Wdy, DD Mon YYYY HH:MM:SS GMT'の形式で設定します。サンプルコードを以下に示します。

// 2023/12/31 20:00に失効するように設定
document.cookie = 'name=Taro; expires=Sun, 31 Dec 2023 20:00:00 GMT';

Max-Age属性

有効期限を秒数で設定する場合にはMax-Age属性を使用します。

Expires属性が特定の日時を設定するのに対し、Max-Age属性は現在時刻からどれくらいの秒数後にCookieが失効するかを設定します。サンプルコードを以下に示します。

// 3600秒(1時間)経過後に失効するように設定
document.cookie = 'name=Taro; Max-Age=3600';

例えば、有効期限を3600秒(1時間)にすると、Cookie設定後、3600秒間(1時間)有効となり、その後自動的に無効になります。

Path属性

Cookieに書き込む際に、Path属性を用いればCookieを送信するパスを設定することができます。Path属性を用いない場合、Cookieの送信先のパスは現在のパスになります。Path属性を使用するとWebサイトがどのページでCookieを利用できるかをより細かくコントロールすることができます。

Path属性の役割について詳しく説明します。

Webブラウザに保存されたCookieは、デフォルトでは、「Cookie を保存したページと同じパス」か「Cookie を保存したページより下の階層のパス」にアクセスした時に、保存されているCookieが送信されます。つまり、保存されているCookieは、元のページのパスと前方一致するパスのページでのみ送信されます。

例えば、www.example.com/foo/index.htmlでCookieが保存された場合、このCookieは/foo/indexで始まるパスにアクセスした時のみ送信されます。

Path属性を使用すると、この動作をカスタマイズできます。Path属性には「Cookie を保存したページと同じパス」か「そのパスよりルート(トップレベルのディレクトリ)に近いパス」を指定することができます。これにより、指定されたパスと前方一致するパスを持つページにアクセスしたときに、Cookieが送信されるようになります。サンプルコードを以下に示します。

document.cookie = 'name=Taro; Path=/foo';

このコードは、CookieのPath属性を/fooに設定しています。その結果、Webブラウザに保存されたCookie(ここでは、name=Taro)は/fooというパス、またはそれ以下のサブディレクトリ(例えば/foo/subpage)にアクセスしたときに送信されるようになります。

Domain属性

Cookieに書き込む際に、Domain属性を用いればCookieを送信するドメインを設定することができます。Domain属性を用いない場合、Cookieを保存したページのホスト名と同じホスト名のページにアクセスした時にだけCookieを送信します。

Domain属性の役割について詳しく説明します。

例えば、ユーザーがwww.example.com/foo/index.htmlにアクセスしてCookieを保存した場合(この例においてホスト名はwwwです)、保存されているCookieはデフォルトでwww.example.comのサブページでのみ利用可能です。つまり、www.example.com/aboutやwww.example.com/contactにアクセスした時に、保存されているCookieが送信されます。subdomain.example.comのようなサブドメインにアクセスした時にはCookieは送信されません。

Domain属性を使用すると、この動作をカスタマイズできます。Domain属性を設定することによって、指定したドメインおよびそのサブドメインに対してCookieを送信することができます。Domain属性には「Cookieを保存した特定のホスト名」か「ホスト名が属する上位ドメイン」を指定します。サンプルコードを以下に示します。

document.cookie = 'name=Taro; Domain=example.com ';

上記のサンプルコードではホスト名wwwが属している上位ドメイン(example.com)を指定しています。

このように設定することで、www.example.comだけでなく、subdomain.example.com、shop.example.com、sub.www.example.comなどexample.comを含むあらゆるサブドメインに対してもCookieが送信されるようになります。

しかし、CookieのDomain属性に完全に異なるドメインを指定することはできません。例えば、example.comのCookieにanotherdomain.comを設定することはできません。

Secure属性

Cookieに書き込む際に、Secure属性を用いればHTTPSの通信を使用しているだけCookieを送信することができます。HTTPで通信をしている場合はCookieは送信されません。サンプルコードを以下に示します。

document.cookie = 'name=Taro; Secure';

これにより、この保存されたCookie(name=Taro)はHTTPS接続時のみWebサーバーへ送信されるようになります。

HttpOnly属性

HttpOnly属性をCookieに設定すると、そのCookieはJavaScriptのdocument.cookieでアクセスできなくなります。HttpOnly属性はサーバー側でCookieを設定する際にSet-Cookie HTTPヘッダーに含めることで利用できます。

例えば、サーバーは以下のようなHTTPヘッダーをレスポンスに含めることで、HttpOnly属性を持つCookieを設定できます。

Set-Cookie: name=Taro; HttpOnly

このヘッダーがWebブラウザによって処理されると、Cookie(name=Taro)が作成され、HttpOnly属性によってそのCookieはJavaScriptからアクセスできなくなります。

補足

クライアントサイドのスクリプト(例えば、ブラウザ上で動作するJavaScript)では、HttpOnly属性を持つCookieを新しく作成したり、既存のHttpOnly属性を持つCookieを変更したりすることはできないことに注意してください。以下のサンプルコードは動作しません。

document.cookie = 'name=Taro; HttpOnly';

SameSite属性

Cookieに書き込む際に、SameSite属性を用いればWebブラウザがWebページ間でCookieをどのように扱うかを決めることができます。例えば、AというサイトからBというサイトへリンクなどを経由してアクセスした際に、ブラウザに保存されているサイトBのCookieを送信するかどうかを決めることができます。

SameSite属性に設定できる属性値はStrict, Lax, Noneです。サンプルコードを以下に示します。

document.cookie = 'name=Taro; SameSite=Strict';
document.cookie = 'id=ABC123; SameSite=None; Secure';

Strictを設定した場合
- サイトAからサイトBにリンクなどを経由してアクセスした際に、ブラウザに保存されているサイトBのCookieを送信しません。
- Strictを設定した場合、ブラウザに保存されているサイトBのCookieは完全に同一のサイト内でのリクエストでのみ送信されます。
Laxを設定した場合
- 安全なHTTPメソッド(例えば、GETやHEAD)を使用するリクエストであれば、サイトBに保存されているCookieを送信しますが、安全でないメソッド(例えば、POST)によるリクエストでは送信しません。
- これにより、サイトAからサイトBにリンクなどを経由してアクセスした場合でも、ページが読み込まれる際(例えば、商品のリストを見る時など)にはCookieが送信されますが、フォームを送信するなどのアクションを伴う場合にはCookieが送信されなくなります。
Noneを設定した場合
- サイトAからサイトBにリンクなどを経由してアクセスした際に、制限なくブラウザに保存されているサイトBのCookieを送信します。
- ただし、セキュリティ上の理由から、Noneを設定するにはSecure属性も同時に設定する必要があります。

補足

SameSite属性にいずれの設定を行った場合でも、ブラウザのアドレスバーにサイトBのURLを直接入力して、サイトBへアクセスしたような場合にはブラウザに保存されているサイトBのCookieは送信されます。
SameSite属性のデフォルト値はブラウザのバージョンによって異なりますが、2020年のアップデート以降の多くのブラウザ(例えばGoogle Chrome)では、SameSite属性が明示的に設定されていない場合、デフォルト値はLaxに設定されています。

本記事のまとめ

この記事では『Cookieの属性』について、以下の内容を説明しました。

Cookieに設定することができる属性の種類
Cookieに設定することができる属性の特徴と設定方法
- Expires属性とMax-Age属性: Cookie の有効期限を設定する
- Path属性: Cookieを送信するパスを設定する
- Domain属性: Cookieを送信するドメインを設定する
- Secure属性: HTTPSの通信を使用しているだけCookieを送信する
- HttpOnly属性: JavaScriptからCookieにアクセスできないようにする
- SameSite属性: サイト間リクエスト時にCookieを送るかどうかを設定する

お読み頂きありがとうございました。