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

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

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

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

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'))

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

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

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

より安全な代替手段

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

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

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

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

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

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 に対する保護(hù)を?qū)g裝する XSS リスクを軽減するには、次のセキュリティ対策を?qū)g裝してください:

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

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

CryptoJS を使用した例:

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

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

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

Supabase によって管理されるセッションを信頼します。
機(jī)密情報(bào)を localStorage に保存しないでください。
XSS 保護(hù)などの適切なセキュリティ対策を?qū)g裝します。
これらの実踐により、データを攻撃から保護(hù)しながら、ユーザー エクスペリエンスを流動(dòng)的にすることができます。

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

以上がユーザー データを localStorage に保存しても安全ですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。