升级chrome后本地 localhost 无法登陆, Cookie 的 SameSite 属性

写在开头

小编是一名前端攻城狮,  

前一天晚上, 因为追新, 就升级了 chrome 80.0.3987.149 , 

第二天上班, 悲剧了,  本地 localhost 无法登陆在开发的网站. 账号密码没有变啊, dev 环境也能登陆呀, 为什么本地就是不行呢? 各种排查找不到所以然, 主要是别人的开发环境是好的

就 TMD 纳闷了. 回家睡一觉, 把电脑睡坏了?  也没对它怎么着啊

最后发现浏览器爆出这样的警告

升级chrome后本地 localhost 无法登陆, Cookie 的 SameSite 属性_第1张图片

究其原因

在 I/O 开发者大会上,Google 宣布 Chrome 将引入两项隐私保护和安全功能。其一称之为 same-site cookies ,另一个防指纹的 anti-fingerprinting protection。same-site cookies 是基于 Chrome 和 Mozilla 开发者花了三年多时间制定的 IETF 标准。

该标准描述了 HTTP 头文件中的一个新属性 SameSit,它由网站设置,描述了 cookies 加载的情况。严格的 SameSite 属性意味着只能加载同一个网站的 cookies,宽松或缺省意味着可以加载跨站 cookies

所有没有设置 SameSite 属性的旧 cookies 将被自动归为缺省,浏览器将会视其为跨站 cookies。

anti-fingerprinting protection 则是防止网络广告商(非 Google)滥用用户指纹技术跟踪用户。

解决问题

下面给客官解决问题

1.采用两套cookie 例如原cookie中已经种入了session-id=xxxxx,可以维持不变,再额外种入另一个cookie session-id-2=xxxxx同时设置特性SameSite为none secure: true。这样可以兼容新旧版的所有浏览器。这样就要求后端取得时候判断session-id不存在,再取cookie session-id-2的值

2.JWT方案,统一把token放在header的authorization,就不存在跨域携带cookie的困扰了

第一个方案主要适配在于后端,前端基本不需要变动,

第二个方案需要前后端做一定的改造,视情况而定

最快的解决方案

打开chrome  输入chrome://flags/搜索 SameSite by default cookies

找到SameSite by default cookies和Cookies without SameSite must be secure

将上面两项设置为 Disable


升级chrome后本地 localhost 无法登陆, Cookie 的 SameSite 属性_第2张图片

你可能感兴趣的:(升级chrome后本地 localhost 无法登陆, Cookie 的 SameSite 属性)