Iframe 同站策略(samesite)问题及解决方案

3,762 阅读1分钟

chrome自版本80之后,出现了所谓同站策略问题。
浏览器系列之 Cookie 和 SameSite 属性

即,在A页面请求B页面,如果chrome发现它们不是同一个站点的话,就不传cookie给B页面所在的服务器。众所周知,原本cookie是会附在浏览器到服务器的每个请求(request)里的,仿佛这是理所应当,自然而然的,现在好了,chrome区分情况,不一定允许这么干了。

参考Cookie 的 SameSite 属性

1628494573746-de0991eb-a2b8-4a1e-bdfb-3d733fe13d21-image.png
其中
图片.png
以前,chrome默认SameSite=None,80版本以后则默认是Lax了。这也是为什么chrome升级以后,程序突然异常的缘故。

解决方案

1. Set-Cookie:SameSite=None

将response的header设置Set-Cookie:SameSite=None

Set-Cookie: widget_session=abc123; SameSite=None; Secure

Set-Cookie

A项目的页面用iframe嵌入了B项目的页面,是A项目来设置set-cookie还是B项目?应当是B。因为嵌入的是B项目的页面,response来自B服务器.
注意必须同时设置Secure属性(Cookie 只能通过 HTTPS 协议发送),否则无效。

2. Nginx转发

同站的话,域名要保持一致,端口可以不一样。转发的话,可以域名或IP相同,端口不同。

图片.png

注意 由于我们项目cookie的命名基本相同,所以做了转发之后同名的cookie会被覆盖,这时候需要更改cookie存放的Path,如图中的这段代码:

location /xietong {
  proxy_pass http://xxxxx/;
  proxy_cookie_path / /xietong;
}

这样就能解决Iframe 同站策略(samesite)了