Nabu Casa - Unable to load iframe - http over https - internet server

Configuration Frontend
1

Hi,

I just entered a trial to utilize Naba Casa and reach my HA-installation from off home-LAN.

My internal setup is:

  • HA-OS on a Raspberry PI
  • Grafana and InfluxDB docker containers on a Rasperry PI.

I utilize Dashboards and Webpage Card in HA to get my Grafana-dashboards.
This to show my Grafana-dashboard in HA and in full dashboard.

Works like a charm on local network.
It works without error in the Nabu Casa-app.
Updated 19/2-2023 18.20 CET, no, it does not work in Nabu Casa-app

However, when utilizing Nabu Casa, and the external URL provided for Remote Control, I get ‘Unable to load iframes pointing at websites using http: if Home Assistant is server over https:’.

I know that Remote Control is essentially a proxy-service, and that the error message is related to the web-browsers and legitimate security limitations (in this case iOS and Safari).

My question here, what are the options I have when utilizing the external URL provided for Remote Control, without the iframe http over https error?

Is the only option to obtain a self-signed certificate for Grafana and run over https?
(as this is an internal server, I cannot utilize a signed (externally available) certificate)
(if this is the only option, I also know that I may need to accept the self-signed certificate manually in my browser.

Regards
Sven

2

Note: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an iframe embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.

Maybe something is possible with NabuCasa (like changing the iframe with the NabuCasa exposed external URL instead of the internal), I’m not using it.

2 Likes
3

Hi
I actually have the same problem of not displaying iframes from Grafana in Home Assistant in remote access (NabuCasa).

4

What about using cloudflare secure tunnel for the grafana url? When you set up cloudflare tunnels it lets you access your internal URLs with https://. So you can go to your grafana instance externally as https.

So for example if your grafana server is at 192.168.1.45:3000 and you’ve created a graph widget from there for use in HA and it has a url of

http://192.168.1.45:3000/d-solo/iTbnha5mkafts/plex-service-management?orgId=1&refresh=30s&theme=dark&panelId=302

Then you should be able to create a cloudflare tunnel to that server such as “HA-grafana.my server.com” that redirects to 192.168.1.45:3000.

Then you can reference your widget as

https://HA-grafana.my server.com/d-solo/iTbnha5mkafts/plex-service-management?orgId=1&refresh=30s&theme=dark&panelId=302

I’ve just set this up and making progress. It creates a grafana error not a HASS error, so at least it’s getting past the HASS restriction. Now it’s a matter of figuring out the grafana issue:

“If you’re seeing this Grafana has failed to load its application files

  1. This could be caused by your reverse proxy settings.

  2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath. If not using a reverse proxy make sure to set serve_from_sub_path to true.

  3. If you have a local dev build make sure you build frontend using: yarn start, or yarn build

  4. Sometimes restarting grafana-server can help

  5. Check if you are using a non-supported browser. For more information, refer to the list of supported browsers