Introducing Hass.io Ingress

Blog
61

That looks like it will be my evening. I have a fresh snapshots. Thanks everyone for the assist. Have a great day!

62

For those who want to leverage the new Ingress feature so that they only need one open port on their router/firewall instead of having multiples, you can easily work out what the panel_iframe URL is for any add-on using Google Chrome developer tools.

  1. Click on the add-on in the Hass.io/Dashboard/Add-ons page
  2. In the first card, on the right hand side, click on the “Open web UI” button.
  3. Once you can see the add-on actively running in the web page, launch developer tools in Google Chrome.
  4. Using the element selector, highlight the iframe the add-on is running in.
  5. Click on the “Elements” tab, you will see a HTML tag "<iframe src=/api/hassio_ingress/" followed by a long string of alphanumerics. This is what you need to place in your panel_iframe URL.
  6. Highlight the line from step 5 above, right click and select “Copy link address”.
  7. Paste the copied link into the URL option in your panel_iframe configuration.
  8. Check configuration and restart hass.io as per usual when you make a configuration change.
1 Like
63

Thanks for this solution. Or you can use the panel_custom solution described here:

1 Like
64

I do believe that string of characters changes periodically (part of an auth token?), When i tried that it worked for a day or two then stopped.

The custom panel definitely works; though it’s a moot point after 0.92.0

2 Likes
65

@Silicon_Avatar I believe you may be correct. Working last night, not working today.

66

How do we use custom_panel now that 0.92 is out? I thought there would be mention of it in the release notes.

67

You don’t need to add custom panel in config any more. In the addon there is a toggle switch to add it to the side bar.

1 Like
68

Thanks, didn’t notice it.

69

How can I close the side navigation bar if I use add-ons with Ingress? With the old iframe way I did it with the hamburger menu icon but it is missing now. It was a big help with Node-Red using for example.

3 Likes
70

Yeah the loss of screen real estate is significant when using NodeRed. I hope they address it with HA 0.93.

3 Likes
71

I found you can copy the address to the add-on you want to use, go back to the overview where you can collapse the sidebar, then paste the add-on address into the address bar and navigate there. You will have full screen. Not ideal flow but good enough until this can be resolved properly.

72

But at least it is working! :smiley:
Thank you!

73

I may have found a solution to the 502 Bad Gateway for Firefox. Firefox is heavy handed at blocking trackers. If your privacy settings set to “Strict” it will throw a Bad Gateway error. Try setting your privacy settings to “Standard”.

image
image970×697 25.4 KB

74

hi.
if i’m not on local wifi have a blank page on …ddns.net:8123/a0d7b954_adguard
but work when on local lan. haven’t this issue when was with pihole+ingress.

where to check why can’t render admin page ?

view-source from pc/firefox

<!DOCTYPE html><html lang="en"><head><link rel="preload" href="/frontend_latest/core.019f4c68.js" as="script" crossorigin="use-credentials"><link rel="preload" href="/static/fonts/roboto/Roboto-Regular.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/roboto/Roboto-Medium.woff2" as="font" crossorigin><meta charset="utf-8"><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="icon" href="/static/icons/favicon.ico"><meta name="viewport" content="width=device-width,user-scalable=no"><style>body{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;padding:0;height:100vh}</style><title>Home Assistant</title><link rel="apple-touch-icon" sizes="180x180" href="/static/icons/favicon-apple-180x180.png"><link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4"><meta name="apple-itunes-app" content="app-id=1099568401"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="msapplication-square70x70logo" content="/static/icons/tile-win-70x70.png"><meta name="msapplication-square150x150logo" content="/static/icons/tile-win-150x150.png"><meta name="msapplication-wide310x150logo" content="/static/icons/tile-win-310x150.png"><meta name="msapplication-square310x310logo" content="/static/icons/tile-win-310x310.png"><meta name="msapplication-TileColor" content="#03a9f4ff"><meta name="mobile-web-app-capable" content="yes"><meta name="referrer" content="same-origin"><meta name="theme-color" content="#03A9F4"><style>#ha-init-skeleton::before{display:block;content:"";height:112px;background-color:#03A9F4}</style></head><body><div id="ha-init-skeleton"></div><home-assistant></home-assistant><script>function _ls(e){var t=document.documentElement,s=t.insertBefore(document.createElement("script"),t.lastChild);s.defer=!0,s.src=e}window.Polymer={lazyRegister:!0,useNativeCSSProperties:!0,dom:"shadow",suppressTemplateNotifications:!0,suppressBindingNotifications:!0},"customElements"in window&&"content"in document.createElement("template")||document.write("<script src='/static/polyfills/webcomponents-bundle.js'><\/script>");var isS101=/\s+Version\/10\.1(?:\.\d+)?\s+Safari\//.test(navigator.userAgent)</script><script type="module" crossorigin="use-credentials">import "/frontend_latest/core.019f4c68.js";
      import "/frontend_latest/app.e0d83916.js";
      import "/frontend_latest/hass-icons.ffc99c98.js";
      window.customPanelJS = "/frontend_latest/custom-panel.b65d6fe1.js";</script><script type="module" crossorigin="use-credentials" src="/hacsfiles/iconset.js"></script><script nomodule>(function() {
        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
        if (!isS101) {
          window.customPanelJS = "/frontend_es5/custom-panel.14ca10db.js";
          _ls("/static/polyfills/custom-elements-es5-adapter.js");
          _ls("/frontend_es5/compatibility.9e0e2431.js");
          _ls("/frontend_es5/core.46a7ec28.js");
          _ls("/frontend_es5/app.e64cba6f.js");
          _ls("/frontend_es5/hass-icons.d3cb5e71.js");
          }
      })();</script></body></html>
75

Ingress resources do not show up on the sidebar for non-admin users.
Is there a configuration for this behavior? Is it expected?

(please move this to a standalone topic if necessary, I don’t think it’s a huge issue and I thought the forum was a better starting point than the github issues. I couldn’t find this question posed before though)

1 Like
76

Would it be possible to make an add-on using ingress act like a web browser on your local network?

I had that exact same idea and have been trying to develop my own Ingress-enabled internal website access Add-on. Getting that 502-Bad Gateway error and found this thread when researching the error.

So now I found that nearly a year ago you asked if this was possible, and am wondering if such an add-on already exists (besides that zero-tier add-on)?

Thanks to anyone that can advise if such an add-on is available!

77

trying to integrate ingress with my addon, i have a server on port 4444, everything configured according to guide. but I get 404 Not Found when I try to open the web ui…

I am able to surf to my web server just fine from my browser

any ideas?

78

Post your config.yaml

79

I found out what was the problem,
my addon was accessing javascript resources in the HTML with a path starting with “/”.
apparently, it makes the browser access the root url (http://ha:8123/<my_resource>) instead of using the ingress url first. I solved it by changing my html file. wonder if there’s a solution that won’t require that

80

I also had the 502 error today and several page were blank even after deleting browser cache and restarting HA serveral times…

In my case Nginx Proxy Manager was the Problem. In the configuration it was checked to Cache Assets in Nginx Proxy Manager. After disabling this option everything worked like a charm again. :slight_smile:

1 Like