ユーザー データを localStorage に保存しても安全ですか?

Web アプリケーションを開発する場合、エクスペリエンスを向上させたり、状態の永続性を維持したりするために、ユーザー データをブラウザーに保存する必要がよくあります。しかし、これに localStorage を使用するのは安全でしょうか?リスク、ベストプラクティス、安全な代替手段を見てみましょう。

localStorage とは何ですか?
localStorage は、クライアント側でデータを簡単かつ永続的に保存できるブラウザ API です。 sessionStorage とは異なり、localStorage に保存されたデータは、ユーザーがブラウザを閉じて再度開いた後でも引き続きアクセスできます。

これは実用的なツールですが、そのシンプルさにはセキュリティ上の制限がいくつかあります。

シナリオ: ユーザー認証
Supabase を使用してユーザーを認証するアプリケーションがあると想像してください。ログイン後、次の例のようにユーザー情報をブラウザに保存したいとします。

async function checkAuth() {
  try {
    const { data, error } = await supabase.auth.getUser()
    if (error) throw error

    if (data.user) {
      user.value = data.user
      localStorage.setItem('user', JSON.stringify(data.user)) // Armazenando o usuário
      console.log('Usuário autenticado:', data.user)
    } else {
      localStorage.removeItem('user')
    }
  } catch (error) {
    console.error('Erro ao verificar autenticação:', (error as Error).message)
  }
}

アイデアは単純そうです。ユーザー オブジェクトを localStorage に保存して、後で使用できるようにします。しかし、このアプローチは安全なのでしょうか?

localStorage を使用するリスク

1. 悪意のあるスクリプトへの暴露 (XSS) localStorage を使用する場合の最大のセキュリティ問題は、ページ上で実行されている任意のスクリプトからアクセスできることです。これには、XSS (クロスサイト スクリプティング) 攻撃を通じて Web サイトに挿入される可能性のある悪意のあるスクリプトが含まれます。

たとえば、攻撃者が次のコードをページに挿入できた場合:

console.log(localStorage.getItem('user'))

ユーザーは、ユーザーに関する機密情報を含む、保存されたデータにアクセスできます。

1. データは暗号化されません
   localStorage はデータをプレーン テキストとして保存します。これは、ユーザーのデバイスにアクセスできる人は誰でもブラウザ コンソールを開いて、保存された情報を直接表示できることを意味します。

2. 自動有効期限なし
   Cookie とは異なり、localStorage にはデータを自動的に期限切れにする組み込みメカニズムがありません。これにより、古い情報や期限切れの情報が不必要に保存される可能性があります。

より安全な代替手段

1. Superbase セッションを信頼する Supabase はすでに、セキュア Cookie と JWT トークンを通じて認証セッションを管理しています。ユーザー オブジェクトを localStorage に保存する必要はありません。

次のメソッドを使用していつでもユーザー セッションを確認できます。

const { data, error } = await supabase.auth.getUser()

1. セッションストレージを使用する
   ブラウザにデータを保存する必要がある場合は、sessionStorage の使用を検討してください。ブラウザーのタブまたはウィンドウが開いている間のみデータが保持されます。これにより、デバイスが物理的に盗まれた場合に危険にさらされるリスクは軽減されますが、XSS からは保護されません。

2. 機密性のないデータのみを保存
   localStorage での永続化が必要な場合は、アクセス トークンや個人データなどの機密情報を保存しないでください。ユーザー識別子などの一般的な情報のみを保存します:
   

async function checkAuth() {
  try {
    const { data, error } = await supabase.auth.getUser()
    if (error) throw error

    if (data.user) {
      user.value = data.user
      localStorage.setItem('user', JSON.stringify(data.user)) // Armazenando o usuário
      console.log('Usuário autenticado:', data.user)
    } else {
      localStorage.removeItem('user')
    }
  } catch (error) {
    console.error('Erro ao verificar autenticação:', (error as Error).message)
  }
}

1. XSS に対する保護を実装する XSS リスクを軽減するには、次のセキュリティ対策を実装してください:

厳格なコンテンツ セキュリティ ポリシー (CSP) を使用して、不正なスクリプトを防止します。
すべてのユーザー入力を検証し、サニタイズします。
依存関係とライブラリを常に最新の状態に保ちます。

1. データの暗号化 localStorage を使用することが不可欠な場合は、データを保存する前に暗号化できます。これにより、セキュリティ層が追加されますが、リスクを完全に排除するわけではありません。

CryptoJS を使用した例:

console.log(localStorage.getItem('user'))

注意: 暗号化キーが公開されるとセキュリティが危険にさらされるため、必ず暗号化キーを保護してください。

結論
localStorage はブラウザにデータを保存するための実用的なツールですが、機密データには理想的ではありません。主な推奨事項は次のとおりです:

Supabase によって管理されるセッションを信頼します。
機密情報を localStorage に保存しないでください。
XSS 保護などの適切なセキュリティ対策を実装します。
これらの実践により、データを攻撃から保護しながら、ユーザー エクスペリエンスを流動的にすることができます。

どう思いますか？プロジェクトで localStorage を使用していますか?コメントであなたの経験を共有してください!

以上がユーザー データを localStorage に保存しても安全ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。