Home Assistant内嵌IFrame遇Authelia登录X-Frame-Options跳转限制问题

问题核心 #

未登录Authelia时，Home Assistant的iframe加载受保护的VSCode服务会跳转到Authelia登录页，但浏览器因X-Frame-Options/CSP的严格限制拦截该跳转；已登录状态下iframe可正常使用，说明问题出在登录页的跨域嵌入权限配置上。

解决方案 #

1. 调整Authelia的安全头配置 #

编辑Authelia的configuration.yml，修改security.headers部分，允许Home Assistant域名（及移动端APP）嵌入登录页：

security:
  headers:
    # 兼容旧版浏览器的X-Frame-Options配置
    frame_options:
      action: "allow-from"
      domain: "https://your-ha-domain.com"
    # 现代浏览器优先推荐的CSP配置
    content_security_policy:
      frame-ancestors: "https://your-ha-domain.com app://homeassistant homeassistant:// 'self'"

• 替换https://your-ha-domain.com为你的Home Assistant外部访问域名
• app://homeassistant和homeassistant://用于兼容Home Assistant移动端APP的webview环境

2. 修改SWAG中VSCode的NGINX配置 #

找到SWAG中VSCode对应的站点配置文件（通常在/config/nginx/proxy-confs/目录下），移除或修改冲突的X-Frame-Options头：

• 若原有配置中有add_header X-Frame-Options DENY;，替换为：

add_header X-Frame-Options "ALLOW-FROM https://your-ha-domain.com";

• 或者直接删除该行，让Authelia的全局安全头配置生效，避免重复设置导致冲突

3. 验证Home Assistant iframe配置 #

确保configuration.yaml中的iframe配置指向正确的受保护域名：

panel_iframe:
  vscode:
    title: VSCode
    url: "https://vscode.your-domain.com"
    icon: mdi:code-editor

• 确认url是Authelia保护的VSCode完整域名

4. 测试与排查 #

• 清除浏览器缓存，退出Authelia登录状态，重新在Home Assistant中打开iframe，检查是否能正常加载登录页
• 若仍有问题，打开浏览器开发者工具（F12），查看控制台的具体错误信息，确认是X-Frame-Options还是CSP导致的拦截，针对性调整配置

内容的提问来源于stack exchange，提问作者Blank