Chrome 80之后 iframe不支持发送第三方cookie的问题

微信扫一扫,分享到朋友圈

Chrome 80之后 iframe不支持发送第三方cookie的问题

最近在项目中遇到了一个问题,项目里有一个授权页面是在快手页面进行授权的,这个授权页面放在了iframe当中来做。客户反馈打开授权页面之后,快手直接进入登录界面,而且在外面的页面已经登录的也被清除掉登录状态进入登录页面了。

问题分析

首先在自己的页面点击授权发现没有问题,在同事的电脑上却出现同样的问题。而且都是chrome 84,win10系统。

发现在控制台有这样几条信息:

A cookie associated with a cross-site resource at http://kuaishou.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
{loginUrl: "https://ad-login.e.kuaishou.com?sid=kuaishou.ad.ds…owUrl%3Dhttp%253A%252F%252Fad.e.kuaishou.com%252F", result: 109, error_msg: "网络连接失败,请刷新当前页面。"}

看到快手在授权中使用了不通的几个域名,然后在里面获取不到登录信息。想起来2月份看到说chrome不支持第三方cookie的事情。但是还不能确定,因为在我的电脑上也有这条信息。

搜了搜iframe里面怎么设置支持第三方cookie获取的方法,但是没有找到。

只能是服务端设置: SameSite=None; Secure
才可以。因为是第三方的页面,所以也搞不了。

让同事在浏览器打开 chrome://flags/#same-site-by-default-cookies
, 找到 SameSite by default cookies
设置为 Disable
,重新测试发现授权页面可以正常访问。确认是没有获取到第三方cookie的问题。

最后就只能把iframe给去掉了,换成正常页面跳转的授权流程了。

Chrome 80变动以后收到的影响

Chrome 80默认把 SameSite
改为 Lax
SameSite
有下面三种值:

  • Strict 仅允许一方请求携带 Cookie,即浏览器将只发送相同站点请求的 Cookie,即当前网页 URL 与请求目标 URL 完全一致。
  • Lax 允许部分第三方请求携带 Cookie
  • None 无论是否跨站都会发送 Cookie

从None改成Lax到底影响了哪些地方的Cookie发送呢?

请求类型 示例 Chrome 80 以前 Strict Lax None
链接 <a href=”https://www.tuicool.com/articles/RBrqYrN/…”></a> 发送Cookie 不发送 发送Cookie 发送Cookie
预加载 <link rel=”prerender” href=”https://www.tuicool.com/articles/RBrqYrN/…”/> 发送Cookie 不发送 发送Cookie 发送Cookie
get 表单 <form method=”GET” action=”https://www.tuicool.com/articles/RBrqYrN/…”> 发送Cookie 不发送 发送Cookie 发送Cookie
post 表单 <form method=”POST” action=”https://www.tuicool.com/articles/RBrqYrN/…”> 发送Cookie 不发送 不发送 发送Cookie
iframe <iframe src=”https://www.tuicool.com/articles/RBrqYrN/…”></iframe> 发送Cookie 不发送 不发送 发送Cookie
AJAX $.get(“https://www.tuicool.com/articles/RBrqYrN/…”) 发送Cookie 不发送 不发送 发送Cookie
Image <img src=”https://www.tuicool.com/articles/RBrqYrN/…”> 发送Cookie 不发送 不发送 发送Cookie

可以看到,Post表单、iframe、AJAX、Image在新的浏览器版本中都从以前的跨站会发送第三方Cookie变成了不发送。使用iframe、AJAX的时候一定要注意,很可能会受到影响。

如果要在服务端设置 SameSite=none
属性的话要注意两点:

  1. HTTP接口不支持 SameSite=none
    , 如果要加 SameSite=none
    ,在Cookie上必须同时加上 Secure
    属性,表示在HTTPS协议下该Cookie才会被发送。这个可以通过Nginx做一下转发处理达到Http中获取的目的。
  2. 需要UA检测,部分老的浏览器不能添加SameSite=none

在一些老的浏览器中,会把 SameSite=none
识别成 SameSite=Strict
,所以服务端需要在Set-Cookie时进行User-Agent检测判断是否设置 SameSite=none

参考链接

微信扫一扫,分享到朋友圈

Chrome 80之后 iframe不支持发送第三方cookie的问题

Spring事务专题(三)事务的基本概念,Mysql事务处理原理

上一篇

Workerman学习笔记(一)初步认识

下一篇

你也可能喜欢

Chrome 80之后 iframe不支持发送第三方cookie的问题

长按储存图像,分享给朋友