I tried to use iFrame cards rather than the sidebar to display apps / addons - e.g. AdGuard Home.
This works - but then the sidebar is displayed as well next to the addon ui.
So I get the sidebar twice displayed - this is not nice.
Can I avoid this by using a different url then this?
http://192.168.178.14:8123/app/a0d7b954_adguard
Go to the configuration of the AdGuard app, and set a web interface port in the Network settings. (Note: this likely exposes it to your whole .178 LAN).
Then,point it the iframe at http://192.168.178.14:<PORTNUMBER>
That in theory should work, as long as AdGuard doesn't use CSP/X-Frame Options. If it does, your iframe will never load.
Picture for reference:
Pretty sure iframe gonna need https.
Definitely needed for remote access.
EDIT
Yeah. Mixed content.
Iframe must match HA
That is what I have done. This works for Adguard but not every app / addon has the option to define a separate port. My sidebar is getting to long .....
I need to think about what kind of apps / addons I shall integrate in HA or to be installed outside HA.
I am using Proxmox.
Can you give an example?
All of my installed apps with a web frontend have the option to see or change the port.
E.g. Unbound
Mostly the log will tell you the exposed web port:
INFO: Starting web UI on port 2137...
Could be working within iFrame
Yeah, there are a very select few, but most of mine have the options. What I do is just add buttons that bring you to the interfaces quickly. E.g
type: custom:mushroom-template-badge
content: ESPHome UI
icon: mdi:chip
color: blue
entity: update.esphome_device_builder_update
tap_action:
action: navigate
navigation_path: /app/5c53de3b_esphome