Question

我在grafana创造了一些不错的情节。我想直接在我的网站管理面板中显示其中一些，而不是强迫用户访问grafana仪表板并强制他们进行双重身份验证（一次用于我的网站，一次用于grafana）。

一个选项是enable anonymous access in grafana，并使用grafana中每个图表可用的共享/嵌入iframe选项。虽然它有效，但如果知道相应URL的任何人都可以看到grafana数据，那么这似乎是一个巨大的漏洞。

然后我看到grafana有HTTP API但我看不到在那里显示某个图表的可能性。

我尝试过使用PHP Proxy的解决方案，如果用户在我的网站上经过身份验证，则会添加授权标头并连接到grafana嵌入网址。但是，它不起作用，配置就是一场噩梦。

最后一个选项是从服务器端的grafana获取图形的png，并仅为我网站中经过身份验证的管理员提供服务。然而，在这种情况下，我放弃了grafana提供OOTB的所有酷东西，如扩展/折叠时间范围，自动刷新等。

Answer 1

基于this answer和this answer，我能够在我的页面中嵌入Grafana信息中心。

放置iframe：

<iframe id="dashboard"></iframe>

然后使用像这样的AJAX请求用Grafana的内容提供它：

<script type="text/javascript">
  $.ajax(
    {
      type: 'GET',
      url: 'http://localhost:3000/dashboard/db/your-dashboard-here',
      contentType: 'application/json',
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader(
          'Authorization', 'Basic ' + window.btoa('admin:admin')
        );
      },
      success: function(data) {
        $('#dashboard').attr('src', 'http://localhost:3000/dashboard/db/your-dashboard-here');
        $('#dashboard').contents().find('html').html(data);
      }
    }
  );
</script>

AJAX请求是强制性的，因为它允许您使用凭据设置标题。

在这一刻，由于CORS，你得到了Grafana服务器的空响应。你要做的是为Grafana启用一些代理。下面是使用docker-compose的Grafana和nginx docker容器的示例配置：

version: '2.1'
services:
  grafana:
    image: grafana/grafana
  nginx:
    image: nginx
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 3000:80

您要做的最后一件事是提供您的nginx.conf文件：

events {
    worker_connections  1024;
}

http {
#
# Acts as a nginx HTTPS proxy server
# enabling CORS only to domains matched by regex
# /https?://.*\.mckinsey\.com(:[0-9]+)?)/
#
# Based on:
# * http://blog.themillhousegroup.com/2013/05/nginx-as-cors-enabled-https-proxy.html
# * http://enable-cors.org/server_nginx.html
#
server {
  listen 80;

  location / {
    #if ($http_origin ~* (https?://.*\.tarunlalwani\.com(:[0-9]+)?$)) {
    #   set $cors "1";
    #}
    set $cors "1";

    # OPTIONS indicates a CORS pre-flight request
    if ($request_method = 'OPTIONS') {
       set $cors "${cors}o";
    }

    # Append CORS headers to any request from
    # allowed CORS domain, except OPTIONS
    if ($cors = "1") {
       add_header Access-Control-Allow-Origin $http_origin always;
       add_header Access-Control-Allow-Credentials  true always;
       proxy_pass      http://grafana:3000;
    }

    # OPTIONS (pre-flight) request from allowed
    # CORS domain. return response directly
    if ($cors = "1o") {
       add_header 'Access-Control-Allow-Origin' '$http_origin' always;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
       add_header 'Access-Control-Allow-Credentials' 'true' always;
       add_header 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept,Authorization' always;
       add_header Content-Length 0;
       add_header Content-Type text/plain;
       return 204;
    }

    # Requests from non-allowed CORS domains
       proxy_pass      http://grafana:3000;
  }
}

}

此文件基于提供的here，但重要的区别是

add_header 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept,Authorization' always;

这表示您允许设置Authorization标题。

如何安全地在我的网站管理面板中显示grafana图表？

1 个答案: