localStorage vs Cookie vs IndexedDB：JWT保存場所の比較

2024-04-02

ReactJSでlocalStorageにJWTを保存することは安全ですか？

localStorageとは？

ブラウザが提供するキーと値のペアを保存するAPIです。データは永続的に保存され、ブラウザが閉じても消えません。

JWTとは？

JSON Web Tokenの略で、ログインなどの認証情報を安全に伝送するために使用されるトークンです。

localStorageにJWTを保存するメリット

簡単に実装できる
Cookieよりも安全
CSRF攻撃に強い

XSS攻撃に弱い
盗聴される可能性がある
容量が限られている

リスクと対策

XSS攻撃: 攻撃者がユーザーのブラウザに悪意のあるJavaScriptコードを注入し、JWTトークンを盗み出す可能性があります。対策としては、Content Security Policy (CSP) を使用して、許可されたスクリプトのみを実行するようにします。
盗聴: localStorageは暗号化されていないため、ネットワーク上の攻撃者がJWTトークンを盗聴する可能性があります。対策としては、HTTPSを使用するようにします。
容量: localStorageは容量が限られています。大きなJWTトークンを保存すると、他のデータの保存領域が不足する可能性があります。対策としては、JWTトークンを圧縮したり、必要な情報のみを保存したりします。

localStorageはJWTを保存するための便利な方法ですが、いくつかのリスクがあります。これらのリスクを理解した上で、対策を講じる必要があります。

より安全な方法としては、JWTトークンをサーバ側のセッションストレージに保存する方法があります。
具体的な実装方法は、使用するライブラリやフレームワークによって異なります。

import jwt from 'jsonwebtoken';

const localStorage = window.localStorage;

const setAuthToken = (token) => {
  localStorage.setItem('authToken', token);
};

const getAuthToken = () => {
  return localStorage.getItem('authToken');
};

const removeAuthToken = () => {
  localStorage.removeItem('authToken');
};

const isAuthenticated = () => {
  const token = getAuthToken();
  if (!token) {
    return false;
  }

  try {
    jwt.verify(token, process.env.JWT_SECRET);
    return true;
  } catch (error) {
    return false;
  }
};

export { setAuthToken, getAuthToken, removeAuthToken, isAuthenticated };

使い方

import { setAuthToken, getAuthToken, removeAuthToken, isAuthenticated } from './auth';

// ログイン時にJWTトークンを取得して保存
const login = (username, password) => {
  const token = await api.login(username, password);
  setAuthToken(token);
};

// ログアウト時にJWTトークンを削除
const logout = () => {
  removeAuthToken();
};

// 認証状態を確認
const isLoggedIn = () => {
  return isAuthenticated();
};

// ユーザー情報取得
const getUser = () => {
  const token = getAuthToken();
  const decodedToken = jwt.verify(token, process.env.JWT_SECRET);
  return decodedToken.user;
};