跨域下的safari-cookie-in-iframe 单点登录失败，前端无法携带cookie到后端

最新推荐文章于 2025-04-05 09:00:00 发布
最新推荐文章于 2025-04-05 09:00:00 发布
阅读量3.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 个人笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014170770/article/details/89502029
探讨了在Safari浏览器中，A站点通过iframe加载B站点时遇到的第三方Cookie不被携带的问题。提供了三种解决方案：调整浏览器设置、利用跳转技巧、建立前后端信任机制。

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

原因：A站点里有个iframe的src是b站点，服务器向b站点写入cookie成功，可是b站点发起请求到服务器（A站点的后台）时，由于B站点是在A站点的iframe里，而且跨域。Safari浏览器认为是第三方cookie，不会携带到请求里。

解决方案：

p3p就先不说了，不配p3p其他浏览器也会有问题

response.setHeader("P3P", "CP=CAO PSA OUR");

1:按照下图阻止cookie选择永不，即不拦截第三方cookie

2、A站点跳到B站点的某个写cookie的html，写个cookie，然后window.location.replace回来A站点，在打开iframe。这样就不是第三方站点。参考https://github.com/vitr/safari-cookie-in-iframe。比较恶心的是A站点跳回来当时的状态都没了

3、前后端建立信任机制，例如access_token  后端返回给前端加密的key，值也加密。后端解密。然后前端所有ajax请求加上这个值

 

Safari 和 Opera 中的 iframe 页面 Cookie 读取问题解决方法 - JavaScript 技巧
ByteZenith的博客
09-27 848
在 Safari 和 Opera 中，由于安全策略的限制，直接从嵌入的 iframe 页面中读取 Cookie 数据是不可能的。然而，通过使用间接传递的技术，我们可以将父页面中的 Cookie 数据传递给嵌入的页面，并在嵌入的页面中解析和使用这些 Cookie 数据。在上面的示例代码中，我们首先在父页面中获取了所有的 Cookie 数据，并将其传递给嵌入的页面。在嵌入的页面中，我们通过解析传递过来的 Cookie 数据，将其转换为一个对象，并可以进一步使用这些 Cookie 数据进行相应的处理。
解决第三方使用iframe内嵌页面时无法正常登录访问的问题
qq_28013889的博客
11-22 1万+
主要解决了谷歌浏览器高版本浏览器88或以上,引用iframe内嵌页面,因为浏览器的安全策略存在跨域，无法使用cookie获取到token信息，导致页面加载不出来的问题
iframe跨域与session失效问题
星光熠熠 的专栏
01-23 2759
何为跨域session/cookie？   也就是第三方session/cookie。第一方session/cookie指的是访客当前访问的网站给访客的浏览器设置的seesion /cookie, 会被存储在访客的计算机上。第三方session/cookie指的是当前访问的网站中会加载（嵌入）另外第三方的网站代码，例如促销广告，那么第三方网 站也会在访客的计算机上添加session/coo...
PHP网站在Iframe登录无效，cookie跨域session失效导致
小虎哥－不可能变成可能
09-05 817
在网站B的session_start();或 Session::start();在网站A中使用iframe里访问网站B时，一直登录失效，原因是cookie跨域失效。
iframe session 失效 跳转至登陆页面
java-hope
07-25 428
 在跳转的login.jsp页面增加如下代码： if (window != top) top.location.href = location.href;  
谷歌 使用 iframe 标签,标签内发送的请求没有携带cookie的问题
brilliantSt的博客
07-01 4534
问题描述： 项目中需要使用 iframe 标签来嵌入之前做过的页面，但是发送请求时没有携带cookie； 问题解析： 这是因为Chrome 80版本及以上默认是禁止第三方cookie的（具体修改信息请查看 这篇文章 ），需要后端修改； 解决方式： 后端设置cookie的时候加一句 SameSite=None;如果后端暂时没有时间修改，可以先拿火狐浏览器开发… ...
safari,opera嵌入iframe页面cookie读取问题解决方法
09-05
然而，由于浏览器的安全策略，特别是对于第三方cookie的处理，开发者可能会遇到在特定浏览器如Safari、Opera以及某些使用特定内核的搜狗浏览器中无法读取`iframe`内的cookie的问题。这个问题主要源于浏览器对第三方...
使用JWT实现单点登录（完全跨域方案）
热门推荐
Helon的博客
09-10 20万+
首先介绍一下什么是JSON Web Token（JWT）？ 官方文档是这样解释的：JSON Web Token（JWT）是一个开放标准（RFC 7519），它定义了一种紧凑且独立的方式，可以在各方之间作为JSON对象安全地传输信息。此信息可以通过数字签名进行验证和信任。JWT可以使用秘密（使用HMAC算法）或使用RSA或ECDSA的公钥/私钥对进行签名。 虽然JWT可以加密以在各方之间提供保密...
CrossDomainStorage:具有API的跨域存储解决方案，可通过iframe存储数据。 在除Safari之外的所有浏览器上使用本地存储。 由于默认选项“来自第三方和广告商”，因此在Safari上使用Cookie。
05-24
具有API的跨域存储解决方案，可通过iframe存储数据。 在除Safari之外的所有浏览器上使用本地存储。 由于默认选项“来自第三方和广告商”，因此在Safari上使用Cookie。 基本用法 首先，创建一个带有url的通道以保存...
微前端沙箱机制与iframe通信postMessage详解
警警的博客
04-05 953
允许不同窗口（如 iframe、弹出窗口、Worker 线程）之间安全地传递数据，即使这些窗口来自不同源（域名、协议或端口）。要发送的数据，可以是字符串、数字、对象、数组、Blob、File 等（支持结构化克隆算法，详见下文）。实现环境隔离，而 iframe 提供最高级别的隔离性但伴随通信复杂性和性能损耗。iframe 作为天然的沙箱，常用于微前端子应用隔离，但其通信需依赖特定 API。：恶意子应用通过 iframe 执行恶意脚本，窃取父窗口数据。：加载性能差，通信复杂，无法共享依赖（如 React）。
踩坑vue中嵌套iframe项目，嵌套在iframe中的项目无法登录！
jieyucx的博客
04-26 4850
该属性一般是随着Set-Cookie响应头设置的，语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;由于后续接口提示401，判断是登录接口鉴权失败导致的，原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！以iframe标签嵌入一个现有的项目到网站中，嵌入的项目无法正常登录，直接在浏览器地址栏输入url并登录是正常的。
safari跨域cookie的问题
CARL6789的博客
09-01 1641
最近做了一个项目，是将自己公司的H5页面嵌入到其他公司的pc和移动端，采用的方案是iframe，跨域数据传输用的postMessage，最后在联调过程中发现iPhone的微信中无法打开，在 Setting cross-domain cookies in Safari 中有人回答是safari的一个坑，验证cookie无法在safari中跨域传递，亲身实验的post、script、json...
IFRAME跨域单点登录问题
u014170770的博客
07-21 5843
iframe里面src指向了一个跨域的url，www.a.com?ticket=xxxx来调用单点登录，后端通过response.setCookie来写入cookie，听过cookie来判断单点登录是否成功，Android的webview单点登录通过，但是IOS得单点登录验证不通过，经过分析是iframe跨域写cookie的问题，apple webkit权限做的搞，不允许写，解决方案： 1： 在...
探索iframe中的Safari第三方Cookie解决方案
gitblog_00920的博客
08-24 942
探索iframe中的Safari第三方Cookie解决方案 在构建跨域交互的现代Web应用时，我们常常会遇到一个棘手问题：如何在Safari浏览器中处理第三方Cookie。特别是在iframe场景下，这个问题变得尤为突出。今天，我们将一起探索Safari 3rd party cookie in iframe workaround——一个优雅的JavaScript解决方案，它为网站间的数据共享和交互...
p3p iframe session共享及其它
JLife 雅致 博大 精深
12-22 669
IE浏览器iframe跨域丢失Session问题 在开发中，我们经常会遇到使用Frame来工作，而且有时是为了跟其他网站集成，应用到多域的情况下，而Iframe是不能保存Session的因此，网上可以找到很多相关的文章，如果网站可以采用设置Web.Config中的配置： mode="StateServer"stateConnectionString="tcpip=127.0.0.1:42424"...
iframe嵌入跨域错误
m0_70903072的博客
08-02 2182
Blocked a frame with origin 正常情况下，如果iframe嵌入的页面跟外部页面没有交互情况下 不会存在跨域问题，但是这次嵌入的页面调用了一个外部js，里面写了一个方法 window.top.xx。当我们使用 window.parent 或 window.top 来获取父页面的 window 对象，如果两个的域名不一样，所以会出现跨域问题。## 子页面传父页面。## 父页面传子页面。
[号外号外]ios系统中应用webview、safari浏览器cors请求跨域不携带cookie问题解决
weixin_34232744的博客
12-08 1903
【Android党不必操心此问题】 一、问题描述 最近手机升级ios11，在做项目测试时，遇到微信webview和safari浏览器cors跨域情况不携带cookie。百度之后，没有找到相关解决办法，经过几天折腾终于解决。 直接看问题 （1）已登录，其他请求登录超时 二、解决办法 （系统设置/Safari/阻止跨网站跟踪.勾掉） （1）系统设置 （2）Safari （3）阻止跨网站跟踪 ...
当浏览器默认禁用第三方cookie
hadoop17173的专栏
08-26 7141
前一阵子，我们发现高版本的Safari中默认会阻止第三方cookie，如下图所示。 问题 什么是第三方cookie呢？在访问一个网站A时，网站A算作第一方，如果网站A中引用了另一个网站X（网站X的域名与网站A的域名不同）的资源，这时这个网站X就被认为是第三方。需要注意的是，这儿区分不同网站的标准是域名是否相同，而不是这两个网站是否由同一个公司运营。比如，taobao.com和t
前后端分离（跨域）sessionid不一致Safari浏览器解决方案（不能保持会话或者不能存储cookie）
leon-这个程序员不闷骚的博客
03-21 7528
对于前后端分离的项目或者单点登录的系统后台需要做session会话校验或者cookie跨域存储，Safari浏览器可能会遇到无法存储cookie的时候，解决方案如下：PC端Safari浏览器需要设置 偏好设置-> Safari -> 阻止Cookie -> 始终允许偏好设置-> Safari -> 允许访问过的网站-> 始终允许偏好设置-> Safari ...
js 获取iframe中的cookie
最新发布
07-24
<think>我们正在处理一个关于在JavaScript中获取iframe内cookie的问题。根据提供的引用，我们知道在某些浏览器（如Safari和Opera）中，由于安全策略，直接读取iframe的cookie可能会遇到问题，尤其是跨域的情况。此外，引用中还提到跨域情况下iframe的cookie被视为第三方cookie，可能会被浏览器阻止。 根据引用[1]，解决Safari和Opera中iframe页面cookie读取问题的一种方法是使用“间接传递”技术。具体步骤包括： 1. 在父页面中获取嵌入页面的cookie数据（但注意，如果iframe是跨域的，则无法直接通过JavaScript访问其内容，包括cookie）。 2. 将cookie数据通过查询字符串或自定义请求头传递给嵌入的页面。 3. 在嵌入的页面中，通过JavaScript解析传递过来的cookie数据并进行处理。 然而，这种方法要求父页面能够获取到iframe页面的cookie，这本身在跨域时就是不可能的。因此，实际上，如果iframe是跨域的，那么父页面无法直接获取iframe的cookie。所以，引用[1]中提到的“在父页面中获取嵌入页面的cookie数据”这一步，在跨域情况下并不可行。 引用[2]和[3]都提到了跨域iframe的cookie问题，特别是第三方cookie被浏览器阻止的情况。 因此，我们需要分情况讨论： 情况1：同源iframe 如果iframe与父页面同源（即协议、域名、端口都相同），则可以通过以下步骤获取iframe的cookie： 1. 获取iframe的document对象 2. 读取document.cookie 示例代码： var iframe = document.getElementById('myIframe'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; var cookies = iframeDoc.cookie; 情况2：跨域iframe 在跨域情况下，由于同源策略，父页面无法直接访问iframe的内容（包括cookie）。此时，需要采用其他方法。 方法1：使用postMessage进行跨域通信（需要iframe页面配合） 父页面通过postMessage向iframe发送消息，iframe页面监听message事件，然后将cookie信息通过postMessage发送回父页面。 父页面代码： var iframe = document.getElementById('myIframe'); iframe.contentWindow.postMessage('getCookies', 'https://iframe-domain.com'); iframe页面代码（在iframe页面中）： window.addEventListener('message', function(event) { if (event.origin !== 'https://parent-domain.com') return; if (event.data === 'getCookies') { var cookies = document.cookie; event.source.postMessage(cookies, event.origin); } }); 父页面接收消息： window.addEventListener('message', function(event) { if (event.origin !== 'https://iframe-domain.com') return; var cookies = event.data; // 处理cookie }); 方法2：通过服务器端中转（如果可能） 父页面通过自己的服务器代理请求iframe页面的内容，从而获取cookie（但这种方法通常用于获取页面内容，获取cookie并不常见，且需要服务器支持）。 方法3：使用引用[1]中提到的间接传递技术（需要控制iframe页面） 在加载iframe时，将父页面已经获取到的cookie信息（如果父页面能够通过某种方式获得，比如服务器设置父页面可以读取的cookie，然后父页面读取自己的cookie）通过URL参数传递给iframe页面。 iframe页面加载时，解析URL参数中的cookie信息，并写入自己的cookie（注意：这样写入的cookie仍然是第一方cookie，因为是在iframe页面域下写入的）。 但是，这种方法要求iframe页面必须由我们控制，以便在iframe页面中编写解析URL参数并设置cookie的代码。 然而，需要注意的是，如果我们的目标仅仅是获取跨域iframe的cookie，并且我们无法修改iframe页面的源代码（即iframe页面不是由我们控制的），那么由于浏览器的安全策略，我们无法获取到这些cookie。 因此，在跨域且无法修改iframe页面的情况下，获取其cookie是不可能的。 总结： - 同源iframe：可以直接通过contentDocument.cookie获取。 - 跨域iframe：需要与iframe页面进行合作，使用postMessage通信，或者通过URL参数传递（需要控制iframe页面）。 根据用户的问题，他可能是在同源的情况下，也可能是在跨域的情况下。我们需要根据实际情况给出建议。 另外，引用[3]中提到了跨域无法获取cookie的问题，并提到解决跨域问题的一种方法是设置cookie的SameSite属性和Secure属性（如果使用HTTPS），并且设置Domain属性为顶级域名，使得父页面和iframe页面属于同一站点（same site）。但是，这需要两个域名都是同一个顶级域名的子域名，并且需要设置cookie的domain为顶级域名（例如，.example.com）。这样，在子域名之间共享cookie是可行的，但是读取cookie仍然需要同源策略的配合。也就是说，即使cookie在两个子域名之间共享，父页面也无法直接读取iframe页面的document.cookie（因为不同源）。但是，通过设置cookie的domain，可以让iframe页面在请求时自动携带该cookie，这样在iframe页面内部可以读取自己的cookie。如果父页面需要这个cookie的值，只能通过iframe页面用postMessage发送出来。 因此，我们建议： 1. 如果同源，直接使用： var iframe = document.getElementById('iframeId'); var cookies = iframe.contentDocument.cookie; 2. 如果跨域但可以控制iframe页面，使用postMessage方法。 3. 如果跨域且不能控制iframe页面，则无法获取。 注意：如果iframe页面是第三方提供的，通常不会提供这样的接口，因此获取其cookie是不现实的。 下面，我们生成相关问题： §§相关问题§§ 1. 如何判断iframe是否加载完成？ 2. 使用postMessage进行跨域通信时需要注意哪些安全问题？ 3. 在跨域iframe中，如何设置cookie才能使其在父页面所在域下也可用？ 4. 如何解决第三方cookie被浏览器阻止的问题？ 5. 同源策略对iframe有哪些限制？</think>### JavaScript 获取 iframe 中的 Cookie 在 JavaScript 中获取 iframe 的 Cookie 需根据 **同源策略** 处理。以下是不同场景的解决方案： --- #### 1. **同源 iframe（相同协议/域名/端口）** 直接通过 `contentDocument` 访问： ```javascript const iframe = document.getElementById('myIframe'); // 确保 iframe 加载完成 iframe.onload = function() { const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; const cookies = iframeDoc.cookie; // 获取 Cookie 字符串 console.log(cookies); // 示例输出: "token=abc123; user=admin" }; ``` --- #### 2. **跨域 iframe（不同域名）** 受同源策略限制，无法直接读取 Cookie。需通过以下方法间接获取： ##### 方法 1：postMessage 通信（需控制 iframe 页面） **父页面代码**： ```javascript const iframe = document.getElementById('myIframe'); iframe.onload = function() { // 向 iframe 发送获取 Cookie 的请求 iframe.contentWindow.postMessage('getCookies', 'https://iframe-domain.com'); }; // 接收 iframe 返回的 Cookie window.addEventListener('message', (event) => { if (event.origin !== 'https://iframe-domain.com') return; // 验证来源 console.log('Received cookies:', event.data); }); ``` **iframe 页面代码**： ```javascript window.addEventListener('message', (event) => { if (event.origin !== 'https://parent-domain.com') return; // 验证父页面来源 if (event.data === 'getCookies') { // 将 Cookie 发送回父页面 event.source.postMessage(document.cookie, event.origin); } }); ``` ##### 方法 2：URL 参数传递（需控制 iframe 页面） - 父页面将 Cookie 通过 URL 参数传递给 iframe： ```html <iframe src="https://iframe-domain.com/page?cookie=${encodeURIComponent(parentCookies)}"></iframe> ``` - iframe 页面解析 URL 参数并写入自身 Cookie： ```javascript const urlParams = new URLSearchParams(window.location.search); const cookies = urlParams.get('cookie'); document.cookie = cookies; // 写入 iframe 域下的 Cookie ``` --- #### 3. **第三方 Cookie 问题** 浏览器（如 Safari）默认阻止跨域 Cookie： - **解决方案**： 在 iframe 的响应头中设置 `SameSite=None; Secure`，确保 Cookie 可跨域传递： ```http Set-Cookie: token=abc123; SameSite=None; Secure; Path=/ ``` > **注意**：必须使用 HTTPS 协议[^1][^2]。 --- #### 关键注意事项 1. **跨域限制**： 未显式设置 `SameSite=None` 的跨域 Cookie 会被浏览器拦截[^2]。 2. **安全验证**： 使用 `postMessage` 时务必校验 `event.origin`，防止恶意攻击。 3. **Cookie 作用域**： 通过 URL 传递的 Cookie 需在 iframe 域名下重新写入才有效[^1]。 > 若无法控制 iframe 内部代码（如第三方页面），则无法获取其 Cookie，这是浏览器安全策略限制[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值