How to safely display grafana graphs in website admin panel?

Question

I created some good stories in grafan. I want to display some of them directly in the admin panel of a website, and not force users to switch to grafana dashboards and force them to double authentication (once for my website and once for grafana).

One option is to enable anonymous access in grafana and use the share / embed in iframe option for each graph in grafana. Although it works with gread, it seems like a huge vulnerability if anyone who knows the corresponding URL can see the grafana data.

Then I saw that grafana has an HTTP API , but I see no way to display a specific graph there.

I tried a solution with PHP Proxy that will add authorization headers and connect to the grafana GUI if the user is authenticated according to my website. However, this does not work, and it is a nightmare to tune.

The final option is to grab the png graphs from grafana on the server side and only serve them to authenticated administrators on my website. However, in this case, I lose all the cool things that grafana offers OOTB, such as time range extension / failure, automatic update, etc.

Answer 1

Based on this answer and this answer , I was able to embed the Grafana toolbar inside my page.

Put your iframe :

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

And then serve it with Grafana content using AJAX requests, for example:

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

An AJAX request is required as it allows you to set a header with your credentials.

At this point, you get an empty response from the Grafana server due to CORS. What you need to do is enable some proxy for Grafana. There is an example configuration of the Grafana and nginx docker containers using the docker layout below:

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

The last thing you need to do is provide the nginx.conf file:

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

This file is based on here , but an important difference

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

This means that you can set the Authorization header.