ClojureScript中登录凭据持久化存储的最佳实践与安全疑问

在ClojureScript中，最初将登录凭据和授权信息存储在atom状态中，但页面刷新时atom状态会被清空，因此正在探索替代存储方案。此前尝试的方案：

(set! (.-cookie js/document) {:customer true :supplier false :admin false :user "test" :company "company-test"})

1. 可靠的客户端持久化存储方案推荐 #

以下几种方案可避免页面刷新导致的数据丢失：

LocalStorage（持久化存储） #

适合存储非敏感的用户授权信息（如角色、用户名），容量约5MB，数据会长期保留直到手动清除。ClojureScript使用示例：

;; 存储数据
(let [auth-data {:customer true :supplier false :admin false :user "test" :company "company-test"}]
  (.setItem js/localStorage "auth-data" (js/JSON.stringify auth-data)))

;; 读取数据
(when-let [raw-data (.getItem js/localStorage "auth-data")]
  (js/JSON.parse raw-data))

SessionStorage（会话级存储） #

数据仅在当前浏览器标签会话中保留，关闭标签即清除，适合临时存储登录状态。用法与LocalStorage一致，替换js/localStorage为js/sessionStorage即可。

优化后的Cookie存储 #

通过配置安全属性，让Cookie既实现持久化又提升安全性，适合存储会话令牌（而非明文敏感数据）。ClojureScript设置安全Cookie示例：

;; 设置带安全属性的Cookie
(set! (.-cookie js/document) "auth-token=xxx; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=86400")

• HttpOnly：禁止JS读取Cookie，防范XSS攻击
• Secure：仅在HTTPS连接下传输
• SameSite=Strict：防范CSRF攻击
• Max-Age：设置过期时间（单位秒）

IndexedDB #

适合存储大量、复杂的用户数据，ClojureScript可通过封装原生API或使用第三方库（如datascript）实现，适合有复杂查询需求的场景。

2. Cookie存储敏感数据的安全性及替代方案 #

直接用Cookie存敏感数据的风险 #

• XSS攻击风险：未设置HttpOnly属性时，恶意脚本可通过document.cookie窃取数据；
• 中间人劫持风险：未设置Secure属性时，Cookie会通过HTTP明文传输，易被拦截；
• CSRF攻击风险：未设置SameSite属性时，第三方网站可伪造请求携带Cookie；
• 容量限制：单Cookie最大4KB，无法存储大量数据。

更安全的替代方案 #

1. 仅用Cookie存储会话令牌
   不要在客户端存储明文密码、完整用户凭据，仅存储服务端颁发的会话令牌（如JWT、Session ID），并配置HttpOnly/Secure/SameSite属性，避免JS窃取。

2. LocalStorage + HttpOnly Cookie组合

   • 用LocalStorage存储非敏感的用户信息（如角色、昵称），方便页面快速读取展示；
   • 用HttpOnly Cookie存储敏感的会话令牌，由浏览器自动携带到服务端验证，避免XSS窃取。

3. 避免客户端存储敏感数据
   核心敏感信息（如密码哈希）绝不存客户端，仅在登录时提交给服务端验证，后续通过短期有效的令牌进行身份校验。

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