如何安全跨域获取异源Web应用认证令牌以实现App3免登

核心问题背景 #

浏览器同源策略限制App3直接读取App1/App2域名下本地存储的JWT，需要在合规前提下实现跨域令牌获取，同时保证令牌不被泄露或滥用。

方案一：PostMessage + 隐藏IFrame（最灵活的跨域方案） #

这是无共同父域场景下的首选方案，通过浏览器跨域消息机制安全传递令牌：

• 实现步骤：
  1. 在App1/App2中新增一个专门的令牌代理页面（如/token-proxy），该页面仅负责读取本地存储的JWT，并响应跨域消息请求
  2. App3加载时，Angular前端动态创建隐藏IFrame，分别指向App1/App2的代理页面
  3. App3通过postMessage向IFrame发送令牌请求，请求中携带自身Origin（用于校验）
  4. 代理页面校验请求Origin是否在App1/App2的白名单内，验证通过后将**短期交换凭证（而非原始JWT）**通过postMessage回传给App3
  5. App3前端校验消息来源Origin后，将凭证传给后端，由后端发起Token Exchange请求到IdentityServer4
• Angular关键代码示例：

  // 创建IFrame并监听消息
  const iframe = document.createElement('iframe');
  iframe.src = 'https://app1.com/token-proxy';
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  
  window.addEventListener('message', (event) => {
    // 严格校验来源域名
    if (event.origin !== 'https://app1.com' && event.origin !== 'https://app2.com') return;
    // 拿到凭证后传给后端
    this.http.post('/api/exchange-token', {token: event.data}).subscribe(...);
  });
  

• 安全增强：
  • 代理页面仅返回有效期5分钟以内的专用交换凭证（可通过App1/App2的后端生成，比如用IdentityServer4的Reference Token）
  • 白名单校验必须在App1/App2的后端完成，禁止前端硬编码白名单

方案二：基于OAuth2标准的外部身份提供者集成（最合规方案） #

直接将App1/App2配置为App3认证服务（IdentityServer4）的外部身份提供者，复用已有会话：

• 实现步骤：
  1. 在IdentityServer4中为App1/App2配置OpenID Connect外部提供者：

     services.AddIdentityServer()
         .AddExternalProviders(options =>
         {
             options.AddOpenIdConnect("app1", "App1 Login", o =>
             {
                 o.Authority = "https://app1.com/identity";
                 o.ClientId = "app3-exchange-client";
                 o.ClientSecret = "your-secret";
                 o.ResponseType = "code";
                 o.UsePkce = true;
                 o.SaveTokens = true;
                 // 仅请求令牌交换所需的权限
                 o.Scope.Add("token-exchange");
             });
         });
     

  2. 用户访问App3时，后端自动重定向到App1/App2的授权端点，由于浏览器已有活跃会话，授权端点会直接返回授权码
  3. IdentityServer4使用授权码向App1/App2的令牌端点交换得到JWT，再生成App3的访问令牌
• 优势：完全遵循OAuth2标准，无需手动处理跨域存储，避免令牌暴露风险，同时支持自动会话复用

方案三：共享父域Cookie + 反向代理（仅限同父域场景） #

如果三个应用共享同一父域（如*.example.com），可以通过共享Cookie实现会话验证：

• 配置要点：
  1. App1/App2将会话Cookie的Domain设置为父域（如.example.com），并标记为HttpOnly、Secure、SameSite=Strict
  2. App3的后端通过反向代理（如Nginx）将令牌验证请求转发到App1/App2的端点，利用共享Cookie自动验证用户会话
  3. App1/App2的后端验证会话后，返回可用于交换的令牌给App3后端
• 注意：Cookie必须配置严格的SameSite属性，仅在HTTPS环境下使用，避免CSRF攻击

通用安全准则 #

• 所有跨域交互必须严格校验来源域名，禁止接收未知Origin的请求/消息
• 禁止前端直接处理原始JWT，令牌交换必须在后端完成
• 启用HTTPS加密所有通信，避免令牌被窃听
• 令牌有效期尽量缩短，交换凭证仅授予Token Exchange的最小权限
• Angular中禁用withCredentials除非必要，后端CORS配置仅允许指定的Origin、Methods和Headers

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