跨域 SameSite secure

代码情况：

问题描述：
1、在 chrome 上， pdf预览失败，报错500，可是新开标签页，把请求地址放到地址栏里进行请求，又能获取到相应的数据；
在火狐浏览器均能正常显示。

2、页面内嵌Iframe，可iframe自动跳转到登录页，不能到达目标页面，但是把url单独放在新的地址栏又能到。

经对比发现
1.页面内报错的请求Content-Type 为 application/json;charset=UTF-8 ；而标签内的能够正常返回的Content-Type为 application/pdf;charset=UTF-8 ; 向后端确认其返回的 Content-Type 为 application/pdf；
2.报错的请求没有发送 cookie 给后端。

解析：
1、Chrome 51 开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪；Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。一般默认设置为 Lax ；
在上面代码中用到了；且iframe地址和pdf文件地址不一样，已经涉及到跨域，chrome中的samesite属性就把本身的cookie给拦截了，造成上面这种情况的发生。
2、火狐96.01版本也开始这种默认了，为了安全，浏览器会阻止跨域传cookie，从而获取不到登录相关信息，从而跳转到登录页面。（当然这种情况还有一种可能是网络流量限制，可以通过连接手机热点排查，如果连接手机热点能够正常访问，而连接公司网络后就时而正常，时而凉凉，那就有问题了（2022.01.21亲躺。。））。

解决方案：
方案一：直接关闭 samesite 功能就行，
复制 chrome://flags/#same-site-by-default-cookies 到地址栏，设置 SameSite by default cookies 为 disabled，就能解决这个问题。

火狐浏览器输入 about:config，然后把下面俩 true 改成 false 清除缓存重启就ok了。（亲测ok, 2021.01.21）

about:config

方案二：js代码设置禁用 SameSite。（这个方案的前提是请求为https协议，我没实际操作就不贴代码了）

方案三：如果是https, 可在nginx配置 samesite 即可。（2022.01.21）

 proxy_cookie_path / "/; httponly; secure; SameSite=None";

事后回顾（圣贤时刻）：
祖传的代码突然失灵，前后端猜忌不断，到底是什么导致隔壁王二嫂日渐迷人，愈加销魂，不可描述？花开两枝，各表一朵，咱先看看这个过程的一些感悟。
1.控制台的各种报错都值得重视，特别是红色部分，我最开始想的是先解决pdf预览不成功，报错500的问题，最后实在没办法了，才考虑前面的那个报错。
2.有时候代码都没动过，不代表着问题就与你无关。时代在往前走，你必须得跟上。

参考地址：
Cookie 的 SameSite 属性
据说在2020.02.17日 chrome 将samesite的默认值设置为Lax;(https://www.chromium.org/updates/same-site)

跨域 SameSite secure相关推荐

vue：webpack + vue-cil 中 proxyTable 处理跨域
跨域了解同源政策:所谓"同源"指的是"三个相同". 协议相同域名相同端口相同解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors ...
React配置代理proxy解决跨域问题
一.在package.json中直接设置proxy 和Vue不同,React是在package.json文件中使用proxy配置注意: create-react-app脚手架低于2.0版本时候,可以 ...
chrome浏览器跨域Cookie的SameSite问题导致访问iframe内嵌页面异常
问题还原通过cas单点登陆访问系统,通过一个系统内嵌入第三方系统的页面,同时第三方系统也配置了cas.访问一个系统跳转到登陆页面,然后内嵌入iframe中的第三方系统又进入登陆页面. 初步分析,该系 ...
跨站(cross-site)、跨域(cross-origin)、SameSite与XMLHttpRequest.withCredentials
跨域,注意是浏览器设置的同源策略,是在浏览器端限制的,也就是在当前域名下发送的xhr请求是否和当前域名同域. 如果跨域了,可以通过设置Access-Control-Allow-Origin来解决跨域: ...
谷歌新版本跨域错误深度剖析与解决:request client is not a secure context and the resource is in more-private address
快速解决: ====================================================== 最近在测试http服务时,谷歌浏览器报了以下错误 "The requ ...
谷歌浏览器调用本地exe_无需修改前端和后端代码本地跨域开发设置
现在的项目可以说99.99%都是前后端分离项目,除了极个别老项目. 跨域的本质:其实只是浏览器的一厢情愿,浏览器为了防止开发者或者别有居心之人调用其它域名下的身份信息而做的安全设置,假如不这样做,这个 ...
详解浏览器跨域访问的几种办法
摘要: 本文讨论web前端安全问题以及应对措施,浏览器同源策略以及对资源跨域访问的几种解决方案本文分享自华为云社区<Web安全和浏览器跨域访问>,原文作者:kg-follower . ...
Cors跨域(二)：实现跨域Cookie共享的三要素
高考不努力,工地里当兄弟前言你好,我是YourBatman. 上篇文章(Cors跨域(一):深入理解跨域请求概念及其根因)用超万字的篇幅把Cors几乎所有概念都扫盲了,接下来将逐步提出解决方案等实 ...
Chrome 浏览器 Cookie 跨域共享与升级问题
Chrome 51 版本开始,浏览器的 Cookie 新增加了一个SameSite属性,用来防止 CSRF 攻击和用户追踪.SameSite 可以设置三个值(Strict.Lax.None). 详见阮 ...
【跨域】一篇文章彻底解决跨域设置cookie问题！
一篇文章彻底解决跨域设置cookie问题! 大家好我是雪人~~⛄ 之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用. 是因为谷歌浏览器新版本Chrome 80将Cookie ...

跨域 SameSite secure

跨域 SameSite secure相关推荐

最新文章

热门文章