解决第三方使用iframe内嵌页面时无法正常登录访问的问题

本文链接：https://blog.csdn.net/qq_28013889/article/details/134550128

本文讲述了在谷歌最新版本浏览器中使用iframe内嵌第三方页面时，因跨域和SameSite属性导致无法获取cookie的问题，作者提供了将token存储在sessionStorage并设置公共cookie管理函数的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 问题描述

在做项目的时候，可能会遇到需要内嵌第三方页面或者第三方软件厂商内嵌我们自己做的web页面（这里说的内嵌方式是用iframe的方式），当在使用最新版本的“谷歌浏览器”时就会出现无法正常登录的问题，内嵌的页面无法正常的显示，只能显示登录页面，而且输入正确的用户名和密码也无法跳转到展示页面；
我从网上找了很多的博客，发现大部分写的都是原理和一些比较简单的解决方案，试过后也还是没法解决这个问题，有的还很麻烦，所以自己在解决了该问题后，我把自己遇到的问题及问题原因和解决方案详细的写一下，帮助大家很快的解决掉该问题
问题案例：
公司有个需求，需要将做的各个系统的程序页面集成到一个环境中来，最好的实现方案就是使用iframe内嵌的方式，将其他系统的页面集成到页面中来，但是有个问题，其他系统在登录的时候，都是需要用cookie获取token等跟鉴权相关的信息，如果是使用该种方式，那么在用谷歌88或以上版本访问的时候则不能正常的访问，直接跳转到登录页面，且在该登录页面重新输入用户名和密码后再点击登录，接口会请求成功，但是无法跳转到展示页面。但是用其他除了谷歌内核的浏览器是正常的，比如火狐。

经过排查是因为拿不到token，拿不到token的原因是：由于跨域问题导致，我们框架里把token存储在了cookie中，开始我们系统用的cookie存储的token，由于另一个token的信息是在iframe的src中，这样就导致获取不到token。
Google 在2020年2月4号发布的 Chrome 80 版本（schedule：https://www.chromestatus/features/schedule）中默认屏蔽所有第三方 Cookie，即默认为所有 Cookie 加上 SameSite=Lax 属性（https://www.chromestatus/feature/5088147346030592），并且拒绝非Secure的Cookie设为 SameSite=None（https://www.chromestatus/feature/5633521622188032）, SameSite的作用就是防止跨域传送cookie，从而防止 CSRF 攻击和用户追踪，此举是为了从源头屏蔽 CSRF 漏洞。关于 SameSite 属性的介绍，《Cookie 的 SameSite 属性》。