OAuth2认证后，SpringBoot后端如何安全传递JWT至React前端？

针对你遇到的JWT安全传递问题，以下是几种实用且符合安全规范的方案，按推荐优先级排序：

1. HttpOnly + Secure Cookie 存储JWT（最优推荐） #

这是目前安全性最高的方案，核心是利用Cookie的HttpOnly属性避免前端JS窃取，Secure属性确保仅HTTPS传输。

实现方式 #

在重写的onAuthenticationSuccess方法中，将生成的JWT封装为HttpOnly Cookie：

@Override
public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
    // 生成自定义JWT的逻辑
    String jwtToken = generateCustomJwt(authentication);
    
    Cookie jwtCookie = new Cookie("auth-token", jwtToken);
    jwtCookie.setHttpOnly(true); // 禁止前端JS读取，抵御XSS攻击
    jwtCookie.setSecure(true); // 仅在HTTPS连接下发送，防止明文泄露
    jwtCookie.setPath("/"); // 根据业务需求调整生效路径
    jwtCookie.setMaxAge(24 * 60 * 60); // 设置过期时间，例如1天
    jwtCookie.setSameSite("Strict"); // 防止CSRF攻击，跨域场景可设为None（需配合Secure）
    
    response.addCookie(jwtCookie);
    // 重定向到前端页面
    response.sendRedirect("https://your-react-app.com");
}

安全优势 #

• HttpOnly Cookie无法被前端JavaScript访问，从根源上避免XSS攻击窃取JWT
• Secure Cookie仅在HTTPS环境下传输，防止网络窃听
• 配合SameSite属性可有效抵御CSRF攻击

注意事项 #

• 前后端同域时直接使用；跨域场景需配置Spring Boot的CORS支持，同时Cookie需设置SameSite=None+Secure（仅HTTPS生效）

2. 授权码中转获取JWT（跨域场景备选） #

如果跨域无法使用Cookie，可通过短期一次性授权码中转获取JWT，避免JWT直接暴露在URL中。

实现流程 #

1. 后端生成授权码：在onAuthenticationSuccess中生成短期有效的一次性授权码（如UUID），将授权码与JWT绑定存储到Redis（设置5分钟过期），然后重定向到前端时携带授权码作为查询参数
2. 前端换JWT：前端拿到授权码后，立即调用后端接口换取JWT，后端验证授权码有效后返回JWT，并删除已使用的授权码

代码示例 #

// onAuthenticationSuccess方法
@Override
public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
    String jwtToken = generateCustomJwt(authentication);
    String authCode = UUID.randomUUID().toString();
    // 存储到Redis，5分钟过期
    redisTemplate.opsForValue().set("auth-code:" + authCode, jwtToken, 5, TimeUnit.MINUTES);
    // 重定向到前端回调页，携带授权码
    response.sendRedirect("https://your-react-app.com/auth-callback?code=" + authCode);
}

// 后端换取JWT的接口
@GetMapping("/api/exchange-jwt")
public ResponseEntity<?> exchangeJwt(@RequestParam String code) {
    String jwtToken = redisTemplate.opsForValue().get("auth-code:" + code);
    if (jwtToken == null) {
        return ResponseEntity.badRequest().body("无效或过期的授权码");
    }
    // 删除已使用的授权码，防止重复利用
    redisTemplate.delete("auth-code:" + code);
    return ResponseEntity.ok(Map.of("token", jwtToken));
}

安全优势 #

• 授权码短期有效且一次性使用，即使被窃取也无法重复获取JWT
• JWT通过接口响应返回，避免长期暴露在URL中的风险

注意事项 #

• 前端拿到JWT后，建议存储在内存（如React状态管理工具）而非localStorage/sessionStorage，降低XSS窃取风险；请求时在Authorization头中携带Bearer ${token}

3. 前端路由参数+内存存储（临时会话场景） #

适合对会话持续性要求不高的场景，核心是避免JWT持久化存储。

实现方式 #

重定向到前端时将JWT作为路由参数，前端在路由钩子中立即读取参数，然后从URL中移除，将JWT存储在内存（如React Context、Redux内存状态）中，不做持久化。

安全优势 #

• JWT不会留在浏览器历史记录或本地存储中，降低被盗取的风险

注意事项 #

• 必须在前端路由初始化时立即处理参数并移除，避免用户分享带token的链接
• 页面刷新后JWT会丢失，需重新登录

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