Grafana dashboards on IFRAME and reverse proxy with auth.proxy

Grafana Authentication
,
1

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

  • What are you trying to achieve?
    I’m trying to embed Grafana dashboards in an Iframe of a React UI using nginx as reverse-proxy and auth.proxy authentication

  • How are you trying to achieve it?

  • Configured nginx as reverse proxy to grafana (following official docs) - OK works
  • Configured Grafana to permit embedding, subpath and root_url accordingly with best practices - OK works
  • Enabled auth.proxy in grafana.ini, disabled anonymous mode, disabled autosignup (for security purposes)
  • Create a simple page with JS that populates iframe tag with dashboard url and adds X-WEBAUTH-USER header with valid viewer user existing on Grafana.
    Tried also Service Account with token Bearer and adding “Authorization: bearer ” on headers.
 <iframe width="800" height="800"></iframe>
  <script>
    async function getSrc() {
      const res = await fetch("https://<my-grafana>/grafana/d/3XsD-HSVk/dash?orgId=1&refresh=10s&theme=light&kiosk=1", {
        method: 'GET',
        headers: {
          // Here you can set any headers you want
                "X-WEBAUTH-USER":"my-user"
        }
      });
      const blob = await res.url;
      console.log(blob);
      document.querySelector('iframe').setAttribute("src", blob)
    }
    getSrc();
</script>

nginx:

map $http_upgrade $connection_upgrade {
  default upgrade;
  '' close;
}

upstream grafana {
  server community.grafana.com;
}

server {
        server_name  myapp.com;

        location / {
                root /usr/share/nginx/html/myapp/;
                index  index.html index.htm;
                try_files $uri $uri/ /index.html;


location /grafana/ {

                rewrite  ^/grafana/(.*)  /$1 break;
                proxy_set_header Host $http_host;

                proxy_set_header X-Real-IP            $remote_addr;
                proxy_set_header X-Forwarded-For      $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto    "https";
                proxy_pass      http://grafana;

        }

location /grafana/api/live/ {
                rewrite  ^/grafana/(.*)  /$1 break;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;
                proxy_set_header Host $http_host;

                proxy_pass http://grafana;

         }

grafana.ini

[server]
domain = myapp.com
enforce_domain = true
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana/
serve_from_sub_path = true

[security]
allow_embedding = true

[users]
allow_sign_up = false

[auth.proxy]
enabled = true
header_name = X-WEBAUTH-USER
header_property = username
auto_sign_up = false
sync_ttl = 60
whitelist = 127.0.0.1
enable_login_token = true

The question is:
Is it possible to embed Grafana inside an iframe in a Webapp, implementing nginx as reverse proxy and a secure authentication without inserting credentials in the classic form?

thanks in advance!

3 Likes
2

Hi @then1ght were you able to solve the issue ?. If yes, how ?

1 Like
3

Any updates for the solution to the above problem.

1 Like