How to display grafana graphs in my website's admin panel securely?

Based on this answer and this answer I was able to embed Grafana dashboard inside my page.

Put your iframe:

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

And then feed it with Grafana's content using AJAX requests like this:

<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 request is obligatory because it enables you to set header with your credentials.

In this moment you are getting empty response from Grafana server because of CORS. What you have to do is to enable some proxy for Grafana. There is example configuration of Grafana and nginx docker containers using docker-compose 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 have to do is providing your 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 bases on provided here, but important difference is

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

This indicates that you allow to set Authorization header.