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

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

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

場(chǎng)景：使用者驗(yàn)證
假設(shè)您有一個(gè)使用 Supabase 來驗(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è)想法看起來很簡(jiǎn)單：將使用者物件保存在 localStorage 中以便稍後使用。但這種方法安全嗎？

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

1. 暴露於惡意腳本 (XSS) 使用 localStorage 時(shí)最大的安全性問題是它可以被頁面上執(zhí)行的任何腳本存取。這包括可以透過 XSS（跨站腳本）攻擊注入網(wǎng)站的惡意腳本。

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

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

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

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

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

更安全的替代方案

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

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

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

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

2. 僅保存非敏感資料
   如果您需要在 localStorage 中持久保存，請(qǐng)避免儲(chǔ)存敏感訊息，例如存取令牌或個(gè)人資料。僅保存通用訊息，例如使用者識(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í)務(wù)：

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

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

CryptoJS 範(fàn)例：

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

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

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

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

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

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