React SPA跨应用跳转如何安全传递JWT Token？

针对从SPA-X重定向到SPA-Z时安全传递JWT Token的需求，以下是几种实用方案，按适用场景排序：

方案1：共享Cookie（适合同主域场景） #

如果两个SPA属于同一主域下的不同子域（比如x.example.com和z.example.com），共享Cookie是最简单的方案：

• 步骤1：在SPA-X中，将JWT Token写入Cookie，设置关键参数：
  • domain=.example.com（指定主域，让所有子域可访问）
  • path=/（全局生效路径）
  • HttpOnly=true（禁止前端JS读取，规避XSS风险）
  • Secure=true（仅通过HTTPS传输）
  • SameSite=Strict（防范CSRF攻击）
    代码示例（React中直接操作Cookie）：

  document.cookie = `jwt=${token}; domain=.example.com; path=/; HttpOnly; Secure; SameSite=Strict`;
  

• 步骤2：SPA-X直接重定向到SPA-Z的目标地址（携带业务所需查询参数）
• 步骤3：SPA-Z启动后，通过后端接口读取该Cookie中的Token（因HttpOnly限制，前端无法直接获取）

注意：必须保证两个SPA同主域，否则浏览器会拦截跨域Cookie共享。

方案2：后端中转的授权码模式（适合跨域场景） #

如果两个SPA属于不同域名，推荐用后端做中转，类似OAuth2的授权码流程：

• 步骤1：SPA-X不直接跳转SPA-Z，而是跳转到双方信任的后端授权接口，携带业务查询参数和当前用户的有效Token
• 步骤2：后端验证SPA-X传来的Token后，生成一次性授权码（设置短过期时间，比如5分钟），然后重定向到SPA-Z，URL中携带授权码和业务查询参数
• 步骤3：SPA-Z加载后，立即用授权码调用后端接口，换取真正的JWT Token
• 步骤4：后端验证授权码有效性，销毁该授权码（防止重复使用），返回Token给SPA-Z

优势：全程Token不经过前端URL或页面，安全性高；支持完全跨域的场景。

方案3：临时凭证+后端存储（适合跨域场景） #

这是授权码模式的轻量化替代方案：

• 步骤1：SPA-X调用后端接口，传入JWT Token和业务查询参数，后端将Token存入临时存储（比如Redis），生成唯一的临时凭证ID（UUID），设置极短过期时间（比如1分钟）
• 步骤2：后端返回临时凭证ID给SPA-X，SPA-X重定向到SPA-Z，URL中携带凭证ID和业务查询参数
• 步骤3：SPA-Z加载后，用凭证ID调用后端接口，后端从Redis取出对应Token，删除凭证ID，返回Token给SPA-Z

优势：实现简单，无需复杂的OAuth流程；凭证一次性使用、自动过期，安全性有保障。

方案4：iframe + postMessage（适合同域或已配置CORS的跨域场景） #

如果允许SPA-X先加载SPA-Z的iframe再完成Token传递：

• 步骤1：SPA-X打开SPA-Z的iframe，URL中仅携带业务查询参数（不含Token）
• 步骤2：SPA-X通过postMessage向iframe发送Token，同时严格验证iframe的origin：

  const iframe = document.getElementById('z-iframe');
  iframe.contentWindow.postMessage({ type: 'AUTH_TOKEN', token: jwtToken }, 'https://z-domain.com');
  

• 步骤3：SPA-Z的iframe监听message事件，验证发送方origin后存储Token，再通知主页面跳转：

  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://x-domain.com') return;
    if (event.data.type === 'AUTH_TOKEN') {
      sessionStorage.setItem('jwt', event.data.token); // 或存入内存
      window.parent.location.href = 'https://z-domain.com/target-page?' + queryParams;
    }
  });
  

注意：必须严格校验origin，防止恶意页面窃取Token；该方案需要用户等待iframe加载，体验略逊于前几种。

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