Angular嵌入的iframe加载正常 Chrome中无法登录如何解决

问题原因 #

• 核心是Chrome的SameSite Cookie安全策略限制：Chrome 80及以上版本默认将Cookie的SameSite属性设为Lax，iframe内嵌的跨域站点属于第三方上下文，登录依赖的身份Cookie默认不会被携带，导致后端身份校验不通过返回401。
• Firefox对SameSite默认策略的落地规则更宽松，未强制拦截第三方上下文的Cookie携带，所以登录流程可以正常运行。
• 若iframe站点和Angular站点完全跨域，Chrome还会默认拦截未设置SameSite=None; Secure属性的第三方Cookie，进一步导致身份凭证丢失。
• 额外排查：确认你项目中使用的safeUrl管道逻辑正确，未错误修改iframe的src地址导致请求参数丢失。

你用到的Angular代码正确格式化后如下：

@Component({
  selector: 'a-selector',
  template: `<iframe *ngIf="true" [src]="'https://stackoverflow.com/examplewebsite/login' | safeUrl" style="width: 100%; height: 100vh;" scrolling="no" frameborder="0"></iframe>`,
  styleUrls: ['./a.component.css']
})

export class AComponent implements OnInit {
  ...
  constructor(...) {...}
  ngOnInit() {...}
}

解决方案 #

方案1：调整内嵌站点的Cookie配置（生产环境优先推荐，需内嵌站点服务端配合） #

给所有登录态相关的Cookie设置三个属性：
SameSite=None; Secure; HttpOnly
注意：SameSite=None必须搭配Secure属性使用，也就是内嵌站点必须走HTTPS协议，否则配置不生效；HttpOnly为可选配置，用于防范XSS攻击窃取Cookie，建议添加。

方案2：同域部署（兼容性最佳，成本较高） #

将Angular站点和iframe内嵌站点部署在同一个一级域名下，通过二级域名区分不同站点，比如Angular站点用a.example.com，内嵌站点用b.example.com，同时将Cookie的Domain属性设置为一级域名.example.com，SameSite保持默认Lax即可正常携带。

方案3：临时关闭Chrome限制（仅适合本地开发调试） #

本地开发阶段可以临时关闭Chrome的SameSite限制：

1. 地址栏输入chrome://flags/#same-site-by-default-cookies
2. 将SameSite by default cookies和Cookies without SameSite must be secure两个选项设置为Disabled
3. 重启浏览器后生效

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