Embed dashboard in iFrame using custom request headers from Client

Grafana Configuration
,
1

Hi I am attempting to setup an authentication method that uses nginx to map values from a custom header to a username and a function to consume escape key presses.

I have decided to create a php script on a web application that is accessed as an iframe that then generates the iframe for the grafana dashboard).

this gives me somewhere to add the javascript for the escape key.
I have looked on the internet for ways to send a header along with the iframe.

All the methods I’ve encountered either forces you to use srcdoc. (breaks grafana ui as it can’t see url WebSockets throws lots of errors)
or to create a blob (breaks grafana ui as it is running in different origin/context)

Is there a way to embed dashboards from grafana on another website, use custom headers, and prevent the escape key from being pressed at the same time?

Grafana version. 9.2.2 Alpine

  • What Grafana version and what operating system are you using?

  • What are you trying to achieve?
    embed dashboard and authenticate using custom header

  • How are you trying to achieve it?

<html><head>
<script>
document.onreadystatechange = function () {
  if (document.readyState == \"complete\") {

document.getElementById('display').contentWindow.document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
//        alert(\"escape\");
    }
};


  }
}

var xhr = new XMLHttpRequest();
xhr.open('GET', '<URL>/<BASEPATH>/d/$dashboard?kiosk=tv', true);
xhr.setRequestHeader('x-secgroup', '$securityGroupsHeader');
xhr.onreadystatechange = handler;
//xhr.responseType = 'blob';
xhr.send();

function handler() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      document.getElementById('display').srcdoc = this.response;
    } else {
      console.error('error loading dashboard :(');
    }
  }
}

</script><base href=\"/<BASEPATH>/\"/></head><body style=\"margin: 0 !important;\"><iframe id=\"display\" width=\"100%\" height=\"100%\" style=\"border:0\"></iframe></body></html>

  • What happened?
    either white screen detailing issues loading grafana. or grafana ui almost loads (sidebar css all fine) but buttons don’t work and after a short while an error message in a toastie

  • What did you expect to happen?
    for user to automatically be authenticated as a user within the correct team and be redirected to the current dashboard

  • Can you copy/paste the configuration(s) that you are having problems with?

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.

  • Did you follow any online instructions? If so, what is the URL?

2

did you find a solution to embed dashboards or panels from grafana on another website, by using custom headers?