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

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

# Cookie について

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

[HTTP cookie](https://ja.wikipedia.org/wiki/HTTP_cookie)

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

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

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

# 仕様について

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

[Set-Cookie](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/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 リクエストヘッダーを指定します。
書式や詳細は以下。

[Cookie](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cookie)

先程記載した `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番ポートで待機
```

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

https://nodejs.org/api/http.html#http_response_setheader_name_value

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

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

+ type = ninja
+ language = javascript

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

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

```bash
$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 が設定されている事が分かります。

![Screen Shot 2019-07-21 at 14.13.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20193/984a7b95-1fb7-acf1-633e-f4b3f700df9d.png "Screen Shot 2019-07-21 at 14.13.54.png")

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

![Screen Shot 2019-07-21 at 14.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20193/9b729d54-a949-5982-f405-61b77ef5ca19.png "Screen Shot 2019-07-21 at 14.15.49.png")

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

![Screen Shot 2019-07-21 at 14.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20193/08679030-7db0-a0b3-2a62-12e91887c9ca.png "Screen Shot 2019-07-21 at 14.18.09.png")

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