为什么我的 Grafana iframe 无法显示在我的 Wordpress 网站上？

Question

我的虚拟专用服务器上运行着一台 Grafana 服务器，用于绘制室内空气质量数据图。我想在 Wordpress 页面上分享图表的实时版本。

Grafana 具有通过“嵌入”选项共享图表的功能，请参见下图：

<iframe src="http://localhost:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo" width="450" height="200" frameborder="0"></iframe>

为了共享此图，我更改了 Grafana 配置文件，使其具有allow_embedding = true 和disable_sanitize_html = true。这在this视频中进行了解释。

我已复制 Grafana 嵌入 HTML，将“localhost”替换为我的网站 (cairanvanrooyen.com) 并粘贴到我的 WordPress 网站 (https://cairanvanrooyen.com/2024/12/28/ieq-monitoring-test-页/）：

<iframe src="http://cairanvanrooyen.com:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo" width="450" height="200" frameborder="0"></iframe>

但是，此 iframe 显示为空框...

实时 Grafana 图似乎可以从外部访问并且实时： http://cairanvanrooyen.com:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo

为什么 Grafana 图表不显示在我的 WordPress 网站上？我注意到 Grafana 是 HTTP，而不是 HTTPS，这是问题的根源吗？

Answer 1

您的 Grafana 页面当前不允许在 iFrame 中显示它，因为它是通过 http 而不是 https 托管的。您可以通过打开 WordPress 站点上的开发工具来查看这一点。

所以你是对的，您可以通过通过 https 托管 Grafana 页面来解决此问题。