Embedding Home Assistant in another website

luticus · May 19, 2021, 2:49pm

I used to be able to embed Home Assistant into another webpage, in my case Nextcloud via the external sites plugin. Basically I could run Home Assistant in an iframe. I can no longer do this and I get an error: Blocked a frame with origin “https://ha.example.com” from accessing a cross-origin frame.

Is there any way to configure Home Assistant to allow cross origin frames? I already have my Home Assistant behind an Apache proxy, so that is working fine.

jjjooosss13 · December 21, 2021, 10:24am

I too am looking for an answer for this.

luticus · December 21, 2021, 10:12pm

I actually figured it out in my case. In my situation I have an Apache proxy for HA setup as an Apache virtual host, and in that host I specify a content security policy. So I use something like this:

Header always append Content-Security-Policy "frame-ancestors 'self' ha.example.com www.example.com example.com;"
Header always append X-Frame-Options ALLOW-FROM=ha.example.com
Header always append X-Frame-Options ALLOW-FROM=www.example.com
Header always append X-Frame-Options ALLOW-FROM=example.com

I’m not entirely sure if all those settings are actually necessary, but I set it up that way so that no matter what way you view the page it should still work. These values work for me and I have my HA embedded in Nextcloud via external sites again.

comicsansg · October 27, 2023, 8:35am

For the users on research for solutions: I found something, but it has quite some limits due to security (or lack thereof).
The following post below, along with kiosk-mode (HACS frontend), should allow you to embed dashboards in pages.
One major problem with this is that the login is bypassed for IP addresses, and makes for a big security hole in something public-facing. If anything, this is more useful as a source in Larix Broadcaster or OBS Studio.
If anyone does go ahead with this, the USER ID IS NOT YOUR USERNAME. Go to:
Settings > People > Users (up top) > [target user]
You should now see the ID needed. Putting the username in user_id1 will cause your instance to kick into safe mode.

Bypass login

So if ALL you want to do is have 192.168.8.22 login automatically, the following should be enough:

# Allow login without password from local network
homeassistant:
  auth_providers:
    - type: trusted_networks
      trusted_networks:
        - 192.168.8.22/32
      trusted_users:
        192.168.8.22:
          - user_id1 ## specific user for Google Nest Hub
      allow_bypass_login: true
    - type: homeassistant

Basically just replace all occurrences 192.168.8.22 (leaving the /32 alone) with the IP address of the device you’re using to view the page, and user_id1 with the ID I mentioned above this quote. Then stick it in your configuration.yaml and bob’s your uncle(?). This might need a restart if a YAML refresh doesn’t do it.
I have no idea how that saying works…

Sorry for the ping >v<