# JWTトークンをセキュアにブラウザに保存する方法（cookie vs localStorage）

## 目次
1. はじめに
2. JWTトークンとは
   2.1. JWTの構造
   2.2. JWTの使用例
3. JWTトークンの保存方法
   3.1. Cookie
   3.2. localStorage
4. セキュリティの考慮点
   4.1. XSS攻撃
   4.2. CSRF攻撃
5. Cookie vs localStorageの比較
   5.1. セキュリティ
   5.2. 利便性
6. セキュアな保存方法の推奨
   6.1. HttpOnlyとSecure属性
   6.2. SameSite属性
7. まとめ

## 1. はじめに
Webアプリケーションのセッション管理として、JSON Web Token (JWT) が広く利用されています。JWTをブラウザに保存する方法として、cookieやlocalStorageが一般的ですが、それぞれに利点とリスクがあります。本記事では、JWTの基礎をおさらいし、セキュアにブラウザに保存する方法と、それに伴うセキュリティ上の考慮点について解説します。

## 2. JWTトークンとは
### 2.1. JWTの構造
JWTはエンコードされたJSONオブジェクトであり、Header、Payload、Signatureの3つの部分から構成されています。以下にその構造の例を示します。

![img](/mosaic-code.jpg)

### 2.2. JWTの使用例
JWTは、認証情報やユーザー情報を保持するために利用されます。フロントエンドとバックエンドの間でステートレスな認証を可能にし、リクエストヘッダーにトークンを含めることで、ユーザーのセッションを管理します。

## 3. JWTトークンの保存方法
JWTトークンをブラウザに保存する際、CookieとlocalStorageの2つの方法があります。

### 3.1. Cookie
Cookieはブラウザで使われる小さなデータで、HTTPリクエストに自動的に含まれるため利便性が高いです。

![img](/mosaic-code.jpg)

### 3.2. localStorage
localStorageはJavaScriptのAPIを通じて利用可能な長期的なデータストレージです。

![img](/mosaic-code.jpg)

## 4. セキュリティの考慮点
JWTの保存にはセキュリティのリスクが伴います。主にXSSとCSRFが問題となります。

### 4.1. XSS攻撃
XSS攻撃は、悪意のあるJavaScriptコードが実行され、localStorageやブラウザのデータにアクセスされるリスクがあります。

### 4.2. CSRF攻撃
CSRF攻撃は、ユーザーのセッションを含むリクエストが第三者によって送信される状況で悪用されます。Cookiesはこの攻撃に特に脆弱です。

## 5. Cookie vs localStorageの比較
### 5.1. セキュリティ
- **Cookies**: HttpOnly属性を使用することで、JavaScriptからのアクセスを防ぐことができます。
- **localStorage**: XSS攻撃に対して脆弱であり、セキュリティに課題があります。

### 5.2. 利便性
- **Cookies**: 自動的にHTTPリクエストに含まれるため、サーバーとのAPI通信において利便性が高いです。
- **localStorage**: 各リクエストに対して手動でトークンをヘッダーに含める必要があります。

## 6. セキュアな保存方法の推奨
### 6.1. HttpOnlyとSecure属性
JWTをCookieに保存する際は、HttpOnlyとSecure属性を使用することで、JavaScriptによるアクセスを防ぎつつHTTPS通信を必須にします。

### 6.2. SameSite属性
SameSite属性を設定することで、クロスサイトからのリクエストに対する防御策となり、CSRF攻撃を防ぐことができます。

## 7. まとめ
JWTのセキュアな保存には、Cookieを使用しHttpOnly、Secure、SameSite属性を設定することが推奨されます。これにより、XSSおよびCSRF攻撃に対する防御を強化します。アプリケーションのセキュリティを確保するためには、開発段階からこれらのセキュリティ対策を取り入れるべきです。 [cv:issue_marketplace_engineer]

# JWTトークンをセキュアにブラウザに保存する方法（cookie vs localStorage）

## 目次
1. はじめに
2. JWTトークンとは
   2.1. JWTの構造
   2.2. JWTの使用例
3. JWTトークンの保存方法
   3.1. Cookie
   3.2. localStorage
4. セキュリティの考慮点
   4.1. XSS攻撃
   4.2. CSRF攻撃
5. Cookie vs localStorageの比較
   5.1. セキュリティ
   5.2. 利便性
6. セキュアな保存方法の推奨
   6.1. HttpOnlyとSecure属性
   6.2. SameSite属性
7. まとめ

## 1. はじめに
Webアプリケーションのセッション管理として、JSON Web Token (JWT) が広く利用されています。JWTをブラウザに保存する方法として、cookieやlocalStorageが一般的ですが、それぞれに利点とリスクがあります。本記事では、JWTの基礎をおさらいし、セキュアにブラウザに保存する方法と、それに伴うセキュリティ上の考慮点について解説します。

## 2. JWTトークンとは
### 2.1. JWTの構造
JWTはエンコードされたJSONオブジェクトであり、Header、Payload、Signatureの3つの部分から構成されています。以下にその構造の例を示します。

```plaintext
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
```

### 2.2. JWTの使用例
JWTは、認証情報やユーザー情報を保持するために利用されます。フロントエンドとバックエンドの間でステートレスな認証を可能にし、リクエストヘッダーにトークンを含めることで、ユーザーのセッションを管理します。

## 3. JWTトークンの保存方法
JWTトークンをブラウザに保存する際、CookieとlocalStorageの2つの方法があります。

### 3.1. Cookie
Cookieはブラウザで使われる小さなデータで、HTTPリクエストに自動的に含まれるため利便性が高いです。

```javascript
document.cookie = "token=your_jwt_token; Secure; HttpOnly; SameSite=Strict";
```

### 3.2. localStorage
localStorageはJavaScriptのAPIを通じて利用可能な長期的なデータストレージです。

```javascript
localStorage.setItem('token', 'your_jwt_token');
```

## 4. セキュリティの考慮点
JWTの保存にはセキュリティのリスクが伴います。主にXSSとCSRFが問題となります。

### 4.1. XSS攻撃
XSS攻撃は、悪意のあるJavaScriptコードが実行され、localStorageやブラウザのデータにアクセスされるリスクがあります。

### 4.2. CSRF攻撃
CSRF攻撃は、ユーザーのセッションを含むリクエストが第三者によって送信される状況で悪用されます。Cookiesはこの攻撃に特に脆弱です。

## 5. Cookie vs localStorageの比較
### 5.1. セキュリティ
- **Cookies**: HttpOnly属性を使用することで、JavaScriptからのアクセスを防ぐことができます。
- **localStorage**: XSS攻撃に対して脆弱であり、セキュリティに課題があります。

### 5.2. 利便性
- **Cookies**: 自動的にHTTPリクエストに含まれるため、サーバーとのAPI通信において利便性が高いです。
- **localStorage**: 各リクエストに対して手動でトークンをヘッダーに含める必要があります。

## 6. セキュアな保存方法の推奨
### 6.1. HttpOnlyとSecure属性
JWTをCookieに保存する際は、HttpOnlyとSecure属性を使用することで、JavaScriptによるアクセスを防ぎつつHTTPS通信を必須にします。

### 6.2. SameSite属性
SameSite属性を設定することで、クロスサイトからのリクエストに対する防御策となり、CSRF攻撃を防ぐことができます。

## 7. まとめ
JWTのセキュアな保存には、Cookieを使用しHttpOnly、Secure、SameSite属性を設定することが推奨されます。これにより、XSSおよびCSRF攻撃に対する防御を強化します。アプリケーションのセキュリティを確保するためには、開発段階からこれらのセキュリティ対策を取り入れるべきです。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

JWTトークンをセキュアにブラウザに保存する方法（cookie vs localStorage）

目次

続きを読むには単価診断を受けてください（30秒）