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

什麼是本地儲存？
localStorage 是一個瀏覽器 API，可讓您在客戶端簡單且持久地儲存資料。與 sessionStorage 不同，即使使用者關(guān)閉並重新開啟瀏覽器，儲存在 localStorage 中的資料仍然可以存取。

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

場景：使用者驗證
假設(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 時最大的安全性問題是它可以被頁面上執(zhí)行的任何腳本存取。這包括可以透過 XSS（跨站腳本）攻擊注入網(wǎng)站的惡意腳本。

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

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

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

1. 資料未加密
   localStorage 將資料儲存為純文字。這意味著任何有權(quán)存取使用者裝置的人都可以打開瀏覽器控制臺並直接查看已儲存的資訊。

2. 不會自動過期
   與 cookie 不同，localStorage 沒有自動使資料過期的內(nèi)建機制。這可能會導(dǎo)致不必要地儲存舊的或過時的資訊。

更安全的替代方案

1. 信任 Supabase 會議 Supabase 已經(jīng)透過安全性 cookie 和 JWT 令牌管理驗證會話。無需將使用者物件儲存到 localStorage。

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

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

1. 使用 sessionStorage
   如果需要在瀏覽器中儲存數(shù)據(jù)，請考慮使用sessionStorage。它僅在瀏覽器標(biāo)籤或視窗開啟時保留資料。這可以降低設(shè)備被盜時暴露的風(fēng)險，但不能防止 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 風(fēng)險，請實施以下安全實務(wù)：

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

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

CryptoJS 範(fàn)例：

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

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

結(jié)論
雖然 localStorage 是瀏覽器中儲存資料的實用工具，但對於敏感資料來說它並不理想。以下是主要建議：

由 Supabase 管理的信任會話。
避免將敏感資訊儲存到 localStorage。
實施良好的安全實踐，例如 XSS 保護。
透過這些實踐，您可以確保使用者體驗流暢，同時保護您的資料免受攻擊。

你覺得怎麼樣？你的專案有使用localStorage嗎？在評論中分享您的經(jīng)驗！

以上是將使用者資料儲存在 localStorage 中安全嗎？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！