Cookie について確認・検証した時のメモ。

Cookie について

Wikipedia の内容が分かりやすい気がします。

HTTP はステートレスなプロトコルである
一方、ショッピングサイトのカートなど同じユーザーが操作を行った場合、サーバー側ではアクセスしユーザーを特定し、カート一覧を表示するというユースケースが有る
上記を解消する方法の一つとしては Cookie がある
Cookie では次のようにサーバとクライアント間の状態を管理

1.ウェブサーバがウェブブラウザにその状態を区別する識別子をHTTPヘッダに含める形で渡す。
2.ブラウザは次にそのサーバと通信する際に、与えられた識別子をHTTPヘッダに含めて送信する。
3.サーバはその識別子を元にコンテンツの内容をユーザに合わせてカスタマイズし、ブラウザに渡す。必要があれば新たな識別子もHTTPヘッダに含める。
以降2、3の繰り返し。

Cookie でデータを直接扱うよりもセッション ID を実装する手段として使うことが多い。この場合、実際のデータは、セッション ID をキーとしてサーバが保持する(セッション ID をサーバーで生成し、関連する情報はサーバー側で保持する。例えばユーザーごとにセッション ID を生成し、関連するショッピングカート情報は DB に保持するなど）

仕様について

Cookie を設定した場合、サーバー側で HTTP レスポンスで Set-Cookie ヘッダーを指定します。
書式や詳細は以下。

Set-Cookie

key=value 形式で cookie-name=cookie-valueを指定します。
もし、対象の Cookie について追加で有効期限を設けたい場合、Expires を指定します。
例えば以下のように書くことで「type=ninja」という Cookie を設定します。

Set-Cookie: type=ninja; Expires=Tue, 19 Jan 2038 03:14:07 GMT

Set-Cookieが設定された場合、必要に応じてブラウザは Cookie HTTP リクエストヘッダーを指定します。
書式や詳細は以下。

先程記載した Set-Cookie が設定された場合、HTTP リクエストの際には以下のように設定されます。

Cookie: type=ninja

検証

Node.js を使って以下のコードを書きました。
Node.js のバージョンは v10.0.0です。

app.js

var http = require('http');

http.createServer(function (req, res) {

    res.setHeader('Content-Type', 'text/html');
    res.setHeader('Set-Cookie', ['type=ninja; Expires=Tue, 19 Jan 2038 03:14:07 GMT', 'language=javascript']);

    res.end('Hello World\n');

}).listen(80); // 127.0.0.1の80番ポートで待機

ヘッダーの書き方は以下を参考にしています。

response.setHeader(name, value)
response.setHeader('Set-Cookie', ['type=ninja', 'language=javascript']);

この場合、以下の2つの Cookie を設定しています。

type = ninja
language = javascript

そして「type = ninja」の方には Expires を設定し、有効期限を設定しています。

実際にリクエストしてみます。

$curl http://13.230.4.195/ -v
*   Trying 13.230.4.195...
* TCP_NODELAY set
* Connected to 13.230.4.195 (13.230.4.195) port 80 (#0)
> GET / HTTP/1.1
> Host: 13.230.4.195
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Content-Type: text/html
< Set-Cookie: type=ninja; Expires=Tue, 19 Jan 2038 03:14:07 GMT
< Set-Cookie: language=javascript
< Date: Sun, 21 Jul 2019 05:06:04 GMT
< Connection: keep-alive
< Content-Length: 12
<
Hello World
* Connection #0 to host 13.230.4.195 left intact

HTTP レスポンスでSet-Cookie が設定されている点が確認出来ました。

次に、ブラウザ(Chrome)でも確認してみます。
DeveloperTool の Network 画面を使って HTTP リクエスト・レスポンスの状況を確認します。

初回のリクエスト時には以下のようになっており、HTTP レスポンスで Cookie が設定されている事が分かります。

再度同じ URL にアクセスしてみます。

今度は HTTP リクエストで Cookie が設定されています。
具体的な HTTP リクエストの設定内容 Headers の内容から確認します。

Cookie HTTP リクエストヘッダーにおいて設定した Cookie の情報が正しくサーバーに送信されている点が確認出来ました。

Cookie についてについて確認・検証した

Cookie について

仕様について

検証