vue通过iframe方式嵌套grafana图表

---

前言

我们的前端是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