为何Google App Engine中带IAP认证的嵌入链接在无痕模式下失效

• 无痕浏览模式默认禁用第三方Cookie，Google IAP依赖OAuth认证流程读写Google域名下的关联Cookie，跨域嵌入场景下这类Cookie被判定为第三方Cookie被拦截，导致认证流程中断
• Google OAuth授权端点accounts.google.com默认设置了X-Frame-Options: DENY响应头，禁止在iframe/embed等嵌入容器内直接加载，你看到的accounts.google.com refused to connect就是这个规则触发的拦截
• CORS报错是因为嵌入应用的资源请求（比如manifest.json）触发了OAuth重定向，跨域请求Google OAuth端点时，端点没有返回对应的跨域许可头，被浏览器同源策略拦截

1. 同根域名适配（优先推荐）
   将主应用和嵌入应用配置为同一个根域名下的不同子域名，比如主应用用main.example.com，嵌入应用用embed.example.com，此时关联认证Cookie会被判定为第一方Cookie，不会被无痕模式拦截，也能绕过OAuth端点的嵌入限制。
   对应代码可以把embed标签替换为兼容性更好的iframe标签，添加必要的权限许可：

import React from "react";

const Page = props => {
  return <iframe src={"https://page.appstop.com"} width="100%" height="700px" allow="publickey-credentials-get *; cookies *" />
};
export default Page;

2. 调整IAP与OAuth配置
   在Google Cloud控制台修改对应配置：

• 进入IAP管理页面，找到「品牌与同意屏幕」设置，将主应用的完整域名添加到受信任来源列表
• 进入OAuth 2.0客户端ID配置页，把主应用域名、嵌入应用域名同时添加到「已授权的JavaScript来源」和「已授权的重定向URI」列表
• 给嵌入应用的服务添加响应头：Content-Security-Policy: frame-ancestors 'self' 你的主应用完整域名;，删除嵌入应用响应头里的X-Frame-Options: DENY配置

3. 跨域凭证传递方案
   如果无法配置同根域名，修改认证逻辑：

• 主应用侧先完成IAP认证，拿到有效认证凭证
• 通过postMessage方法把凭证传递给iframe内的嵌入应用
• 嵌入应用直接用拿到的凭证请求自身接口，跳过iframe内部主动触发OAuth跳转的流程

4. 弹窗认证兜底方案
   如果以上方案都无法落地，修改嵌入应用的初始化逻辑：
   检测到认证失败时，不要在iframe内直接跳转授权，而是调用父页面接口弹出独立窗口走OAuth认证流程，认证完成后把凭证回传给iframe内的应用，完成后续登录逻辑。

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