Grafana Embed (iframe) via XHR throught HAProxy：Grafana 未能加载其应用程序文件

Posted 2023-02-16

【中文标题】Grafana Embed (iframe) via XHR throught HAProxy：Grafana 未能加载其应用程序文件

【英文标题】：Grafana Embed (iframe) via XHR throught HAProxy : Grafana has failed to load its application files

【发布时间】：2022-01-01 22:18:29

【问题描述】：

我们正在尝试开发一种解决方案，允许在网络应用程序（角度）中查看 grafana iframe（嵌入）。

前端上下文：

出于安全考虑，我们已在网页中登录。 我们希望使用 grafana 源（我们的 grafana 服务器）显示元素。 我们希望 iframe 在被验证为 grafana 用户的同时显示一些 grafana dashobards 为此，我们需要在请求中添加“X-WEBAUTH-USER”标头 我们使用 XMLHttpRequest 完成，将 url 设置到我们的服务器，添加请求的标头，然后将 url 添加到 iframe 元素。

代码如下：

html：

ts:

架构上下文：

与 Docker 一起工作的每一部分（前端的 nginx 服务器、grafana、haproxy）都有自己的容器。

HAProxy：

前端 xhr 请求来自客户端浏览器并转到 http://..fr

HAProxy 拦截请求重定向到 grafana 容器

我们正在使用 Haproxy CORS 模块来允许 xhr 的飞行请求

frontend http-proxy
  mode http
  bind *:80
  http-request lua.cors "*" "*" "*"
  http-response lua.cors
  acl is_grafana req.hdr(Host) -i -m beg <grafana-host>.<domain>
  use_backend grafana if is_grafana

backend grafana
  mode http
  server static <grafana-container-host>:3000 check

格拉法纳：

代理身份验证已激活：

[auth.proxy]
enabled = true
header_name = X-WEBAUTH-USER
header_property = username
auto_sign_up = false
ldap_sync_ttl = 60
sync_ttl = 60
whitelist = 
headers = 
enable_login_token = false

匿名身份验证已禁用：

  [auth.anonymous]
  # enable anonymous access
  enabled = false
  # specify organization name that should be used for unauthenticated users
  org_name = Main Org.
  # specify role for unauthenticated users
  org_role = Viewer
  # mask the Grafana version number for unauthenticated users
  hide_version = false

问题： iframe 不显示仪表板，但我们收到此消息：

如果您看到此 Grafana 无法加载其应用程序文件

这可能是由您的反向代理设置引起的。 如果您在子路径下托管 grafana，请确保您的 grafana.ini root_url 设置包含子路径。如果不使用反向代理，请确保将 serve_from_sub_path 设置为 true。 如果您有本地开发版本，请确保您使用以下方式构建前端：yarn start、yarn start:hot 或yarn build 有时重启 grafana-server 会有所帮助 检查您是否使用了不受支持的浏览器。如需更多信息，请参阅支持的浏览器列表。

开发控制台中没有错误。

如果我们直接访问 grafana 网络应用程序 (http://..fr)，我们不会收到此消息，它可以正常工作。

我们尝试了什么：

重启 grafana 服务器（无变化） 支持使用的浏览器（Chrome、Firefox） 我们没有使用子路径，因此在 grafana conf 中将其设置为 false： serve_from_sub_path = false 我们尝试在 haproxy 中应用子路径来检查它，但得到了相同的结果

其他主题建议：

https://community.grafana.com/t/nginx-reverse-proxy-with-ssl-leads-to-failed-to-load-application-files/20726/4

=> 这是我们的 conf：

root_url = %(protocol)s://%(domain)s:%(http_port)s/
domain = <grafana-host>.<domain>.fr

"If you're seeing this Grafana has failed to load its application files" Error with Docker Grafana deployment behind reverse proxy：

如果使用 docker，请在环境中使用以下设置来完成此操作。 GF_SERVER_ROOT_URL=https://myurl.ddns.net:443/grafana/ GF_SERVER_SERVE_FROM_SUB_PATH=true => 我们已经在 Grafana 配置文件中设置了这个。

问题在于 grafana 正在侦听端口 3000，而您的反向代理在端口 443 上。 Grafana 正在 grafana 主机的 443 端口（它没有监听）而不是 3000（它正在监听）上寻找资产。 修复方法是将外部端口添加到 grafana.ini 中的 root_url 参数 root_url = https://myurl.ddns.net:443/grafana/

=> 我们也尝试添加此内容，但仍无法正常工作。

https://forums.percona.com/t/if-youre-seeing-this-grafana-has-failed-to-load-its-application-files/8614

此问题在扩展磁盘空间后得到解决。

=> 磁盘有足够的可用空间。

【参考方案1】：

您的身份验证实现非常幼稚。您将成功在 iframe 中打开仪表板 URL。但是仪表盘页面加载了很多 JS/CSS 文件、API 调用，这些都没有通过X-WEBAUTH-USER 进行身份验证，因此它们很可能无法加载 = 错误Grafana has failed to load its application files 在这种情况下是有效的。

您应该从头开始重新设计您的身份验证概念。您当前的方法不会像您看到的那样起作用+它是不安全的。 （顺便说一句，一些想法：https://github.com/jangaraj/grafana-iframe）