備忘録的プログラミングリファレンス

Cookie について

ブラウザ上に記録できるデータ Cookieについて

　Cookie とはブラウザ上に読み書きできる小さな記録を残す方法です。

　web上では、クライアントは特定できない仕組みになっているためにサーバーは誰から通信されているかを知ることができません。それをCookieに記録したユーザIDやパスワードからユーザーを特定することができます。
　ネットショップの買い物状況を記録したり、前回の処理の続きもできます。このような現在の状況を記録し、その内容を反映できる方式をステートフルといいます。

　CookieはサーバーサイドからHTTPヘッダーにそのデータを含めてクライアント（ブラウザ）に送信します。クライアントは、サーバーから送られたHTTPヘッダーにあるCookieを記録します。

　Cookieには有効期限の設定があり、有効期限内はクライントに保存されます。有効期限が設定されていないと、ブラウザの終了と共に削除されます。

　Cookieには以下の特徴があります。

  • Cookieはクライアントに保存され、ステートフルなサービスが可能
  • HTTPヘッダーに含まれる
  • 有効期限がなければブラウザの終了時に削除、有効期限内は保存される
  • サイズは4KB、１サーバーにつき２０コ、合計で３００コ保存できる

　Cookie の他にセキュリティ上の問題や記録できる容量が小さいという欠点を解消するために、Web Storageという一時記録方法もあります。

- ad -

記録された Cookie の確認方法

　ブラウザに記録されている Cookie は確認することや削除することができます。

　例えば Google Chrome では、メニュー → その他のツール → デベロッパー ツールで開発用ツールを開く。

　開発ツールのタブメニューでApplicationの左に表示される縦メニューの Storage のCookieを開いてください。

　該当するドメイン名からそのドメイン名で保存されているクッキーが表示されます。

Cookieの記録方法

　ブラウザ上にCookieを記録させる方法にはいくつかあります。HTMLタグ、httpdヘッダーデータ、JavaScritと使った方法があります。
　書き込みや読み込み時には、エンコードが必要になる場合があります。

HTMLタグで

<meta http-equiv="Set-Cookie" content="～">

httpdヘッダー

　CGIなどに編集します。

print "Content-type: text/html\n";
print "Set-Cookie: ～\n";
print "\n";

Javascript

document.cookie = "～";
クッキーの設定（ id が example で有効期間が３時間）
document.cookie = "id=example; max-age=10800;"

Cookieの値

　"～"の内容は、以下のようにします。

NAME=値; expires=値; domain=値; path=値; secure
パラメータ意味
NAME=値 Cookie を個々に識別するための名称とその値。NAME は任意で必須、値は空もあり。名称は制御文字、空白、タブ、()<>@,;:\"/[]?={}を除いたASCII文字。
値に日本語がある場合はとくにURLエンコードをした方がよい。 要件が満たされた値によってはURLエンコード、デコードすると思ったものと違うときがある。
expires=値 Cookie の有効期限。非推奨。 
Wed, 1-Jan-2020 00:00:00 GMT
有効期限が過ぎるとCookieを削除する。
Max-Age=値 Cookie の有効期限、秒数で指定。ゼロまたは負の値は直ちに期限切れに。ExpiresとMax-Ageの両方が設定されたら、Max-Ageを優先。
domain=値 Cookieの有効なドメインの範囲。省略した場合はCookieを発行したホストのドメン（www.***.comなど）になります。
path=値 Cookieの有効なパス（URL）の範囲。省略した場合はCookieを発行したパスになる。
secure SSL通信時のみ有効になる。URLにHTTPSとなる場合に有効。HTTPではやりとり不可。
sameSite=[　'Strict' | 'Lax' | 'None' ] 他のサイトでの Cookie の利用範囲。
'Strict' が指定されたクッキーは他のサイトで利用できない。
'Lax' は GET を利用時は他のサイトでもクッキーが利用できる。POST は不可。
'None'は従来どおりで規制がない。
記述例 
Set-Cookie: NAME="value"; expires=Wed, 1-Jan-2020 00:00:00 GMT; domain=www.***.com; path=/; secure

Cookieの取得方法

　Cookieの取得は、JavaScriptによって取得することもできます。Cookieの取得は、主にサーバーで行うという前提があるためにサーバー上のCGIなどで取得する方法の説明が多いです。

CGIなど

print "$ENV{'HTTP_COOKIE'}\n";

JavaScript

document.cookie

　値については、「Cookieの値」を参照のこと。

Cookieの削除方法

　Cookieの削除は、有効期間 Max-Age 値を 0 にします。 ここでは、JavaScriptによって削除する方法を紹介します。

JavaScript

document.cookie = "クッキーの名称（NAME）=; max-age=0;"
クッキーの削除
document.cookie = "id=; max-age=0;"

　ただし、クッキーを個別化する、最初の NAME の他に domain や path といった値が一致していないと同じクッキーとは見なさないようです。
　JavaScript からは、SameSite の値が 'None' でなければ値の変更ができないようです。

　他の方法で有効期限 expires 値を過去に指定する方法が紹介されていることが多いですが、現在は日付けを指定するとセッションの間はクッキーを保持するという設定になるようです。

過去の日付けによるクッキーの削除
document.cookie = "クッキーの名称=; expires='1970-12-31T23:59:59Z';"

　値については、「Cookieの値」を参照のこと。

エンコードとデコード

　Cookieはどのサーバーでも参照できるようにするためにMIME形式で保存することが望ましいです。

　いろいろな環境下で読み書きが行われる場合には、記録時にはエンコード、読み込み時にはデコードする必要があります。

Perlなど

エンコード

$xx =~ s/(\W)/sprintf("%%X", unpack("C", $1))/eg;

デコード

$xx =~ s/%([0-9A-Fa-f][0-9A-Fa-f])/pack("C", hex($1))/eg;


JavaScript

エンコード

xx = escape(xx);

デコード

xx = unescape(xx);

- ad -

関連（Related）