Search code examples
dockernginxiframedocker-composehome-assistant

Home Assistant IFrame Redirect from Authelia - X-Frame-Options

I have a Home Assistant setup with IFrames to various URLs, which Authelia protects. The idea which I want to achieve is to make those websites protected by Authelia and request login directly in the Home Assistant App from the IFrame. However, the app redirects to the login page, which is protected by X-Frame-Options, at least I assume, and my browser says that for security reasons, it will not redirect to the login page. How will I allow it so I can log in from the Home Assistant website and the mobile app as well?

I'm using docker-compose with SWAG, Authelia, and VSCode (Authelia Protected), etc. I think that issue lies in the wrong headers in NGINX.

This is my VSCode NGINX config with X-Frame-Options which does not work. What am I doing wrong?

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name vscode.*;

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    # Authelia
    include /config/nginx/snippets/authelia/location.conf;

    location / {
        # Authelia
        include /config/nginx/snippets/authelia/authrequest.conf;

        include /config/nginx/proxy.conf;
        include /config/nginx/resolver.conf;
        set $upstream_app vscode;
        set $upstream_port 8443;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

        # proxy_hide_header X-Frame-Options;
        proxy_set_header X-Frame-Options "ALLOW-FROM https://homeassistant.alsyko.duckdns.org";
        proxy_set_header Content-Security-Policy "frame-ancestors https://homeassistant.alsyko.duckdns.org";
    }

    location ~ (/vscode)?/api {
        include /config/nginx/proxy.conf;
        include /config/nginx/resolver.conf;
        set $upstream_app vscode;
        set $upstream_port 8443;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

        proxy_hide_header X-Frame-Options;
    }
}

When I'm logged in to Authelia from a normal Authelia website, everything works, even in Home Assistant (no redirect).

URLs in secrets.yaml

vscode-url: https://vscode.alsyko.duckdns.org/
frigate-url: https://frigate.alsyko.duckdns.org/
authelia-url: https://www.alsyko.duckdns.org/authelia

IFrames in configuration.yaml (all routes are protected, except login which does not work as well)

panel_iframe:
  vscode:
    title: VSCode
    icon: mdi:wrench
    url: !secret vscode-url
  
  frigate_ui:
    title: Frigate
    icon: mdi:cctv
    url: !secret frigate-url

  authelia:
    title: Authelia Login
    icon: mdi:login
    url: !secret authelia-url

Error page

I'm using swag sample nginx configuration files with Authelia enabled.

Solution

  • The Authelia is bypassing the NGINX configuration, and I needed to add the correct configuration of headers inside the Authelia config under servers:

    servers:
    ...
    headers: 
        csp_template: "default-src 'self'; frame-src 'none'; object-src 'none'; style-src 'self' 'nonce-${NONCE}'; base-uri 'self'; frame-ancestors 'self' https://homeassistant.okysla.duckdns.org https://*.alsyko.duckdns.org https://www.okysla.duckdns.org;"
    ...

    My previous attempts in NGINX should be in the Authelia server block anyway. This is a very open solution, and I will harden it later.

    Dots are added into a code block to represent other code.