文章目录
- 前言
- 一、iframe方式实现
- xxx.xxx.com拒绝连接
- 登录不跳转
- Cookie 的SameSite
- 问题解决
- 不显示额外区域(kiosk=1)
前言
我们的前端是vue实现的,监控图表是在grafana中的,需要在项目web页面直接显示grafana图表
一、iframe方式实现
xxx.xxx.com拒绝连接
这个报错,需要修改grafana的配置文件
allow_embedding = true
重启grafana服务后,可以解决
登录不跳转
遇到登录不跳转查看F12 Network,看到grafana的 login 接口Respons的时候有个感叹号,点上去会有提示:
This Set-Cookie didn't specify a "SameSite" attribute and was defaulted to "SameSite=lax", and was blocked because it came from a cross-site response which was not the response to a top-level navigation. ....
原因:谷歌最新版的浏览器默认SameSite=Lax (该设置从2020 年7月14全面展开,具体见: https://www.chromestatus.com/feature/5088147346030592),如果设置SameSite=Lax , 并且嵌入Iframe的地址和iframe外的地址不是SameSite,那么嵌入iframe的地址将无法设置设置cookie。
什么是SameSite,首先应该理解site,所谓Site就是域名后缀和其前面的第一部分,比如web.dev可以是一个Site,从而 www.web.dev 和 static.web.dev 可以看成相同的Site。具体可以参考SameSite解释
Cookie 的SameSite
Cookie 的SameSite属性用来限制第三方 Cookie,从而减少安全风险,可以防范“跨站请求伪造”的攻击。
目前SameSite有三个常用的值Strict, Lax, None,他们的作用是对跨站请求的cookie做不同程度的限制
设置为Strict以后,跨站点就不会再传递该cookie
设置为Lax以后,会限制部分请求cookie的传递
不对cookie做设置,会在跨站点情况下发送cookie
常规模式下以前只有这三种情况,但是SameSite还可以设置为None,且从Chrome从76版本开始,开始对设置为None必须和Secure配合使用,表示为
常规模式下以前只有这三种情况,但是SameSite还可以设置为None,且从Chrome从76版本开始,开始对设置为None必须和Secure配合使用,表示为
问题解决
最后通过nginx代理统一域名,而且在nginx层面都设置https访问。问题成功解决。
参考链接:
chrome 同站策略(samesite)问题及解决方案https://blog.csdn.net/leftfist/article/details/112283784
iframe跨域解决方案
https://www.caodegao.com/archives/iframe-kua-yu-jie-jue-fang-an
不显示额外区域(kiosk=1)
https://domain.com/d/ce2allubty9z4e/e4b89a-e58aa1-e697a5-e5bf97?orgId=1&from=now-30m&to=now&theme=light&refresh=15m&&kiosk=1