[Help] Embedding dashboards from Grafana add-on into Home Assistant (iframe) with full internal/external access

jandrade · May 20, 2025, 6:44pm

Hi all,

I’m looking for help with an issue I’ve been struggling with for a few days. I have Grafana installed as the official add-on inside Home Assistant, and I want to display Grafana dashboards in Lovelace using an iframe card.

The goal is to make these dashboards accessible to any HA user (non-technical), whether they are:

accessing internally
accessing externally via HTTPS domain (home.xxx.xx)
using a browser or the Companion App (iOS/Android)

Current setup:

HAOS running on a local machine
Official Grafana add-on installed
InfluxDB also installed as an add-on and connected to Grafana
HA is accessible via HTTPS using Nginx Proxy Manager (running outside HA, on CasaOS)
Valid Let’s Encrypt certificates in place

What is currently working:

I can access Grafana via http://grafana.xxx.local/ (using local DNS)
I see the Grafana login page
InfluxDB works fine inside Grafana
I added iframe-related headers to Nginx (X-Frame-Options and Content-Security-Policy)

Problems:

When I use an iframe pointing to the Ingress URL (for example, https://home.xxx.xx/api/hassio_ingress/xxxxx/…), I get errors like:
“Grafana failed to load its application files…”
I also get issues related to X-Frame-Options, Content-Security-Policy, or problems with subpath configuration, even though I set GF_SERVER_ROOT_URL and GF_SERVER_SERVE_FROM_SUB_PATH correctly
If I try to use an http:// link in the iframe, it’s blocked due to mixed content (since HA is served over https://)

What I do not want:

I don’t want to expose Grafana outside of HA as a standalone container, because that would cause new problems with InfluxDB connectivity (which lives inside HA)
I don’t want users to log into Grafana — the goal is to use anonymous mode with viewer permissions

I’ve tried multiple configurations in Nginx, HA, and Grafana’s environment variables, but I haven’t found a working setup that allows embedding dashboards in all access scenarios.

Has anyone successfully achieved this or has a working config to share?

Thanks in advance,
José

Mikefila · May 20, 2025, 11:36pm

Go to the configuration page of the addon, the env vars section add

- name: GF_AUTH_ANONYMOUS_ENABLED
  value: "true"
- name: GF_AUTH_ANONYMOUS_ORG_NAME
  value: Main Org.
- name: GF_AUTH_ANONYMOUS_ORG_ROLE
  value: Admin
- name: GF_SECURITY_ALLOW_EMBEDDING
  value: "true"
- name: GF_AUTH_DISABLE_LOGIN_FORM
  value: "true"

jandrade · May 23, 2025, 12:08pm

Thanks for your suggestion. I’m going to undo all the configurations and try your solution this weekend.

jandrade · May 25, 2025, 10:53am

Hi @Mikefila,

Once again thanks for your help, but unfortunatelly didn’t solve all my issues.
Just to recap:

local access:

desktop browser - it only shows the graphics in iframe card, after opening the grafana web interface in the same browser
companion app - will show the error net:ERR_BLOCKED_BY_RESPONSE
mobile browser - it only shows the graphics in iframe card, after opening the grafana web interface in the same browser

external access:

desktop browser - it only shows the graphics in iframe card, after opening the grafana web interface in the same browser
companion app - it only shows the graphics in iframe card, after opening the grafana web interface in the same browser
mobile browser - it only shows the graphics in iframe card, after opening the grafana web interface in the same browser

The full grafana config is:

plugins: []
custom_plugins: []
env_vars:
  - name: GF_AUTH_ANONYMOUS_ENABLED
    value: "true"
  - name: GF_AUTH_ANONYMOUS_ORG_NAME
    value: Main Org.
  - name: GF_AUTH_ANONYMOUS_ORG_ROLE
    value: Admin
  - name: GF_SECURITY_ALLOW_EMBEDDING
    value: "true"
  - name: GF_AUTH_DISABLE_LOGIN_FORM
    value: "true"
ssl: false
certfile: fullchain.pem
keyfile: privkey.pem

and one of the links used in the iframes is:

https://home.xxxx.xx/api/hassio_ingress/oJm-jY2eJ_D3rpOoGz4TmjJ5AUO9I_KUKPHirXprM4E/d-solo/fdgcqxi0k7fuod/temperatura-processador?orgId=1&refresh=5s&from=$today_so_far&panelId=1

Mikefila · May 25, 2025, 5:17pm

The only difference I see is that I am not using https. The only thing I can think to try is turn on ssl for the addon.

jandrade · May 26, 2025, 8:59am

Hi @Mikefila

Thank you for all your help and patience. Unfortunately, enabling SSL on the Grafana add-on didn’t change anything.

As you can probably tell, I’m not an expert , so I might have left out some information that could help clarify my network setup. Apologies in advance for being overly detailed.

My Home Assistant is accessible externally both via Nabu Casa (just as a failsafe) and via my self-managed domain (https://home.xxxxxxx.xxx). I use Cloudflare + Nginx + Let’s Encrypt to manage the external address. On my private network, I use Pi-hole to manage DNS, allowing internal traffic to be routed to the external address.

So, I always use the address https://home.xxxxxxx.xxx to access Home Assistant via browser or the companion app, whether I’m on the local network or not.

While reviewing the configuration for this post, I found an error in the companion app settings (it was configured to connect via IP instead of the domain when on the local network), which resolved the net::ERR_BLOCKED_BY_RESPONSE error.

To sum it all up: whether SSL is enabled on the Grafana add-on or not, I always get a 401: unauthorized in every scenario—unless I visit the Grafana web interface first.

Thank you once again for all your help and patience

holychair · June 1, 2025, 9:18am

Hi - did you find a solution? I am stuck at the same spot: cannot display the Grafana graphs as dashboard embeddings when using the companion app (and relying on nabu casa).

Best, holychair

Mikefila · June 1, 2025, 6:21pm

The only other thing that I could think of, that may help, is to auto login the client. Add to config.yaml.

homeassistant:
  auth_providers:
    - type: trusted_networks
      trusted_networks:
        - 192.168.0.166/32
      trusted_users:
        192.168.0.166:
          - ad4c3...589 ## long user id, shown on user page
      allow_bypass_login: true
    - type: homeassistant

jandrade · June 2, 2025, 9:15am

Hi @Mikefila & @holychair,

I’ve been very busy in the last days and I wasn’t able to proceed with this issue, but something has changed (probably an update on companion app) because today in companion app, with my admin account and either in local or external networks I’m able to access the grafana graphics on my dashboard.
But with a “normal” user it still gets unauthorized.

P.S: I didn’t make the auto login configuration as suggested by @Mikefila

Thanks for all your help @Mikefila