"401: Unauthorized" iframe CARD of Grafana not working

[sparkuss (Sparkus)]

Try to add additional parameters here, near of "GF_AUTH_ANONYMOUS_ENABLED" in Grafana configuration:

  - name: GF_AUTH_ANONYMOUS_ENABLED
    value: 'true'
  - name: GF_AUTH_ANONYMOUS_ORG_NAME
    value: canBeAnyNameHere

Now it’s working better in my Hassio, but only if connecting to it from same host

[kszaboa]

I had the same Issue (401 unauthorized) in the iFrame in a dashboard. Activating Grafana from the toolbar on the left and switching back to the dashboard helps for the second. On a mobile device on same network I always got 401 error.

The solution was to change the port in the embed addresse from default 8123 to the one you define in Grafanas settings (3000 on my setup). Credits to @joaofl

[Makis]

@kszaboa

The solution was to change the port in the embed addresse from default 8123 to the one you define in Grafanas settings (3000 on my setup). Credits to @joaofl

please can you post a screenshot where I can find in my setup yours 3000 address?

[kszaboa]

Supervisor -> Grafana -> Configuration -> Network

[Makis]

Thanks
mine is like this… I don’t know why… grafana is working… is there a way to fix this?

[kszaboa]

I guess there is a way simply type “3000” (or whaterever 4digit number you like) instead “disabled” like I did

[Makis]

this will probably work. Now I suppose to add my credentials (username + password) and I don’t remember them

[Aaron_P]

Cheers. Do you embed internal address or external one with https?

[pancodia]

I can confirm that after I changed the port to 3000, the iframe panel showed up on may app.

[maxifly]

When I connected to HA using same IP equals IP in URL in iframe, frame work properly/
But when I connected using duckdns.org host or using host from my hosts file, frame show error 401.
None of the above recipes helped.

[taoyx_2002 (Richard)]

Unfortunately, this problems still happens on my android mobile phone even change that port to 3000.

But on PC/Browser, it works always fine. Very strange.

[naibaf (Fabian)]

Same here. Android App with Tablet user isn’t working. Android App with my personal User on Smartphone works perfectly fine, also with my personal User on the PC browser.

Would be interesting to get this resolved for all devices.

[kojirof]

Hi, I have posted alternative solution for iframe with Grafana.
If you are running Home Assistant and Grafana on a reverse proxy and SSL enveronment, this might be useful.

Alternative solution for "401: Unauthorized" in Grafana iframe card

Many users are getting the “401: Unauthorized” error when embedding Grafana into an iframe card. The community suggests adding GF_AUTH_ANONYMOUS_ENABLED or GF_SECURITY_ALLOW_EMBEDDING to Grafana configration, but this did not solve the problem in my environment. Finally, I found another solution and I’ll share it with the community. In my environment, I use Nginx Proxy Manager, Let’s Encrypt, Google Cloud DNS, and Home Assistant OS, but I think this method will work for other DNS services and…

[laxarus (Salvora)]

Enabling anonymous login fixes this issue with setup like below but creates security problems. One way to fix that from HA side is to introduce sending additional headers for lovelace iframe card.
Grafana api keys can be used like this:

curl -H “Authorization: Bearer eyJrIjoiUnhKa2swM2FrR0k4eUhyUHQ5dDVoVzN3U2cwVdfgfdrjht554iaWQiOjF9” https://grafana.mysetup.org/api/hassio_ingress/nZYGqQ-X7eLkUZpNFdRU47lv_/api/dashboards/home

Then grafana api keys can be used but this also creates other security issues since the api key will be visible for everyone who can access the lovelace dashboard. Though it is a less severe issue than completely exposing grafana with anonymous login since if someone unwanted can access your dashboard, you will have other problems.
This can also be mitigated by using secrets in the lovelace ifrane card to some degree too.

env_vars:
  - name: GF_SECURITY_COOKIE_SECURE
    value: 'true'
  - name: GF_AUTH_ANONYMOUS_ENABLED
    value: 'true'
  - name: GF_AUTH_ANONYMOUS_ORG_NAME
    value: Org
  - name: GF_AUTH_ANONYMOUS_ORG_ROLE
    value: Viewer

There is an open feature request for this:

Ability to send request headers with panel_iframe and webpage_card

It would be nice if there where the ability to add custom request headers (e.g. for authentication purposes) to the webpage_card and/or to panel_iframe

[janbenes]

For me, no advice worked. I was able to display grafana panels from external adresses, but not now anymore. I only get jumping grafana logo.

[viruslab (david)]

I have the same issue.
I get an 401: Unauthorized error on a first opening lovelace page.
I have to open a grafana panel first and then I have to refresh a lovelace page

[Jlm70 (Gianluca M)]

Same 401 issue… 2022.8.3.
I saw many different solutions out there, but… I’m a bit confused: after years of HA-Grafana integration… isn’t there, yet, a straight direction to solve an issue that ANYONE using Grafana in HA would have? I mean… anyone using Grafana - I think - would then add his graphs within the other dashboards… no?

[adynis]

I also have this issue and I’m sad there’s no nice solution.
Right now I’m just manually opening Grafana (so that I’m somehow authenticated) and after that it works … (for 1 day).

[budcalloway (Buddy)]

What is the adress you are using in the card ?
Mine is like this https://externalIP:3000/
you need to redirect the port to your server.
If you’re using SSL, don’t forget to indicate the adress of it. If you use NPM it is not / but /nginxproxymanager/live/npm-5/privkey.pem

[Deckoz2302 (Brad)]

Nginxproxymanager. Graphana uses X-Frame-Options for cross site protection against rendering in an iFrame

In NPM on your config add a custom location for / and add the below config

proxy_hide_header X-Frame-Options