vue通过iframe方式嵌套grafana图表
文章目录
- 前言
- 一、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