開發(fā) Web 應(yīng)用程序時，經(jīng)常需要在瀏覽器中存儲用戶數(shù)據(jù)以改善體驗或保持狀態(tài)持久性。但為此使用 localStorage 安全嗎？讓我們探討風(fēng)險、最佳實踐和安全替代方案。

什么是本地存儲？
localStorage 是一個瀏覽器 API，允許您在客戶端簡單且持久地存儲數(shù)據(jù)。與 sessionStorage 不同，即使用戶關(guān)閉并重新打開瀏覽器，保存在 localStorage 中的數(shù)據(jù)仍然可以訪問。

雖然它是一個實用的工具，但其簡單性帶來了一些安全限制。

場景：用戶身份驗證
假設(shè)您有一個使用 Supabase 來驗證用戶身份的應(yīng)用程序。登錄后，您希望在瀏覽器中存儲用戶信息，如下例：

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 的風(fēng)險

1. 暴露于惡意腳本 (XSS) 使用 localStorage 時最大的安全問題是它可以被頁面上運行的任何腳本訪問。這包括可以通過 XSS（跨站腳本）攻擊注入網(wǎng)站的惡意腳本。

例如，如果攻擊者設(shè)法將以下代碼注入您的頁面：

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

他們將有權(quán)訪問存儲的數(shù)據(jù)，包括有關(guān)用戶的敏感信息。

1. 數(shù)據(jù)未加密
   localStorage 將數(shù)據(jù)存儲為純文本。這意味著任何有權(quán)訪問用戶設(shè)備的人都可以打開瀏覽器控制臺并直接查看保存的信息。

2. 不會自動過期
   與 cookie 不同，localStorage 沒有自動使數(shù)據(jù)過期的內(nèi)置機制。這可能會導(dǎo)致不必要地存儲舊的或過時的信息。

更安全的替代方案

1. 信任 Supabase 會議 Supabase 已經(jīng)通過安全 cookie 和 JWT 令牌管理身份驗證會話。無需將用戶對象保存到 localStorage。

您可以隨時使用以下方法檢查用戶會話：

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

1. 使用 sessionStorage
   如果需要在瀏覽器中存儲數(shù)據(jù)，請考慮使用sessionStorage。它僅在瀏覽器選項卡或窗口打開時保留數(shù)據(jù)。這可以降低設(shè)備被盜時暴露的風(fēng)險，但不能防止 XSS。

2. 僅保存非敏感數(shù)據(jù)
   如果您需要在 localStorage 中持久保存，請避免存儲敏感信息，例如訪問令牌或個人數(shù)據(jù)。僅保存通用信息，例如用戶標(biā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 的保護 為了降低 XSS 風(fēng)險，請實施以下安全實踐：

使用嚴格的內(nèi)容安全策略 (CSP) 來防止未經(jīng)授權(quán)的腳本。
驗證并清理所有用戶輸入。
使依賴項和庫始終保持最新。

1. 加密數(shù)據(jù) 如果必須使用localStorage，可以在存儲之前對數(shù)據(jù)進行加密。這增加了額外的安全層，盡管它并不能完全消除風(fēng)險。

CryptoJS 示例：

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

注意：請務(wù)必保護好加密密鑰，否則將危及安全。

結(jié)論
雖然 localStorage 是瀏覽器中存儲數(shù)據(jù)的實用工具，但對于敏感數(shù)據(jù)來說它并不理想。以下是主要建議：

由 Supabase 管理的信任會話。
避免將敏感信息保存到 localStorage。
實施良好的安全實踐，例如 XSS 保護。
通過這些實踐，您可以確保用戶體驗流暢，同時保護您的數(shù)據(jù)免受攻擊。

你覺得怎么樣？你的項目中使用localStorage嗎？在評論中分享您的經(jīng)驗！

以上是將用戶數(shù)據(jù)存儲在 localStorage 中安全嗎？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！