开发 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 的风险
- 暴露于恶意脚本 (xss) 使用 localstorage 时最大的安全问题是它可以被页面上运行的任何脚本访问。这包括可以通过 xss（跨站脚本）攻击注入网站的恶意脚本。
例如，如果攻击者设法将以下代码注入您的页面：
console.log(localstorage.getitem('user'))
他们将有权访问存储的数据，包括有关用户的敏感信息。
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
数据未加密
localstorage 将数据存储为纯文本。这意味着任何有权访问用户设备的人都可以打开浏览器控制台并直接查看保存的信息。不会自动过期
与 cookie 不同，localstorage 没有自动使数据过期的内置机制。这可能会导致不必要地存储旧的或过时的信息。
更安全的替代方案
- 信任 supabase 会议 supabase 已经通过安全 cookie 和 jwt 令牌管理身份验证会话。无需将用户对象保存到 localstorage。
您可以随时使用以下方法检查用户会话：
const { data, error } = await supabase.auth.getuser()
使用 sessionstorage
如果需要在浏览器中存储数据，请考虑使用sessionstorage。它仅在浏览器选项卡或窗口打开时保留数据。如果设备被盗，这可以降低暴露的风险，但不能防止 xss。仅保存非敏感数据
如果您需要在 localstorage 中持久保存，请避免存储敏感信息，例如访问令牌或个人数据。仅保存通用信息，例如用户标识符：
localstorage.setitem('userid', data.user.id)
- 实施针对 xss 的保护 为了降低 xss 风险，请实施以下安全实践：
使用严格的内容安全策略 (csp) 来防止未经授权的脚本。
验证并清理所有用户输入。
使依赖项和库始终保持最新。
- 加密数据 如果必须使用localstorage，可以在存储之前对数据进行加密。这增加了额外的安全层，尽管它并不能完全消除风险。
cryptojs 示例：
import CryptoJS from 'crypto-js'
const secretKey = 'sua-chave-secreta'
// Para salvar no localStorage
const encryptedUser = CryptoJS.AES.encrypt(JSON.stringify(data.user), secretKey).toString()
localStorage.setItem('user', encryptedUser)
// Para recuperar do localStorage
const decryptedUser = CryptoJS.AES.decrypt(localStorage.getItem('user') || '', secretKey)
const user = JSON.parse(decryptedUser.toString(CryptoJS.enc.Utf8))
注意：请务必保护好加密密钥，否则将危及安全。
结论
虽然 localstorage 是浏览器中存储数据的实用工具，但对于敏感数据来说它并不理想。以下是主要建议：
由 supabase 管理的信任会话。
避免将敏感信息保存到 localstorage。
实施良好的安全实践，例如 xss 保护。
通过这些实践，您可以确保用户体验流畅，同时保护您的数据免受攻击。
你觉得怎么样？你的项目中使用localstorage吗？在评论中分享您的经验！
