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
I'm using swag sample nginx configuration files with Authelia enabled.
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.