【BUG排查】关于Grafana图表嵌入到自有Web应用不显示的问题由于要统计项目的几个节点的硬件数据（硬盘、网络、CP

背景

由于要统计项目的几个节点的硬件数据（硬盘、网络、CPU等等），所以通过docker配置了Prometheus+Grafana+Node-Exporter的监控一条龙组合。

现在的需求是，要将Grafana图表嵌入到项目自有Web应用内做展示。

问题

当我将dashboard链接分享出来，通过iframe嵌套做展示，内容并没有展示，并且出现如下错误提示：

refused to display 'xxx' in a frame because it set 'x-frame-options' to 'deny'

排查

通过网页搜索，需要修改grafana.ini，具体修改如下：

# 允许嵌入 
allow_embedding = true 

# 允许匿名登录 
[auth.anonymous] 
# enable anonymous access 
enabled = true 

# specify organization name that should be used for unauthenticated users 
org_name = Main Org. 

# specify role for unauthenticated users 
org_role = Viewer

但是，上面的配置并不生效，继续排查~

终于在github上找到解决方案(allow_embedding does not change X-Frame-Options · Issue #52364 · grafana/grafana · GitHub)

最终配置如下：

# 允许嵌入 
allow_embedding = true 

# 允许匿名登录 
[auth.anonymous] 
# enable anonymous access 
enabled = true 

# specify organization name that should be used for unauthenticated users 
org_name = Main Org. 

# specify role for unauthenticated users 
org_role = Viewer

[security]
allow_embedding = true

效果展示

用到的测试html代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>grafana</title>
</head>

<body>
  <!-- 单个图表嵌入语句-->
  <iframe
    src="http://192.168.190.18:3000/d-solo/rYdddlPWk/node-exporter-full?orgId=1&refresh=1m&from=1722492670967&to=1722579070968&panelId=20"
    width="450" height="200" frameborder="0"></iframe>
  <!-- 整个Dashboard嵌入语句-->
  <iframe
    src="http://192.168.190.18:3000/d/rYdddlPWk/node-exporter-full?orgId=1&refresh=1m&from=1722493578526&to=1722579978526"
    width="100%"
    height="800"
    frameboader="0"
  ></iframe>
</body>
  
</html>

效果图如下：