ウェブサイトの管理パネルにgrafanaグラフを安全に表示するにはどうすればいいですか？

Question

グラファナにいくつか素敵なプロットを作成しました。自分のWebサイトの管理パネルに直接表示したいのですが、ユーザーにgrafanaダッシュボードを強制して強制的に二重認証を強制するのではなく（私のウェブサイトとグラファナ用に一度）。

1つのオプションはenable anonymous access in grafanaで、grafanaのすべてのグラフで使用できるshare/embed in iframeオプションを使用します。 greadが機能する一方で、適切なURLを知っている人ならgrafanaデータを見ることができれば、巨大な脆弱性のようです。

私はグラファナがHTTP APIを持っているのを見ましたが、そこにグラフを表示することはできません。

PHP Proxyのソリューションを試してみましたが、承認ヘッダーが追加され、ユーザーが自分のウェブサイトで認証された場合はgrafana埋め込みURLに接続します。しかし、それは動作しませんし、構成するのは悪夢です。

最終的な選択肢は、サーバー側のgrafanaのグラフのpngを取得し、自分のWebサイトの認証済みの管理者のみに提供することです。しかし、そのような場合には、グラファナが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のプロキシを有効にすることです。 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、しかし重要な違いは、これはあなたがAuthorizationヘッダーを設定できるようにすることを示し

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

です。