この記事では『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あわせて読みたい
『Cookieの操作方法(取得や削除など)』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。 続きを見る
【JavaScript】Cookieの使い方(取得や削除など)を分かりやすく解説！
あわせて読みたい
Cookieに保存されている属性は、デベロッパーツールで確認することができます。
『Google ChromeのデベロッパーツールでCookieを確認する方法』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。 続きを見る
Google ChromeのデベロッパーツールでCookieを確認する方法
それではこれからCookieに書き込むことができる各属性の意味について順番に詳しく説明します。
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が送信されなくなります。
- 安全なHTTPメソッド(例えば、
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を送るかどうかを設定する
お読み頂きありがとうございました。