Cookieって何？

# はじめに
Cookieを実装するにあたって得た基本的な知識をまとめた記事です。

# Cookieとは?
Cookieは、Webサーバーがクライアント（ブラウザ）に保存を依頼する小さなテキストファイルです。
ブラウザは、Cookieを保存したり、新しいCookieを作成したり、既存のCookieを変更したり、後でリクエストして同じサーバーにヘッダーとして送り返すことがあります。

## 使用目的
- **セッション管理**:
ユーザーのサインインステータス、ショッピングカートの内容、ゲームのスコア、またはサーバーが覚えておく必要があるその他のユーザーセッション関連の詳細。
- **パーソナライゼーション**:
表示言語やUIテーマなどのユーザー設定。
- **トラッキング**:
ユーザーの行動の記録と分析。

## Cookieの特徴

- **サイズ制限**: 
通常4KB程度
- **有効期限**: 
一時的（セッションCookie）または永続的に設定可能
- **セキュリティオプション**: 
HTTPSのみ、HttpOnly、Secure属性などでセキュリティを強化できる

## Set-Cookieの中身
`Set-Cookie`は、サーバーからブラウザに送信されるヘッダーで記載された、Cookie設定命令です。
複数のパラメータで詳細な制御が可能になっています。

### 基本構文
`name=value`のセットでCookieの名前と値を指定しています。
```bash
Set-Cookie: name=value; [属性1]; [属性2]; ...
```
### 主要属性
#### 1. Expires
- Cookieの有効期限を日付形式で設定し、その日時を過ぎると自動的に削除される
- 例: `Expires=Wed, 21 Oct 2024 07:28:00 GMT`


#### 2. Max-Age

- Cookieの有効期間を秒単位で指定する方式
- 例: `Max-Age=3600`（1時間有効）


#### 3. Domain

- Cookieが有効なドメインを指定
- サブドメインへの共有も制御可能
- 例: `Domain=example.com`


#### 4. Path

- Cookieが有効なWebサイト上のパスを制限
- 例: `Path=/admin`（管理画面のみ）


#### 5. Secure

- HTTPS接続の場合のみCookieを送信
- セキュリティ向上に貢献
- 例: `Secure` (実装では`true` `false`で記載することも)

#### 6. HttpOnly

- クライアントサイドスクリプト（JavaScript）からのアクセスを禁止
- XSS（クロスサイトスクリプティング）対策に有効
- 例: `HttpOnly` (実装では`true` `false`で記載することも)


#### 7. SameSite

- クロスサイトリクエストでのCookie送信を制御
- セキュリティとプライバシー保護に重要
- 例:
- `SameSite=Strict`: 同一サイト内のみ送信
- `SameSite=Lax`: トップレベルナビゲーションで送信
- `SameSite=None`: あらゆる状況で送信（Secureと併用必須）

:::note info
### セッションCookie
`1`,`2`のどちらも使っていないCookieをセッションCookieと呼びます。

**MDN Web Docsでは以下のように説明されています**
> 現在のセッションが終了すると削除されます。ブラウザは「現在のセッション」の終了時期を定義し、再起動時にセッションの復元を使用するブラウザもあります。これにより、セッションクッキーは無期限に持続する可能性があります。
:::


### 実際の設定例
```
Set-Cookie: sessionId=abc123; 
            Expires=Wed, 21 Oct 2024 07:28:00 GMT; 
            Domain=example.com; 
            Path=/; 
            Secure; 
            HttpOnly; 
            SameSite=Strict
```
この例では、`sessionId`という名前のCookieに対して、有効期限、ドメイン、パス、セキュリティ設定を指定したものになります。


## Cookieの送受信の仕組み

1. クライアントがWebサーバーにリクエストを送信
2. サーバーがレスポンスヘッダーでSet-Cookieを使用してCookieを設定
3. ブラウザがCookieを保存
4. 次回のリクエスト時にCookieヘッダーでサーバーに送信

# 具体的なユースケース

### 1. ユーザー認証におけるCookieの利用
```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant WebServer
    participant AuthServer

    User->>Browser: ログイン情報を入力
    Browser->>WebServer: ログインリクエスト
    WebServer->>AuthServer: 認証確認
    AuthServer-->>WebServer: 認証成功
    WebServer->>Browser: Set-Cookie: sessionID
    Browser->>WebServer: 以降のリクエスト (Cookie付き)
    WebServer->>AuthServer: セッション検証
    AuthServer-->>WebServer: 有効なセッション
    WebServer-->>Browser: リソースを返却
```

### 2. ショッピングカートにおけるCookieの利用
```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant WebServer
    participant Database

    User->>Browser: 商品をカートに追加
    Browser->>WebServer: 商品追加リクエスト
    WebServer->>Database: 一時的にカート情報を保存
    WebServer->>Browser: Set-Cookie: cartID
    Browser->>WebServer: その後のリクエスト
    WebServer->>Database: カート情報の取得と更新
    WebServer-->>Browser: カート内容の表示
```

### 3. ユーザー設定におけるCookieの利用(言語設定)
```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant WebServer

    User->>Browser: 言語設定を変更
    Browser->>WebServer: 設定変更リクエスト
    WebServer->>Browser: Set-Cookie: language=ja
    Browser->>WebServer: その後のページリクエスト
    WebServer-->>Browser: 日本語でコンテンツ表示
```

# 参考

https://qiita.com/7968/items/ce03feb17c8eaa6e4672#cookieって何

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies