React/Next中如何安全地在客户端缓存加密密码

核心前提：绝对禁止明文存储用户原始密码，所有缓存方案都需要先做安全处理再落地存储，避免密码泄露风险。

首选方案：sessionStorage 存储派生密钥 #

这个方案刚好匹配你「跨页面有效、关闭浏览器自动失效」的需求，平衡了易用性和安全性：

• 用户输入密码后，不要直接缓存原始密码，用随机生成的唯一盐值，通过PBKDF2/Argon2等专业密钥派生算法生成加密文件用的密钥，仅把派生后的密钥存储到sessionStorage
• sessionStorage 同源下所有页面共享，切换页面时数据不会丢失，只有用户关闭整个浏览器时才会自动清空，不需要你手动处理过期逻辑
• 就算存储内容被恶意脚本读取，攻击者拿到的也只是单次会话有效的派生密钥，不会泄露用户原始密码，危害范围可控
• 盐值可以固定存储在localStorage中，保证同一设备每次派生的密钥一致即可，密钥派生迭代次数建议设置在10万次以上，提升暴力破解门槛

高安全场景备选方案：全局内存变量存储 #

如果你的应用是SPA单页应用，且对安全性要求极高，可以用这个方案：

• 把派生后的密钥存储在应用全局状态管理（比如Vuex/Pinia/Redux）的内存变量中，路由切换时内存状态不会丢失，不需要落地到任何持久化存储
• 该方案安全性最高，只有页面刷新或者关闭时才会清除密钥，唯一缺点是用户刷新页面后需要重新输入密码

禁止使用的方案 #

• 不要把原始密码或者派生密钥存储到localStorage，localStorage是永久持久化存储，除非用户主动清理否则不会消失，敏感信息残留泄露风险极高
• 不要用Cookie存储密码相关内容，Cookie会自动携带在所有同源请求中，容易被CSRF等攻击窃取

内容的提问来源于stack exchange，提问作者amazingdoodler