Webpage Dashboard - Is it possible to embed a local webpage using Cloudflare for HTTPS, if not, how?

Configuration
, , , ,
1

I am trying to embed some locally hosted webpages that I created HTTPS urls through Cloudflare in a Web Dashboard. For example, I have a Vault Warden locally hosted web page through the Vaultwarden Add On and using Cloudflare to create a tunnel for a secure domain (https://vault.examplehome.com)

When I try to embed these URLs in a webpage dashboard, all I get is white screen. No matter if I’m accessing my HA instance locally or from the web (Nabu Casa Cloud). Is this possible? If so, can anyone share their set up instructions?

Im fairly adept at Home Assistant configuration but networking, such as reverse proxies, port forwarding, etc. I’m fairly novice. If the above isn’t possible, is there any clear examples or walkthroughs that say how to host a local page, add HTTPS to it and display in either a Webpage Dashboard or Webpage Card?

2

Do the web servers web servers the pages come from allow embedding?

If not, you can’t do it.

That is the other condition besides https/http matching.

3

I’m not sure how to check that but I’ve currently set up tunnels for Vault Warden add on, unifi add on and unifi cloud key pages - none of which work and do the same thing. All locally hosted pages that have https urls set up through cloudflare tunnels. Is there better methods to achieving this? I’d especially love to have my vault warden instance accessible in the HA experience instead of linking out

4

It’s not the tunnels that are the problem. Vault Warden and Unifi almost certainly do not allow embedding their web pages.

I’d like to have access to my router’s configuration remotely through embedding it’s web page in HA. But the router does not allow embedding so it can’t be done.

There are two things that are needed for embedding web pages in HA:

  1. Matching http / https protocols

  2. The source web pages must allow embedding.

Embedding is seen as a security risk as it can allow cross-site scripting attacks. So security focused things like networking configuration and password vaults most definitely will not allow embedding.

5

Makes sense - thank you for the quick response and insights!

6

@tom_l One more question - I have a second instance of HA2 on a different device on the same network. I tried creating a Cloudflare tunnel and using the Nabu Casa HTTPS url in a web page dashboard in my other instance HA1 and I get a “refuse to connect” message - any insights on this?

7

I’m not sure. You could ask in the frontend developers forum on Discord if HA allows embedding. https://discord.gg/pUtZkBQz Just don’t expect configuration support there. That’s what the #frontend channel is for.

8

Setup a reverse proxy remove the X-Frame-Options header. You can refer to this post, replace tandoor with other services.

9

@lovelylain wow, I’ll thought it simply wasn’t possible - Thank you for sharing!

I’m still a bit of a novice on proxies and network settings- but can you confirm in your example provided, it looks like the only thing I need to do is:

  • Install Nginx Proxy Manager
  • Set up a Hass and whatever Add On URL needed
  • Edit the Add On Nginx settings to remove X Frame Options “ proxy_hide_header X-Frame-Options”

Is that correct? Or are there more steps I need to follow in your example? I know the receipt add on example has things around login but that’s not needed for my purposes, at least yet.

Thanks again for the help - there’s no good documentation for network novices on this challenge and accessing https within the mobile app is also a challenge as well. It’s very confusing if you don’t have a lot of experience with network protocols.

10

Yes, you understand correctly.