Everytime I add a mod/iframe tab to Hass.io it’s usually blank. I figured out the reason that this is happening is that I’m trying to iframe an http website using either http://192.168.10.1:1111 or http://hassio.local:11111 inside a https domain (i.e. https://my-duck-dns.com). If I add the https to those iframed pages, it wont work either because I do not have SSL set up (and dont think there is even a way to do that) for 192.168.10.1 or hassio.local.
The only solution seems to be to use the SSL duck dns name with the port number instead of the IP or hassio.local. However, to do that, I will need to expose the ports I’m trying to iframe to the internet so that I can access them via the public -my-duck dns domain (i.e. https://my-duck-dns.com:1111), but I dont want to do that because I have noi plans of accessing those addons outside the hassio environment.
Does anyone have any suggesting or best bractices for this?
Mixed Content: The page was loaded over HTTPS, but requested an insecure resource. This request has been blocked; the content must be served over HTTPS.
but when I add the https to both of those, I now get the following error:
The webpage at https://hassio.local:3218/ might be temporarily down or it may have moved permanently to a new web address.
Mixed Content: The page was loaded over HTTPS, but requested an insecure resource. This request has been blocked; the content must be served over HTTPS.
but when I add the https to both of those, I now get the following error:
hassio.local sent an invalid response.
When I use my actuall duck dns domain with SSL (i.e. https://my-duck-dns.com:3218), I get the following error because port 3218 is not opne to public.
Yes, I did. My config looks just like in that example.
Also, I want to point out that even though “https://hassio.local:3218” and " https://192.168.10.11:3218" don’t work in the iframe, they work just fine when navigating to those links directly in the browser AFTER I read the “Your Connection is not private” warning in chrome and click to proceed anyway. After I accept the warning and click to proceed, it then works in the iframe just fine too. But that defets the purpouse of having a shortcut in hass if I have to first go the the full url in the browser.
It’s pretty much impossible if you want to use an iFrame with that (and other) addons in my experience and I tried everything to get it working. There are 2 or 3 solutions to this. First is to use the duckdns/letsencrypt and open the ports on your router or more precisely, forward those ports to the Home Assistant Pi.
The other solution is a reverse proxy like ningx or whatever they call it. I looked at that and my eyes started glazing over…
The third and in my opinion easiest solution is to use caddy. I actually just went through this exact procedure with help from @cogneato and after I was done I documented it fully in a blog post here. Maybe have a crack at following that through and see how you go.
I´m having a similar issue trying to view my Kodi remote (Chorus) in an iFrame. It used to work flawlessly a few weeks ago (with the DuckDNS addon enabled and SSL active), but it just stopped showing content, no clear event related. I´ve tried port forwarding and all of that, but, since I´m trying to show a Kodi box (LibreELEC on a RPi3), I don´t know if activating SSL on that would work…
Thanks for confirming… I can now stop banging my head thinking I’m doing something wrong. Also, very nice article, I think I may give Cady a try.
You may have previously visited the Kodi link directly outside the iframe and accepted the default warning to continue viewing the page. Once you do that, it shoudl work in the iframe untill you reset your browser cookies/cache.
Since you have SSL active on your main hassio page, you won’t be able to serve non-ssl content inside iframes. So you could add the “s” to “https://IP:port” page inside the iframe and then it will work only after you visit that page in the same browser and accept the invalid certificate warning that chrome or other browsers would warn about. But that just a temporary workaround because you’ll have to do that each time you clear your browser cache. Or, you can setup port forwarding and then use https://your-DuckDNS.com:port inside the iframe. Cady seems like a good workaround if you do not want to do port forwarding.
I haven’t found an iframe’able add-on that doesn’t work better in it’s own window and you can then get to all of them directly using just http://.
Biggest reason is you can continuously refer to other live HA pages whilst working on the back end and particularly with Configurator where I usually have multiple pages open at the same time and flick between them and then most importantly when you restart HA to check what you’ve done you still have those files open to put it right when you find you’ve broken HA. If you’re using it in an iframe you’re continuously back at square one again.
Just make a bunch of bookmarks to the relevant pages and away you go.
I’m starting to agree on this. I actually thought about if it’s possible just to create hassio tabs that would act like bookmarks and just open the content in a separate tab, but doubt that possible.
I went through the same process you did when the duckDNS addon was first released, then had a lightbulb moment and wondered why I was bothering as there were literally no benefits given I don’t want to be editing the config when I’m away from home either and then found it was actually better to keep them separate.
I just realized that my general thought process is to get something new to work and then decide if I actually need it. In this case it’s pretty obvious I don’t want to give a potential hacker visibility and quick access to other critical components of the system… let e’m work for it
Any body get this figured out using Nginx? It seems like most of the tutorials are written at the level of people who don’t need the information (because they already know what they are doing) vs simpletons like me.
So far I have DuckDNS with LetsEncript running fine and Nginx is running but I can’t get something like Kodi http to work in an iframe served with https. I thought that was what the Nginx reverse proxy was supposed to do. Any help would be great.
