Jak bezpiecznie wyświetlać graficzne wykresy w panelu administracyjnym mojej witryny?

Question

Stworzyłem kilka ładnych działek w grafanie. Chcę wyświetlić niektóre z nich bezpośrednio w panelu administracyjnym mojej witryny, zamiast zmuszać użytkowników do korzystania z pulpitu graficznego i zmuszania ich do podwójnego uwierzytelniania (raz dla mojej witryny i raz dla grafana).

Jedna opcja to enable anonymous access in grafana i użyj opcji udostępniania/osadzania w opcji iframe dostępnej dla każdego wykresu w grafanie. Mimo że działa to gread, wydaje się ogromną luką w zabezpieczeniach, jeśli każdy, kto zna odpowiedni adres URL, może zobaczyć dane graficzne.

Potem widziałem, że grafana ma HTTP API, ale nie widzę możliwości wyświetlenia tam określonego wykresu.

Próbowałem rozwiązania z PHP Proxy, które doda nagłówki autoryzacji i połączyć się z adresem URL grafana, jeśli użytkownik jest uwierzytelniony w mojej witrynie. Jednak nie działa i jest koszmarem do skonfigurowania.

Ostatnią opcją jest pobranie pngs z wykresów z grafana po stronie serwera i udostępnianie ich tylko uwierzytelnionym administratorom na mojej stronie internetowej. Jednak w takim przypadku tracę wszystkie fajne rzeczy, które grafana oferuje OOTB, jak rozszerzanie/zwijanie zakresu czasu, automatyczne odświeżanie itp.

Answer 1

Na podstawie this answer i this answer udało mi się umieścić na mojej stronie deskę rozdzielczą Grafana.

Umieść swoje iframe:

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

A potem karmić go treścią Grafana za pomocą żądań AJAX tak:

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

żądania AJAX jest obowiązkowa, ponieważ pozwala ustawić nagłówek z poświadczeniami.

W tym momencie otrzymujesz pustą odpowiedź od serwera Grafana z powodu CORS. Musisz włączyć proxy dla Grafana. Jest przykładem konfiguracja Grafana i nginx kontenerów Docker korzystających docker-komponować poniżej:

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

Ostatnią rzeczą, którą trzeba zrobić jest zapewnienie plik 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; 
    } 
} 

} 

baz ten plik na przewidziane here, ale ważna różnica jest

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

oznacza to, że pozwala na ustalenie Authorization nagłówek.