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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468249.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记:黑马程序员JavaWeb开发教程(2024.11.9)

9.1 Mybatis-基础操作-环境准备 这里也没做,到时候写案例,如果需要环境配置什么的,可以看看这个 9.2 Mybatis-基础操作-删除 删除需要动态获取需要删除的id,使用方法传参,#{}的方式实现 在编写的delete方法中&a…

[Docker#3] LXC | 详解安装docker | docker的架构与生态

目录 1.LXC容器操作 安装LXC LXC容器操作步骤 2.理论 LXC 是什么? Docker 是什么 Docker 和虚拟机的区别 Docker 和 JVM 虚拟化的区别 Docker 版本 ⭕Docker 官方网站(建议收藏) Docker 架构 生活案例 Docker 生态 Docker 解决…

Spark的学习-02

Spark Standalone集群的安装 架构:普通分布式主从架构 主:Master:管理节点:管理从节点、接客、资源管理和任务 调度,等同于YARN中的ResourceManager 从:Worker:计算节点:负责利用自己…

白杨SEO:百度在降低个人备案类网站搜索关键词排名和流量?怎样应对?【参考】

很久没有写百度或者网站这块内容了,一是因为做百度网站朋友越来越少,不管是个人还是企业;二是百度上用户搜索与百度给到网站的流量都越来越少。 为什么想到今天又来写这个呢?因为上个月有个朋友来咨询我说网站百度排名全没了&…

一个怀旧,俺的第一个共享软件

今天网友说起了 福彩双色球的程序。俺就想起这个来了,这是俺的第一个共享软件,收入大约15000。在当时来说,速度算是最快的。有些地方用了汇编优化(题外话,最近俺看到新闻,FFmpeg的作者也用汇编优化 性能提升…

QCustomPlot添加自定义的图例,实现隐藏、删除功能(二)

文章目录 QCustomPlot初识和基本效果图实现步骤:详细代码示例:实现原理和解释:使用方法:其他参考要实现一个支持复选框来控制曲线显示和隐藏的自定义 QCPLegend 类,可以通过继承 QCPLegend 并重写绘制和事件处理方法来实现,同时发出信号通知曲线的状态变更。 QCustomPl…

96.【C语言】存储体系结构

目录 1.金字塔图 2.形象理解的图 3.分析 4.推荐阅读 1.金字塔图 2.形象理解的图 3.分析 缓存的大小<<内存的大小 缓存分三级:速度:一级>二级>三级 在95.【C语言】数据结构之双向链表的头插,头删,查找,中间插入,中间删除和销毁函数文章遗留了一个问题,缓存命…

智能合约在供应链金融中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 智能合约在供应链金融中的应用 智能合约在供应链金融中的应用 智能合约在供应链金融中的应用 引言 智能合约概述 定义与原理 发展…

ODOO学习笔记(4):Odoo与SAP的主要区别是什么?

Odoo 和 SAP 都是知名的企业资源规划&#xff08;ERP&#xff09;软件&#xff0c;它们之间存在以下一些主要区别&#xff1a; Odoo与SAP的区别 一、功能特点 功能广度 Odoo&#xff1a;提供了一整套全面的业务应用程序&#xff0c;涵盖了销售、采购、库存管理、生产、会计、…

Leetcode 买卖股票的最佳时机 Ⅱ

使用贪心算法来解决此问题&#xff0c;通过在价格上涨的每一天买入并在第二天卖出的方式&#xff0c;累计所有上涨的利润&#xff0c;以实现最大收益。关键点是从第二天开始遍历&#xff0c;并且只要当前比前一天价格高&#xff0c;我们就在前一天买入然后第二天卖出去。下面是…

Unity常见问题合集(一)

PS&#xff1a;不定期更新...... 目录 &#xff08;1&#xff09;无法关闭自动编译&#xff08;Edit — Preference — General — Auto Refresh&#xff09; &#xff08;1&#xff09;无法关闭自动编译&#xff08;Edit — Preference — General — Auto Refresh&#xff0…

库打包工具 rollup

库打包工具 rollup 摘要 **概念&#xff1a;**rollup是一个模块化的打包工具 注&#xff1a;实际应用中&#xff0c;rollup更多是一个库打包工具 与Webpack的区别&#xff1a; 文件处理&#xff1a; rollup 更多专注于 JS 代码&#xff0c;并针对 ES Module 进行打包webpa…

软件工程 软考

开发大型软件系统适用螺旋模型或者RUP模型 螺旋模型强调了风险分析&#xff0c;特别适用于庞大而复杂的、高风险的管理信息系统的开发。喷泉模型是一种以用户需求为动力&#xff0c;以对象为为驱动的模型&#xff0c;主要用于描述面向对象的软件开发过程。该模型的各个阶段没有…

“高级Java编程复习指南:深入理解并发编程、JVM优化与分布式系统架构“

我的个人主页 接下来我将方享四道由易到难的编程题&#xff0c;进入我们的JavaSE复习之旅。 1&#xff1a;大小写转换------题目链接 解题思路&#xff1a; 在ASCII码表中&#xff0c;⼤写字⺟A-Z的Ascii码值为65- 90&#xff0c;⼩写字⺟a-z的Ascii码值为97-122。每个字 ⺟…

基于Zynq FPGA对雷龙SD NAND的性能测试评估

文章目录 一、SD NAND特征1.1 SD卡简介1.2 SD卡Block图 二、SD卡样片三、Zynq测试平台搭建3.1 测试流程3.2 SOC搭建 四、软件搭建五、测试结果六、总结 一、SD NAND特征 1.1 SD卡简介 雷龙的SD NAND系列有多种型号&#xff0c;本次测试使用的是CSNP4GCR01-AMW和CSNP32GCR01-A…

使用AT指令通过ESP8266实现TCP/IP服务器的创建、发送数据和接收数据

1. 初始化ESP8266 首先&#xff0c;确保ESP8266模块进入AT指令模式。 AT 2. 设置ESP8266为STA或APSTA模式 首先&#xff0c;确保ESP8266处于正确的模式。为了创建TCP/IP服务器&#xff0c;通常需要设置为STA模式&#xff08;连接到外部路由器&#xff09;或APSTA模式&#x…

Springboot+Vue+mysql前后端分离的Java项目部署教程

参考了网上许多文章&#xff0c;有的使用的是nginx&#xff0c;eclipse&#xff0c;其实只要是数据库或者java的软件基本都大同小异。 本人使用phpstudy对项目进行部署&#xff0c;亲测有效。 需要的软件&#xff1a; 1.Node.js安装&#xff08;ps&#xff1a;这一步我也不知道…

【MySQL】数据库整合攻略 :表操作技巧与详解

前言&#xff1a;本节内容讲述表的操作&#xff0c; 对表结构的操作。 是对表结构中的字段的增删查改以及表本身的创建以及删除。 ps&#xff1a;本节内容本节内容适合安装了MySQL的友友们进行观看&#xff0c; 实操更有利于记住哦。 目录 创建表 查看表结构 修改表结构 …

常用的c++新特性-->day03

断言和异常 断言断言的基本使用 静态断言静态断言的基本使用 异常异常基本使用c98异常案例 noexceptnoexcept简单案例 断言 断言的基本使用 #include <iostream> #include <cassert>// >>>>>>>>>>>>>>>> 断言的…

Python数据分析NumPy和pandas(二十七、数据可视化 matplotlib API 入门)

数据可视化或者数据绘图是数据分析中最重要的任务之一&#xff0c;是数据探索过程的一部分&#xff0c;数据可视化可以帮助我们识别异常值、识别出需要的数据转换以及为模型生成提供思考依据。对于Web开发人员&#xff0c;构建基于Web的数据可视化显示也是一种重要的方式。Pyth…