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

huangapple go评论62阅读模式
英文:

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

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

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

英文:

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

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

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

答案1

得分: 1

Authelia正在绕过NGINX配置,我需要在Authelia配置的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;"
    ...

我的先前尝试在NGINX中应该在Authelia服务器块中。这是一个非常开放的解决方案,我以后会加强它。

点号被添加到代码块中以表示其他代码。

英文:

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.

huangapple
  • 本文由 发表于 2023年5月25日 07:15:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/76327945.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定