vue通过iframe方式嵌套grafana图表

时间:2024-11-07 07:32:58

文章目录

  • 前言
  • 一、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.****.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