共计 2124 个字符,预计需要花费 6 分钟才能阅读完成。
最近在我的项目中遇到了一个问题,我的项目里有一个受权页面是在快手页面进行受权的,这个受权页面放在了 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=”…”></a> | 发送 Cookie | 不发送 | 发送 Cookie | 发送 Cookie |
预加载 | <link rel=”prerender” href=”…”/> | 发送 Cookie | 不发送 | 发送 Cookie | 发送 Cookie |
get 表单 | <form method=”GET” action=”…”> | 发送 Cookie | 不发送 | 发送 Cookie | 发送 Cookie |
post 表单 | <form method=”POST” action=”…”> | 发送 Cookie | 不发送 | 不发送 | 发送 Cookie |
iframe | <iframe src=”…”></iframe> | 发送 Cookie | 不发送 | 不发送 | 发送 Cookie |
AJAX | $.get(“…”) | 发送 Cookie | 不发送 | 不发送 | 发送 Cookie |
Image | <img src=”…”> | 发送 Cookie | 不发送 | 不发送 | 发送 Cookie |
能够看到,Post 表单、iframe、AJAX、Image 在新的浏览器版本中都从以前的跨站会发送第三方 Cookie 变成了不发送。应用 iframe、AJAX 的时候肯定要留神,很可能会受到影响。
如果要在服务端设置 SameSite=none
属性的话要留神两点:
- HTTP 接口不反对
SameSite=none
,如果要加SameSite=none
,在 Cookie 上必须同时加上Secure
属性,示意在 HTTPS 协定下该 Cookie 才会被发送。这个能够通过 Nginx 做一下转发解决达到 Http 中获取的目标。 - 须要 UA 检测,局部老的浏览器不能增加 SameSite=none
在一些老的浏览器中,会把 SameSite=none
辨认成SameSite=Strict
,所以服务端须要在 Set-Cookie 时进行 User-Agent 检测判断是否设置SameSite=none
参考链接
- Chrome’s Changes Could Break Your App: Prepare for SameSite Cookie Updates
- Cookie 的 SameSite 属性