開發 Web 應用程式時，經常需要在瀏覽器中儲存使用者資料以改善體驗或保持狀態持久性。但為此使用 localStorage 安全嗎？讓我們探討風險、最佳實踐和安全替代方案。
什麼是本地儲存？
localStorage 是一個瀏覽器 API，可讓您在客戶端簡單且持久地儲存資料。與 sessionStorage 不同，即使使用者關閉並重新開啟瀏覽器，儲存在 localStorage 中的資料仍然可以存取。
雖然它是一個實用的工具，但其簡單性帶來了一些安全限制。
場景：使用者驗證
假設您有一個使用 Supabase 來驗證使用者身分的應用程式。登入後，您希望在瀏覽器中儲存使用者訊息，如下例：
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 的風險
例如，如果攻擊者設法將以下程式碼注入您的頁面：
console.log(localStorage.getItem('user'))
他們將有權存取儲存的數據，包括有關用戶的敏感資訊。
資料未加密
localStorage 將資料儲存為純文字。這意味著任何有權存取使用者裝置的人都可以打開瀏覽器控制台並直接查看已儲存的資訊。
不會自動過期
與 cookie 不同，localStorage 沒有自動使資料過期的內建機制。這可能會導致不必要地儲存舊的或過時的資訊。
更安全的替代方案
您可以隨時使用以下方法檢查使用者會話：
const { data, error } = await supabase.auth.getUser()
使用 sessionStorage
如果需要在瀏覽器中儲存數據，請考慮使用sessionStorage。它僅在瀏覽器標籤或視窗開啟時保留資料。這可以降低設備被盜時暴露的風險，但不能防止 XSS。
僅保存非敏感資料
如果您需要在 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)
}
}
使用嚴格的內容安全策略 (CSP) 來防止未經授權的腳本。
驗證並清理所有使用者輸入。
使依賴項和庫始終保持最新。
CryptoJS 範例：
console.log(localStorage.getItem('user'))
注意：請務必保護加密金鑰，否則將危及安全。
結論
雖然 localStorage 是瀏覽器中儲存資料的實用工具，但對於敏感資料來說它並不理想。以下是主要建議：
由 Supabase 管理的信任會話。
避免將敏感資訊儲存到 localStorage。
實施良好的安全實踐，例如 XSS 保護。
透過這些實踐，您可以確保使用者體驗流暢，同時保護您的資料免受攻擊。
你覺得怎麼樣？你的專案有使用localStorage嗎？在評論中分享您的經驗！
以上是將使用者資料儲存在 localStorage 中安全嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
