使用Vuex-persistedstate时，如何隐藏sessionStorage中的状态以保障测验应用安全？

一、JWT令牌的安全存储：改用HttpOnly Cookie #

localStorage/sessionStorage存储JWT的最大风险是XSS攻击可直接窃取令牌，改用HttpOnly Cookie是更安全的方案：

1. 后端配置（.NET Web API）
   生成JWT后，将其存入HttpOnly Cookie，同时配置安全属性：

   var token = GenerateJwtToken(user); // 你的JWT生成逻辑
   Response.Cookies.Append("AuthToken", token, new CookieOptions
   {
       HttpOnly = true, // 前端JS无法读取，防御XSS
       Secure = true, // 仅HTTPS下传输，生产环境启用
       SameSite = SameSiteMode.Strict, // 防范CSRF攻击
       Expires = DateTime.UtcNow.AddMinutes(15) // 设置短过期时间，配合刷新令牌
   });
   

   同时生成刷新令牌（Refresh Token），同样存入HttpOnly Cookie，用于在访问令牌过期时获取新令牌，无需用户重复登录。

2. 前端配置（Vue.js）
   发送请求时自动携带Cookie，在axios中开启凭证携带：

   axios.defaults.withCredentials = true;
   

   后端需配置CORS允许携带凭证：

   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowFrontend", policy =>
       {
           policy.WithOrigins("https://your-frontend-domain.com")
                 .AllowAnyHeader()
                 .AllowAnyMethod()
                 .AllowCredentials();
       });
   });
   

二、答案等业务敏感数据：禁止存储在前端 #

把所有题目和答案拉到前端本身就是设计缺陷——前端环境完全开放，无论存在哪种前端存储（sessionStorage、localStorage、indexDB），用户都能通过DevTools查看或篡改。正确的做法是：

• 前端仅请求不含答案的题目数据，用户提交选项后，将选项发送到后端API，由后端验证答案并返回得分、正确结果等信息。
• 若需保存用户答题进度（如已答题目ID、选中的选项），可将这些非敏感数据存在sessionStorage或vuex-persistedstate，但绝对不能存储答案、评分规则等敏感内容。

三、额外安全加固建议 #

• 启用内容安全策略（CSP）：限制页面加载的资源来源，降低XSS攻击风险，在Vue项目的index.html中添加meta标签：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline';">
  

• JWT令牌优化：设置15-30分钟的短过期时间，搭配刷新令牌机制平衡安全性与用户体验。
• 后端请求校验：检查请求的Origin、Referer头，拒绝非法来源请求；对敏感接口添加权限校验。

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