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

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

雖然它是一個(gè)實(shí)用的工具，但其簡(jiǎn)單性帶來(lái)了一些安全限制。

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

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

這個(gè)想法看起來(lái)很簡(jiǎn)單：將用戶對(duì)象保存在 localStorage 中以便稍后使用。但這種方法安全嗎？

使用 localStorage 的風(fēng)險(xiǎn)

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

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

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

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

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

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

更安全的替代方案

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

您可以隨時(shí)使用以下方法檢查用戶會(huì)話：

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

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

2. 僅保存非敏感數(shù)據(jù)
   如果您需要在 localStorage 中持久保存，請(qǐng)避免存儲(chǔ)敏感信息，例如訪問(wèn)令牌或個(gè)人數(shù)據(jù)。僅保存通用信息，例如用戶標(biāo)識(shí)符：
   

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. 實(shí)施針對(duì) XSS 的保護(hù) 為了降低 XSS 風(fēng)險(xiǎn)，請(qǐng)實(shí)施以下安全實(shí)踐：

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

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

CryptoJS 示例：

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

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

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

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

你覺(jué)得怎么樣？你的項(xiàng)目中使用localStorage嗎？在評(píng)論中分享您的經(jīng)驗(yàn)！

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