弹窗重定向后向父窗口传信息方案咨询（含OAuth iframe认证场景）

针对你遇到的跨域iframe弹窗OAuth认证后无法传递token的问题，下面是几个经过验证的可行实现方案：

方案一：postMessage + 后端临时存储（推荐） #

这个方案兼顾安全性和可靠性，是大多数场景的首选：

• 1. 触发认证前，Website B的iframe向后端生成一个唯一临时标识（UUID），同时在iframe内存中保存这个标识。调用window.open打开Google授权页时，把这个临时标识和Website B的域名作为参数拼到授权URL的state参数里（state参数会被Google原封不动带回回调地址）。
• 2. Google认证完成后，会重定向到你预先配置的Website B后端回调接口。后端从请求中拿到auth token和临时标识，将两者绑定后存入临时存储（比如Redis），并设置5分钟左右的过期时间。
• 3. 回调接口返回一个前端页面（必须属于Website B域名），这个页面加载后执行window.opener.postMessage({ type: 'auth_complete', tempId: 'xxx' }, 'https://websitea.com')，向Website A的页面发送认证完成的信号。
• 4. Website A的页面监听message事件，收到消息后先验证event.origin是否为Website B的域名，确认合法后，再用iframeElement.contentWindow.postMessage({ type: 'fetch_token', tempId: 'xxx' }, 'https://websiteb.com')把消息转发给内嵌的Website B iframe。
• 5. Website B的iframe收到转发的消息后，带着临时标识向后端请求对应的auth token。后端验证标识有效且未过期，返回token后立即删除临时存储中的绑定记录。

方案二：后端会话轮询（简单易实现） #

如果场景不需要太复杂的交互，轮询是最容易快速落地的方案：

• 1. Website B的iframe在打开Google授权弹窗前，向后端发起请求创建一个认证会话ID，将ID存在iframe内存中。
• 2. 弹窗打开后，iframe启动定时轮询（比如每1秒一次），向后端发送请求，携带会话ID查询认证状态。
• 3. Google认证完成回调到Website B后端后，后端将auth token与该会话ID绑定，并标记会话为"已完成"状态。
• 4. 当iframe轮询到"已完成"状态时，直接从后端获取token，停止轮询。后端在返回token后，立即销毁该会话ID的绑定数据，避免残留。
• 注意：轮询间隔不要过短，建议1-3秒一次；会话ID必须设置短过期时间，防止无效会话占用资源。

方案三：SharedWorker跨页通信（浏览器支持前提下） #

如果你的目标浏览器都支持SharedWorker，可以用这个方案减少后端依赖：

• 1. Website B的iframe和认证回调页（同域）都创建SharedWorker实例，连接同一个Worker脚本。
• 2. iframe启动认证时，在Worker中注册监听事件，等待token消息。
• 3. Google认证完成后，回调页拿到auth token，通过SharedWorker将token发送给iframe。
• 注意：SharedWorker要求通信页面必须同域，所以回调页必须属于Website B域名；同时要处理好Worker的连接断开和异常情况。

关键安全注意事项 #

• 所有postMessage通信必须严格验证消息来源域名，比如：

  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://你的合法域名.com') return;
    // 处理消息逻辑
  });
  

• 临时存储的token或会话ID必须设置短过期时间，避免数据泄露。
• Google OAuth的回调地址必须在Google开发者后台正确配置，且属于Website B的域名，否则会被Google拒绝。
• 弹窗必须通过**用户主动交互（比如点击按钮）**触发window.open，否则会被浏览器的弹窗拦截机制阻止。

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