セキュリティ：ストレージに保存してはいけないもの

localStorageとsessionStorageは、ユーザープロファイル内のディスクに暗号化されずにデータを保存します。ファイルシステムにアクセスできるプロセスであれば、マルウェア、バックアップツール、別のログインユーザーなど、ブラウザーを介さずに保存したすべての値を読み取ることができます。

オリジン上で実行されるすべてのスクリプトは、同じStorageを共有します。XSS攻撃の成功、侵害されたサードパーティーSDK、悪意のあるブラウザー拡張機能によって、localStorage.getItemを呼び出し、保存されたすべての値を外部へ流出させることが可能です。スクリプトごとの分離はありません。

セッションToken、JWT、リフレッシュToken、APIキーをlocalStorageに保存しないでください。攻撃者がJavaScriptを1行挿入するだけで、トークンは直ちに漏洩します。httpOnly、Secure、SameSite属性を付けたCookieを使用し、トークンにJavaScriptからアクセスできないようにしてください。

パスワードを平文、ハッシュ化、暗号化のいずれの形式であってもクライアントに保存するのは誤りです。攻撃者はハッシュ値を読み取って再利用できるため、クライアント側でハッシュ化しても役に立ちません。パスワードの処理は、bcryptのような専用のパスワードハッシュを使って、すべてサーバー側で行ってください。

PCI-DSSでは、カード番号、CVV、磁気ストライプデータ、有効期限をクライアント側ストレージに保存することが禁止されています。代わりに、Stripe、Braintree、Adyenなど、アプリケーションのオリジンに紐付いた短期間のみ有効なトークンを返すトークン化決済プロバイダーを使用してください。

政府発行のID、生年月日（年月日すべて）、住所、医療データは、規制当局（GDPR、HIPAA）や攻撃者の標的になりやすい情報です。現在のセッションに必要な情報だけを保存し、必要になった時点で再度取得し、信頼できる唯一の情報源はサーバー側に保持してください。

document.cookieを漏えいさせるXSSの脆弱性は深刻です。同じ脆弱性がトークンをlocalStorageに保存しているページに存在すると、攻撃者は保存されているすべての値を一度に取得できます。localStorageは「1つのスクリプトを侵害されると、すべてを侵害される」攻撃対象面だと考えてください。

JavaScript内にも存在する鍵で値を暗号化しても、実質的な保護にはなりません。暗号文を読み取れる攻撃者は、鍵も読み取れるからです。本当の秘密情報はサーバー側に保持し、必要に応じて再発行してください。クライアント側に永続化してはいけません。

UIの設定（テーマ、サイドバーの折りたたみ状態、言語）、機密性のない機能フラグ、フォームの下書き内容、一時的なウィザードの状態は、いずれも保存して問題ありません。これらはもともとユーザーに表示される情報であり、漏えいしてもアカウント乗っ取りにはつながらないためです。

Set-Cookie: token=...; HttpOnly; Secure; SameSite=Strictを使用して認証情報を発行してください。HttpOnlyフラグによりCookieはJavaScriptからアクセスできなくなるため、ページにほかのバグが存在していても、トークンを盗み出す大半のXSSペイロードを無効化できます。

機密情報に見えるデータをどうしてもキャッシュする必要がある場合は、保存範囲を厳密に制限してください（短いTTL、ログアウト時の消去、sessionStorageを使ったタブ終了時の削除）。さらに、厳格なContent Security Policyを適用してスクリプトの注入を防ぎ、認証済みページで実行されるすべてのサードパーティスクリプトを監査してください。

認証トークンをlocalStorageに保存することがセキュリティリスクと見なされるのはなぜですか？

Web Storageは平文で保存され、スクリプトから読み取ることができ、オリジン単位で共有されます。認証トークン、パスワード、決済データ、規制対象の個人情報を決して保存しないでください。秘密情報はhttpOnly Cookieに保持し、localStorageはユーザーに見えても問題のないUI状態に限定してください。