Chrome浏览器版本升级带来的跨域访问问题

简介: 本文主要讲Chrome浏览器版本升级带来的跨域访问问题



1、背景


最近在公司研发群,发现有人反馈内部网站跨域访问莫明的出现站点重定向问题,并且都是谷歌80 版本之后出现。


准确的说是78版本之后,并且可能存在同一版本不同人的浏览器表现不同,作者本人也升级了谷歌版本为最新,没有发现这个问题。换句话说这TM就是一桩冤案。作为一个苦逼的研发,冤案不是第一次 见,还是要解决的。


2、探索


重定向的原因无非就是没有cookie,导致没有登录态。沿着这个思路我们展开了一系列的探索。


2.1 探索1,谷歌设置,允许第三方Cookie


结果:失败,没有解决问题


2.2 探索2,浏览器改变SameSite设置


  • 谷歌浏览器地址栏输入:chrome://flags/
  • 找到:SameSite by default cookies、Cookies without SameSite must be secure
  • 设置上面这两项设置成 Disable

结果:成功解决,但是,这个方案有点局限,如果所有人都遇到这个问题,你还需要给每一个人都去说一遍,你需要打开chrome://flags/ ,设置SameSite,天,太麻烦了。出口堵住太麻烦了,当然这也是一种临时方案,所以我们还是要像一个简单点的方案,就是从来源去解决。


2.3 探索3,set-cookie改变SameSite设置


网站跨域访问莫明的出现站点重定向,源头在哪,就是在统一登录的地方,如果我们在统一登录的地方设置了SameSite,哪是不是就在所有用到当前登录态的地方就解决了这个问题。怎么操作了。 操作很简单,其实就是在报文里面set-cookie,添加SameSite=None; Secure

结果:完美解决,一劳永逸。不要给所有人解释你需要怎么怎么做了。


3、原因


最后我回过来思考一下为什么会出现这样的原因了。大家发现在探索的过程中,基本都是改变了SameSite的设置,才成功解决的。 Cookie 的SameSite属性用来限制第三方 Cookie,从而减少安全风险。它可以设置三个值:


  • Strict

Strict最为严格,完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。换言之,只有当前网页的 URL 与请求目标一致,才会带上 Cookie。

Set-Cookie: CookieName=CookieValue; SameSite=Strict;


这个规则过于严格,可能造成非常不好的用户体验。比如,当前网页有一个 GitHub 链

接,用户点击跳转就不会带有 GitHub 的 Cookie,跳转过去总是未登陆状态。


  • Lax

Lax规则稍稍放宽,大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外。

Set-Cookie: CookieName=CookieValue; SameSite=Lax;


设置了Strict或Lax以后,基本就杜绝了 CSRF 攻击。当然,前提是用户浏览器支持 SameSite 属性。


  • None

网站可以选择显式关闭SameSite属性,将其设为None。不过,前提是必须同时设置Secure属性(Cookie 只能通过 HTTPS 协议发送),否则无效。


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


chrome升级到80版本之后(准确的说是78版本之后),cookie的SameSite属性默认值由None变为Lax,这个才是本次事件的根本原因。


这个问题在社区也是有讨论的,讨论地址:github.com/google/goog…

目录
相关文章
|
1天前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
|
8天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
74 9
|
11天前
|
域名解析 网络协议 前端开发
浏览器输入域名网址访问后的过程详解
1、以91处理网为例,客户端浏览器通过DNS解析到www.91chuli.com,IP地址是202.108.22.5,通过这个IP地址找到客户端到服务器的路径。客户端浏览器发起一个HTTP会话到202.108.22.5,然后通过TCP进行封装数据包,输入到网络层。
22 2
|
25天前
|
Web App开发 开发者
|
27天前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
|
1月前
|
Web App开发 缓存 安全
Chrome浏览器启动参数大全
这是一组用于定制浏览器行为的命令行参数,包括但不限于:不停用过期插件、放行非安全内容、允许应用中心脚本、停用GPU加速视频、禁用桌面通知、禁用拓展及各类API、调整缓存设置、启用打印预览、隐身模式启动、设定语言、使用代理服务器、无头模式运行等。通过这些参数,用户可以根据需求灵活调整浏览器功能与性能。
|
2月前
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
|
4天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
2天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
350 1