如何安全地在我的網站管理面板中顯示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圖表？

回答

相關問題