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

我在grafana中创建了一些不错的地块。我想直接在我的网站的管理面板中显示其中一些，而不是强迫用户去grafana仪表板并强制它们进行双重验证（一次用于我的网站，一次用于grafana）。如何安全地在我的网站管理面板中显示Grafana图表？

一个选项是enable anonymous access in grafana并使用iframe中的share/embed选项可用于grafana中的每个图形。虽然它起作用，但如果有人知道适当的URL可以看到grafana数据，这似乎是一个巨大的漏洞。

然后我看到格拉法纳有HTTP API但我看不到在那里显示某个图形的可能性。

我试了一个解决方案，用PHP Proxy添加一个授权标题，并连接到grafana嵌入URL，如果用户在我的网站上进行身份验证correclty。但是，它不起作用，这是一个配置的噩梦。

最后一个选项是从服务器端的grafana抓取图形的png，并将它们仅用于我的网站中经过身份验证的管理员。然而，在这种情况下，我失去所有的很酷的东西grafana提供开箱即用的，像展开/折叠时间范围，自动刷新等

来源

2017-02-17 fracz

你能在这方面取得进展吗？ – creimers

我放弃了直接嵌入grafana图。相反，在我的应用程序中，我暴露了[Graphite API]的有趣部分（https://graphite-api.readthedocs.io/en/latest/）。他们以json的形式返回指标数据。在应用程序的管理面板中，我使用[chart.js]（http://www.chartjs.org/）将图像渲染为图形。有点乏味，因为grafana已经使用相同的Graphite API做同样的事情，但是我发现没有办法在适当的限制下重用它。 – fracz

谢谢。希望能解决这个问题... – creimers

基于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启用一些代理。有Grafana和使用nginx的泊坞窗容器的示例配置下面泊坞窗-组成：

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头。

来源

2017-08-24 14:33:43 pt12lol

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

回答

相关问题