Panel_iframe limitations in SSL installations

Configuration
1

I actually made a feature request for this so I was really excited to get this in my setup. Unfortunately it doesn’t seem to work for me and before I posted a git issue, I wanted to check with others.

I get the panel link, but when I click on it, nothing appears in the panel - it remains blank and white. Doesn’t matter what URL I use in the config. Config was copied right from the example, no errors in YAML. (I’m on 0.25.0 in case it wasn’t obvious.)

panel_iframe:
  router:
    title: 'Router'
    icon: 'mdi:router-wireless'
    url: 'http://192.168.1.1'
2

tried it also, doesnt show up.

1 Like
3

Thanks. I think if I get one more reply on this I’ll post a github issue. I just don’t want to raise the alarms if it’s just the two of us, but both of us here are fairly experienced and I don’t think it’s just a coincidence.

Thanks for checking in Rene.

1 Like
4

Is your HASS on https? That could explain it.

I’ve also seen someone on gitter say they’ve tried to do it with there router and that has an X-FRAME option to restrict it to ORIGIN so that may not work via iframe.

5

i created a html file to check if my frizbox could be shown in an frame, but thats no problem.

6

Yes, my HA instance is on SSL but no URL works. I can’t even see the harmony-api page on port 8888 of the same Pi running HA. Since HA recommends running on SSL, I would that they would either have taken this into account or put a disclaimer to that in the component instructions.

7

Could you clarify? Were you able to see anything or not?

8

Hey, depending on your browser you are able to somewhat work around this https issue. I use chrome and I get a small little shield on the right hand side of my navigation bar if I click on one of the new panels. There I am able to click on “load unsecure scripts” after that it works just fine. The whole issue does not lie within HA but I agree there should be a disclaimer on that component for people who are new to SSL / HTTP.

EDIT:
To elaborate you can e.g. in chrome with F12 open the developer console. There you should see an error message saying something like “Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS, but requested an insecure resource” that’s just to ensure a secure connection.

Greetings

2 Likes
9

if i make an html page with a frame i can just use my fritzbox page as if it wasnt in a frame.

@PhyberApex it would be nice to have something to click on.

but there is nothing new shown to click on.
if i put in the code in config or not it doesnt change anything.

10

Did you completly refresh the site? You may have to delete the cache as well.

1 Like
11

closed HA, deleted cache, started HA again, nothing shows.

i think it was the cache.
i had edited the config before to try other things. now i have put in the original code and it shows up.
finally!

12

Phyber is correct - I have updated my issue to include this information along with a request for an improvement in the documentation for the component.

Additionally, you cannot use any hyphens in the panel name or the link doesn’t show at all.

Dude, I keep running into you and thinking what a great new addition to the community you are! Thanks for figuring this out!

[Edited subject to reflect new info and marked as solved]

2 Likes
13

EDIT: if you use lower case ‘rss’ or something else… it would work! I was using “Rss” and “Pihole”… lol @me!

SOLVED:
Would I be able to change ‘router’ for something else? Lets say ‘rss’ or something else ‘pi-hole’, I tried with both iterarions and would work, however, if I use ‘router’ it works!
Any ideas, aside from router or fridge? if not, is there a third one I could use? lol

panel_iframe:
  router:
    title: 'Router'
    icon: 'mdi:router-wireless'
    url: 'http://192.168.1.1'
14

Thanks for the info all, if I disable protection to allow these web interfaces via HA, will this be reducing security? Is the connection still secure between the remote client and HA? And it’s only insecure on my Home network? is there any way to allow this without modifying the setting in the browser?

15

I was able to get the Panel_iframe to work with SSL by using a caddy proxy. Create a separate domain for each panel you want to add, then point it to the correct port with caddy.

I used this add-on for hassio

16

Hi tehniemer, Could you help to configure caddy, im on hassio, if you could share your config that would be great. thanks

17

For reference, without going through the hoopla of setting up subdomains for each panel via caddy proxy, it is perfectly viable to tell Chrome to allow insecure content to bypass this limitation. Simply create a site specific rule in Chrome as follows

  1. Go to: Chrome preferences / Privacy and security tab / Site settings section / Additional permissions
  2. Click Insecure content (chrome://settings/content/insecureContent), and then add an Allow rule for your site

This however will still only work if you are currently connected to the same network as the homeassistant host device, i.e. it won’t work remotely