Neo Anderson's Blog

Chrome 跨域限制登录问题的排查解决方案

字数统计: 784阅读时长: 3 min
2022/01/07
loading

现象:

  • 一些集成了三方sso登录鉴权系统, 需要反向写入自有域名cookie. 但是发现无法写入.

原因分析:

  • chrome 一般会为cookie信息设置 SameSite属性,用来防止 CSRF 攻击和用户追踪。谷歌默认SameSite属性的为Lax。

解决方案

解决方法A - 适用于 80 -90 版本

如果是 80 及以上版本, 修改浏览器默认安全策略为 Disabled 状态, 然后重启浏览器, 重试登录即可

1, Chorme 浏览器检查版本号, 80 版本后修改了跨域安全问题, 通过 Chrome 菜单, 选择”关于 Google Chorme”, 检查版本号是否大于或等于 80
查看版本信息系

2,地址栏输入:chrome://flags/#same-site-by-default-cookies
配置项页面

3、地址栏输入:chrome://flags/#cookies-without-same-site-must-be-secure
配置项细节

4、 部分同学可能设置了严格的安全模式,需要调整cookie限制等级
Chrome → 设置 → 隐私设置和安全性 →设置等级为 (允许所有cookie or 在无痕模式下阻止第三方cookie)
Cookie等级设置
5、重启浏览器。

解决方案B - 适用于91 - 94 版本

Mac:Mac系统下可以通过命令行携带参数打开浏览器的方式来解决,前提须关闭所有浏览器窗口并退出浏览器后再进行操作。

1
2
开启Chrome命令:open -a "Google Chrome" --args --disable-features=SameSiteByDefaultCookies
开启Chromium版Edge浏览器命令:open -a "Microsoft Edge" --args --disable-features=SameSiteByDefaultCookies
解决方案C - 适用于94及以上版本的Chrome浏览器

Chromium项目官网 提到在94版本通过命令行禁用设置SameSite默认值的方式会被移除,到时方案1和方案2的方式都将无法使用,后续可通过nginx等代理工具或软件将跨域请求转为非跨域请求来解决改问题。

或者基于实验属性进行尝试
1、地址栏输入:chrome://flags/ ,并在当前页面搜索: Block insecure private network requests. , 并且设置为disabled

实验属性设置

解决方案D - 最新版本Chrome浏览器(140+)
  • 开发调试环境
1
2
#1,使用命令行禁用检查启动chrome(未完全验证是否可行)
open -a "Google Chrome" --args --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#2,确认上述命令行可行,可以保存为自动执行脚本
#!/bin/bash

# —— 先优雅退出已运行的 Chrome(如有)——
if pgrep "Google Chrome" > /dev/null; then
# 发送标准退出指令(模拟用户点击“退出”)
osascript -e 'tell application "Google Chrome" to quit'
# 等待最多 5 秒让其正常退出
for i in {1..5}; do
sleep 1
if ! pgrep "Google Chrome" > /dev/null; then
break
fi
done
# 若仍未退出,强制终止(兜底)
pkill -x "Google Chrome" 2>/dev/null
fi

# —— 启动带参数的 Chrome ——
open -b com.google.Chrome --args --disable-features=ExtensionManifestV2Unsupported,ExtensionManifestV2Disabled

mac层序自动保存截图

  • 生产环境

后端正确配置 CORS 头部,包括 Access-Control-Allow-Credentials: true。

后端发送带有 SameSite=None; Secure 属性的 Set-Cookie(如果使用 Cookie 进行登录认证)。

前端在发送跨域请求时,如果需要携带凭证,确保传递相关选项(如 fetch 的 credentials: ‘include’)。

CATALOG
  1. 1. 现象:
  2. 2. 原因分析:
  3. 3. 解决方案
    1. 3.1. 解决方法A - 适用于 80 -90 版本
    2. 3.2. 解决方案B - 适用于91 - 94 版本
    3. 3.3. 解决方案C - 适用于94及以上版本的Chrome浏览器
    4. 3.4. 解决方案D - 最新版本Chrome浏览器(140+)