Adding an internal http website to an external https HA connection

[SpectrixPvP]

Hi,

I have setup an external https Home Assistant connection over a domain with Cloudflare and I want to add an internal http website to the dashboard. The problem is that the iframe card doesn't allow http webpages when accessing HA over https. When adding the internal webpage over panel_custom within the configuration.yaml, then copying the panels bare site link and inserting it into the iframe card, I often get the 401: Unauthorized error. Btw the error can be fixed by accessing the panel and then navigating to the dashboard card again (probably caused by a token or something to be refreshed), but I don't want to do that every time. Since 2 days, I am searching for for a working solution to add that internal website to the dashboard. I already tried out your hass_ingress add-on, but can't make it work. I get the same 401 error (sometimes). I see, that there are many options to configure your add-on but I am missing some examples. Is there an option to achieve my goal with your add-on or even in combination with e.g. Nginx? And how can I make it work?

[lovelylain]

show me your config pls.

[SpectrixPvP]

I tried out different configs with two different internal websites: Website 1 is hosted by another internal device (Tasmota):

ingress:
  smartmeter_hass_ingress:
    ui_mode: toolbar
    title: SM (hass_ingress)
    icon: mdi:counter
    url: http://192.168.1.225

Website 2 is hosted by the same Raspberry Pi which is hosting HA (but on port 5000):

  emhass_hass_ingress:
    ui_mode: toolbar
    title: EM (hass_ingress)
    icon: mdi:lightning-bolt
    url: http://192.168.1.210:5000

I tried out a third version with the second website and the built-in panel_custom:

panel_custom:
  - name: emhass_panel_custom
    sidebar_title: EMHASS (panel_custom)
    sidebar_icon: mdi:lightning-bolt
    js_url: /api/hassio/app/entrypoint.js
    url_path: '5b918bf2_emhass/ingress'
    embed_iframe: true
    require_admin: false
    config:
      ingress: core_configurator

Now I have 3 extra side panels which work: When I copy their bare link (without the whole sidebar), I can insert them as an iframe card in the Home Assistant Dashboard. These are the three URLs: 1) https://ha.your-domain.de/api/ingress/smartmeter_hass_ingress/ 2) https://ha.your-domain.de/api/ingress/emhass_hass_ingress/ 3) https://ha.your-domain.de/api/hassio_ingress/lpsOR66ATSfwsl7mSFta77SQwod4PeomLvfcAWbkitA/

These three iframe cards also work in my chrome browser on PC when accessing the external domain. But when I open the app on my smartphone (being logged into my WLAN and thus accessing my HA over http://IP:8123), I get net::ERR_BLOCKED_BY_RESPONSE in the iframe cards, which is probably because you can't insert https websites in an http environment. When switch off my phones WLAN, the app connects over the external address (https://ha.your-domain.de) like my PC and the first two iframe cards that created with the hass_ingress add-on are loading infinitely. The third one, that was created with the panel_custom is showing 401: Unauthorized. This error for the third card can be fixed when accessing the working side-bar panel and then going back to the dashboards iframe card. Then it also shows the website correctly.

My goal is mainly to get the iframe cards to work on the smartphone app in best case externally (https) and also internally (http).

[SpectrixPvP]

Just found out, that the iframe cards using the inserted hass_ingress URLs are also working on my smartphone when using the chrome browser. So the issue might be caused by the HA android app, which is not loading the iframe cards.

EDIT: When opening the created side panels "SM (hass_ingress)", "EM (hass_ingress)" and "EMHASS (panel_custom)", all iframe cards on the dashboard of the app are working again. So it might rely for both the panel_custom and the hass_ingress on this token that is probably generated, when accessing the original HA side panel.

[lovelylain]

When embedding into an iframe, you can remove the domain part and keep only the path, such as /api/ingress/smartmeter_hass_ingress/. I have also encountered the problem you mentioned, and there is no problem on the mobile browser, so it may be the app's problem that I cannot solve. Related issues: https://github.com/home-assistant/android/issues/2363 https://github.com/home-assistant/iOS/issues/2102

[SpectrixPvP]

Then I see unfortunately no way to integrate a local website on the dashboard within the app. However, I found out a very simple way to nearly achieve what I wanted. It is possible to create a button card, which links to an add-ons UI via the relative URL. The UI is always accessible, either locally or externally.

Example:

type: button
icon: mdi:car-electric
tap_action:
  action: navigate
  navigation_path: /hassio/ingress/5b918bf2_emhass

From there you can get back to the dashboard with the "<-" button. (A relative URL to a webpage of the side panel would also work, but with kiosk-mode, there would be no option to get back to the dashboard again, cause you can't even open the sidebar.)

[lovelylain]

the third one can also be configured with hass_ingress (no need to enable addon's external port):

emhass_hass_ingress:
    work_mode: hassio
    ui_mode: toolbar
    title: EM (hass_ingress)
    icon: mdi:lightning-bolt
    url: 5b918bf2_emhass