如何在iframe中实现Apache Airflow与Angular应用的静默登录？

是可以实现的，但需要针对Keycloak、Airflow以及浏览器安全限制做一系列配置调整，以下是具体步骤：

1. 调整Keycloak客户端配置 #

• 针对Airflow和Angular对应的Keycloak客户端，在Web Origins字段中添加Angular应用的完整域名（比如https://your-angular-app.com），允许其嵌入iframe访问Keycloak认证页面。
• 修改Keycloak会话Cookie设置：进入Keycloak领域的Realm Settings → Cookies，将SameSite属性设为None，同时勾选Secure（仅HTTPS环境有效，生产必须开启），确保跨域iframe能携带Keycloak的会话Cookie。

2. 配置Airflow Web服务器 #

• 在Airflow的webserver_config.py中，修改会话Cookie相关参数：

  SESSION_COOKIE_SAMESITE = "NONE"
  SESSION_COOKIE_SECURE = True
  

• 移除或调整Airflow的X-Frame-Options限制：如果Airflow默认设置了X-Frame-Options: DENY，需要修改配置允许Angular域名嵌入。可以在webserver_config.py中添加：

  X_FRAME_OPTIONS = "ALLOW-FROM https://your-angular-app.com"
  

  若使用反向代理（如Nginx），也可以在代理层添加响应头覆盖该设置。
• 配置CSRF信任源（生产环境必做）：保持CSRF防护开启的同时，添加Angular域名到信任列表：

  WTF_CSRF_TRUSTED_ORIGINS = ["https://your-angular-app.com"]
  

3. 实现静默登录逻辑 #

由于Angular和Airflow共享同一Keycloak领域与会话，当Angular应用已完成登录后，在iframe中加载Airflow时：

• Airflow会自动重定向到Keycloak认证页面
• Keycloak检测到已有有效会话，无需用户手动输入凭证，直接返回授权码给Airflow
• Airflow完成授权码交换，建立自身会话，实现静默登录

4. 注意事项 #

• 必须使用HTTPS：SameSite=None要求Cookie标记为Secure，HTTP环境下浏览器会拒绝这类Cookie，导致会话无法共享。
• 第三方Cookie限制：现代浏览器默认限制第三方Cookie，若用户浏览器开启该限制，可能导致Keycloak会话无法在iframe中传递。这种情况下，可考虑让用户手动允许第三方Cookie，或改用Token传递方案（Angular获取Keycloak的ID Token后，通过URL参数或消息传递给Airflow，Airflow验证Token后建立会话）。
• 安全风险：放宽iframe和Cookie限制会带来一定安全风险，生产环境需严格限制允许的域名，避免未授权的嵌入。

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