Home Assistant panel_iframe access with nginx proxy

We are going to learn how to access our Home Assistant panel_iframe with nginx reverse proxy. We saw in our last post how to access our Home Assistant using nginx proxy and Let’s Encrypt ssl certificates. Today we will expand our previous configuration to cover the iframes we have within Home Assistant interface.

As an example we will use those panel_iframes that we created in our post Home Assistant install with docker-compose, in this case hass-configrator and node-red. But first we will ensure that these apps are properly protected with a strong password.

You can use a similar configuration to access any embedded iframe you have in Home Assistant using panel_iframe.

Security advise

Two things are mandatory for this access to be secure:

1. All apps that are going to be accessed externally should be password protected and this password should be a strong password (ie. long password using numbers, letters and punctuation marks).
2. Connection to this apps should occur over a secure encrypted channel (using ssl). You can see how to make your connections encrypted with Let’s Encrypt certificates in this post.

Password protect hass-configurator

When I wrote how to deploy hass-configurator under docker in a past post, configuration proposed was the most basic one for the component to work. That config looked like this one.

{
 "BASEPATH": "/hass-config"
}

Now in order to secure this piece, we need to add extra parameters to provide user and password for the configurator. Consequently it will be ready for access it externally in a secure manner.

In order to do this, we will update our configuration to be like the shown below.

{
 "BASEPATH": "/home/homeassistant/.homeassistant",
 "ENFORCE_BASEPATH": true,
 "USERNAME": "yourusernamehere",
 "PASSWORD": "yourstrongpasswordhere"
}

Then restart hass-configurator service for the new configuration to take effect. The new options are self explained. For example ENFORCE_BASEPATH is used to lock the configurator into the basepath and thereby prevent it from opening files outside of the BASEPATH. For a full list of options for the configurator, you can check its documentation here.

Password protect node-red

To enable user authentication on Node-Red, uncomment the adminAuth property in your settings file so It looks like this:

adminAuth: {
  type: "credentials",
  users: [{
    username: "yourusernamehere",
    password: "yourhashedpasswordhere",
    permissions: "*"
  }]
},

To generate your hashed password you can use ‘node-red admin hash-pw’ command. Older versions of node-red probably use the command ‘node-red-admin hash-pw’. In both cases you will get your hashed password that you can paste in the configuration.

Do not forget to restart node-red service to apply changes.

Access Home Assistant panel_iframe with nginx reverse proxy

Now the configuration to access those iframes configured in Home Assistant. We will expand the nginx configuration from our last post to look like this one below.

# /etc/nginx/sites-enabled/example.com.conf
map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

server {
  server_name example.com;
  listen *:80;
  include snippets/certbot.conf;

  location / {
   return 301 https://$host$request_uri;
  }

  access_log /var/log/nginx/example.com-access.log;
  error_log /var/log/nginx/example.com-error.log;
}

server {
  server_name example.com;
  root /var/www/example.com;
  access_log /var/log/nginx/example.com-access.log combined;
  error_log /var/log/nginx/example.com-error.log;
  listen *:443 ssl http2;

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

  include snippets/sslandheaders.conf;

  proxy_buffering off;

  location / {
    proxy_pass http://<homeassistantip>/:8123;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
  }

  location /api/websocket {
    proxy_pass http://<homeassistantip>:8123/api/websocket;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
  }

location /configurator/ {
    proxy_pass http://<configuratorip>:3218;
    rewrite /configurator/(.*) /$1 break;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

location /nodered/ {
    proxy_pass http://<noderedip>:1880;
    rewrite /nodered/(.*) /$1 break;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

}

As you can see, we have added two new location blocks inside our ssl server block, one for the configurator and one for node-red. With this configuration, nginx will negotiate the secure connection and will proxy the requests to the correct service.

Note that the ips for the proxied services should go over http instead of https. Also remember to replace example.com by your own domain and fill the ips for the services.

Home Assistant panel_iframe configuration

Finally we need to do some changes in our Home assistant ‘configuration.yaml’. Therefore, modify the urls for your iframes as the example below.

# configuration.yaml
# ...
panel_iframe:
  configurator:
    title: Configurator
    icon: mdi:wrench
    url: https://example.com/configurator/
    require_admin: true
  nodered:
    title: Node-Red
    icon: mdi:shuffle-variant
    url: https://example.com/nodered/
    require_admin: true

Conclusion

After restarting Home Assistant you will be able to securely access your iframes from within Home Assistant interface. You can also access the apps directly in their urls, without entering the Home Assistant interface (ie. https://example.com/configurator/, https://example.com/nodered/ …).

Hope this has been useful to you. Comments are welcome.