Panel iframe with HTTP auth

I’m using Frigate with a few camera’s I have and I made Frigate public using a subdomain. On that subdomain is HTTP authentication active with IP blocking after 2 failed attempts and geo blocking.

Now what i’m trying to do is to create a panel iframe in HA, with the username and password inside the URL, so that it logs in automatically. When I only use the domain in the iframe, without the login details, I do get to a login screen, but only on when I use a webbrowser, this won’t work on the HA app, i’ll get a 401 Authorization required.

The URL i’m using is https://username:[email protected], but then i’m getting a blank page using the HA app and browser.

Any help would be much appreciated.

1 Like

Does anybody have any idea?

1 Like

I just found out that using credentials inside the url is deprecated by browsers. Now my question would be is how to get an HTTP login screen in the HomeAssistant app?

I setup an NGINX reverse proxy for this that works and has HTTPS authentication, works in both the home assistant app and accessing it on any web browser. The credentials are remembered so I rarely have to re-enter them. I use it to access the control panels in zigbee2mqtt and zwavejs2mqtt. It has two levels of auth - one through NGINX and one through the zigbee2mqtt and zwavejs2mqtt programs themselves. I’m not using the HassOS install though and these are all installed as separate docker containers (not addons).

What are you using now to accomplish these things?

This could be your issue as well - you have to use https. My reverse proxy automatically upgrades an http connection to https as well.

Hi, please can you describe how you did this reverse proxy? Thank you.

Hi, I am having the same kind of problems and I’m highly interested in how you did it. I am using caddy but if you can explain me with nginx I can adapt it myself.

I too want to be able to embed services like zigbee2mqtt into HA but without them being accessible outside HA.

No experience with cady, but I’ll post my config with NGINX and you can see if there is any similar overlap. I’m using SWAG which runs in Docker and includes NGINX, following the guide here:

I have the letsencrypt cert set for wildcard to allow for subdomains (more explanation in the linked guide). For zigbee2mqtt, it is configured the reverse proxy with requiring http auth (on top of its own auth for 2 layers of login securing) with the config below:

################################################################################
### SUBDOMAIN 5 ZigbeeMQTT########################################################
server {
	listen 443 ssl;

	root /config/www;
	index index.html index.htm index.php;

	server_name zigbee2mqtt.yourdomain.duckdns.org;
	
	include /config/nginx/ssl.conf;

	client_max_body_size 0;

	location / {
		auth_basic "Restricted";
		auth_basic_user_file /config/nginx/.htpasswd;
		include /config/nginx/proxy.conf;
		proxy_pass http://192.168.0.101:8086;
	}
}

See this article to configure the http auth in nginx

Once the reverse proxy is configured properly, for the iframe config in home assistant:

  - title: zigbee2mqtt
    type: panel
    badges: []
    cards:
      - type: iframe
        url: https://zigbee2mqtt.yourdomain.duckdns.org
        aspect_ratio: 100%

This is how it will look - initial login:

Once logged in with http auth and logged into zigbee2mqtt:

1 Like