多父网站与共用子应用的跨域认证及会话共享方案咨询

核心问题根源 #

当前子应用的登录状态仅存在内存或父域上下文里，没有存储在子应用自身域名（child.com）的持久化容器中，导致切换到另一个父域的iframe时，状态无法被读取。

方案1：子应用域名Cookie存储凭证（最直接方案） #

• 子应用收到父域通过postMessage发来的access_token后，将其存入child.com域名下的Cookie：
  • 设置domain=.child.com（若child是顶级域名）、path=/，确保所有子路径的iframe都能访问；
  • 根据业务需求设置max-age/expires控制有效期，HTTPS环境下添加Secure属性，若不需要前端JS读取可加HttpOnly；
  • 跨站点场景必须设置SameSite=None; Secure，避免浏览器拦截跨域Cookie。
• 子应用初始化时，自动读取自身域名的Cookie，校验access_token有效性，有效则直接进入登录状态。

方案2：Storage API+跨域同步页（无Cookie场景备选） #

• 在child.com下部署独立的token同步页（如child.com/sync-token.html），专门处理token的存储与读取：
  1. parent1的子应用收到access_token后，通过postMessage通知同步页，将token存入child.com域名的localStorage；
  2. parent2加载子应用时，初始化阶段先读取localStorage中的token，有效则直接登录；若不存在，再请求父域获取token。
• 注意：sessionStorage仅在同会话同标签页有效，跨标签页共享需用localStorage。

方案3：父域间共享状态主动传token（需父域协同） #

• 让parent1和parent2实现自身登录状态共享：
  1. 用户在parent1完成OTP验证后，parent1将用户标识（或token）存入自身域名Cookie，或通过共同的认证中心存储；
  2. 用户打开parent2时，parent2先检查自身是否有有效登录状态，若有则直接调用API获取access_token，通过postMessage发给子应用完成自动登录。

关键安全与细节注意 #

• 所有postMessage必须校验发送方origin，防止恶意注入：

  // 子应用监听message示例
  window.addEventListener('message', (event) => {
    const allowedOrigins = ['https://www.parent1.com', 'https://www.parent2.com'];
    if (allowedOrigins.includes(event.origin)) {
      const { accessToken } = event.data;
      // 执行存储token、登录逻辑
    }
  });
  

• 实现token刷新机制，避免有效期过短导致频繁登录；
• 确保所有域名使用HTTPS，现代浏览器对HTTP跨域存储的限制极为严格。

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