ReactJS中如何安全实现跨页面刷新的持久WebSocket连接

首先明确前提：页面刷新时浏览器会销毁当前页面的所有运行时上下文，原WebSocket物理连接必然会断开，我们要实现的是逻辑层面的无感知持久连接，即刷新后自动快速重建连接，用户完全感知不到断连过程。

令牌安全存储替代方案 #

完全可以放弃localStorage存储令牌的方案，以下是安全性更高的可选方案：

• HttpOnly Secure Cookie（首选方案）
  将refresh token存储在配置了HttpOnly、Secure、SameSite=Strict/Lax属性的Cookie中：
  • HttpOnly属性禁止前端JS读取令牌，从根源上避免XSS攻击窃取令牌
  • Secure属性保证令牌只会在HTTPS连接中传输，不会明文泄露
  • SameSite属性可以防范CSRF攻击
    access token不需要做持久化存储，直接存在前端内存中（比如React的useRef、全局状态变量、闭包变量均可），有效期设置为5~15分钟即可。
• SessionStorage（次选）
  如果你的场景无法使用Cookie，可以将短有效期的access token存储在SessionStorage中，相比localStorage，SessionStorage会在标签页关闭时自动销毁，且不会跨标签页共享，泄露风险远低于localStorage。注意refresh token依然建议存在HttpOnly Cookie中。

无感知连接重建实现步骤 #

按以下流程实现即可做到刷新后无感重建WebSocket连接：

1. React应用初始化阶段（根组件useEffect回调中执行即可），首先判断内存中是否存在有效access token，如果不存在，直接调用刷新令牌接口/api/refresh，该请求会自动携带Cookie中存储的refresh token，后端校验通过后返回新的access token，将其存入内存。
2. 拿到有效access token后，立即初始化WebSocket连接，鉴权可选两种方式：
   • 同源场景下直接依赖Cookie鉴权：WebSocket握手请求会自动携带同源Cookie，后端直接从Cookie中完成身份校验，前端不需要传递任何令牌，完全避免令牌暴露到JS上下文的风险
   • 跨域场景下使用查询参数传参：构造连接时将内存中的access token拼到wss地址的查询参数中：new WebSocket(wss://your-service-domain.com/ws?access_token=${accessToken})，因为access token有效期极短，即使泄露也会快速失效，风险可控
3. 额外配置WebSocket断线重连逻辑，设置指数退避重试策略（首次1s重试，第二次2s，最高延迟到16s停止重试），重试前如果检测到access token已过期，先调用刷新令牌接口拿到新令牌再重连。

注意事项 #

• 绝对不要将refresh token存储在任何前端可读写的持久化存储中（localStorage、IndexedDB等），一旦发生XSS攻击，攻击者可以窃取到长期有效的refresh令牌，完全冒充用户身份
• 建议给WebSocket连接加心跳检测逻辑，避免连接假死，心跳检测逻辑可以和令牌续期逻辑结合，发现令牌即将过期时提前完成续期，避免连接中断

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