Embedding Grafana Monitoring in Backend with API Key, Anonymous Login, and Cookie Methods

The article describes how to embed Grafana monitoring pages into a backend system and provides three authentication methods: anonymous login, API‑key based login, and cookie‑based simulated login.

For anonymous login, enable it in [auth.anonymous] enabled = true org_name = in grafana.ini and restart the service.

To use an API key, create it via a curl request:

curl -X POST -H "Content-Type: application/json" -d '{"name":"test","role":"Admin"}' 'http://admin:[email protected]/grafana/api/auth/keys'

Then add the key to an Nginx reverse‑proxy configuration, for example:

server {
    listen 80;
    listen 443 ssl;
    server_name grafana-api-key.ysn.com;
    access_log /home/nginx/logs/grafana-api-key.ysn.com_access.log main;
    include /home/openresty/nginx/conf/nconf/ysnssl.conf;
    location / {
        set $upstream grafana.ysn.com;
        proxy_pass http://$upstream;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Connection "";
        proxy_set_header Authorization "Bearer
";
        proxy_redirect off;
        client_max_body_size 500m;
        client_body_buffer_size 128k;
        proxy_ignore_client_abort on;
        proxy_connect_timeout 60;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        proxy_buffer_size 128k;
        proxy_buffers 32 32k;
        proxy_busy_buffers_size 128k;
        proxy_temp_file_write_size 128k;
        proxy_next_upstream off;
        proxy_http_version 1.1;
        add_header Xes-App $upstream_http_server;
    }
}

For cookie‑based login, obtain the session cookie by sending a login request:

curl 'https://grafana.ysn.com/grafana/login' \
  -H 'authority: grafana.ysn.com' \
  -H 'content-type: application/json' \
  --data-raw '{"user":"3333","password":"3333"}' --compressed

Parse the grafana_session cookie and store it in Redis, then issue it to the browser:

$cookie = new Cookie($grafanaCookieConfig['name'], $grafanaCookieConfig['value'], time() + $grafanaCookieConfig['ttl'], $grafanaCookieConfig['path'], '.yanshinian.com');

To improve user experience, the article shows JavaScript that removes the unwanted “Cycle view mode” button and disables the ESC‑key side panel by manipulating the iframe’s DOM after it loads.

var iframe = document.getElementById('iframe');
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var btns = idoc.getElementsByClassName('toolbar-button');
for (var i = 0; i < btns.length; i++) {
    var btn = btns[i];
    var label = btn.getAttributeNode('aria-label');
    if (label.value === 'Cycle view mode') { btn.remove(); }
}
// hide ESC side panel
function hide(event) {
    if (window.event.keyCode === 27) {
        var iframeDoc = document.getElementById('iframe').contentWindow.document;
        var navs = iframeDoc.getElementsByTagName('nav');
        for (var i = 0; i < navs.length; i++) {
            var nav = navs[i];
            var label = nav.getAttributeNode('aria-label');
            if (label && label.value === 'Main menu') { nav.style.display = 'none'; }
        }
        var divs = iframeDoc.getElementsByClassName('css-umstnt');
        for (var j = 0; j < divs.length; j++) { divs[j].style.display = 'none'; }
        var sections = iframeDoc.getElementsByTagName('section');
        for (var k = 0; k < sections.length; k++) {
            var sec = sections[k];
            var label = sec.getAttributeNode('aria-label');
            if (label && label.value === 'Dashboard submenu') { sec.style.display = 'none'; }
        }
    }
}
document.getElementById('iframe').onload = function() {
    document.getElementById('iframe').contentWindow.document.onkeydown = hide;
};