認証情報をローカルストレージに安全に保存するテクニック

ローカルストレージとは何か

ローカルストレージ（Local Storage）は、複数のウィンドウやタブにまたがって利用でき、セッションが終了してもデータが保持されるように設計された、ブラウザ標準の保存領域です。Webアプリケーションの世界では、パフォーマンス向上の目的で、ユーザーが作成したドキュメント一式やメールボックスの内容など、数メガバイト規模のユーザーデータをクライアント側に保持したいというニーズがよくあります。

認証情報の保存における課題

ただし、ユーザー名やパスワードといった認証情報（クレデンシャル）をそのままローカルストレージに格納すると、XSS（クロスサイトスクリプティング）などの攻撃によって情報が盗み出される危険性があります。そこで役立つのが、以下に紹介する実践的なテクニックです。

ランダムトークンを活用する保存方法

ポイントは、本来の認証情報を直接保存せず、代わりにランダムなトークンを使用することです。具体的な手順は次の通りです。

1. ログイン成功時にトークンを生成する： ユーザーの認証情報とは一切関連しない、完全にランダムな文字列を作成します。
2. データベースに記録する： 生成したトークンをサーバー側のデータベースに保存します。この際、有効期限を必ず設定してください。
3. クライアントに渡す： トークンをJavaScript経由で渡し、ローカルストレージに格納します。

ログイン状態の判定ロジック

以降のリクエストでは、ローカルストレージ内のトークンがデータベース上の記録と一致し、かつ有効期限が切れていないことを確認できた場合にのみ、ユーザーを「ログイン済み」とみなします。

この手法のメリット

この仕組みを採用すれば、仮にローカルストレージの内容が第三者に閲覧されても、露出するのは使い捨てのランダムトークンだけです。ユーザー名やパスワードといった本物の認証情報が漏れる心配はありません。さらに、有効期限を設けることで、万一トークンが流出した場合でも被害の範囲を最小限に抑えることができます。