跨域嵌入Apache Superset仪表盘遇X-Frame-Option错误（Talisman配置）

问题描述 #

我尝试用iFrame将Apache Superset仪表盘嵌入部署在另一台主机的Angular应用中，但遇到错误：

X-Frame-Option sameorigin does not allow the display of iFrame

我的Superset配置包含Talisman设置，具体如下：

TALISMAN_CONFIG = {
    "content_security_policy": {
        "base-uri": ["'self'"],
        "default-src": ["'self'"],
        "img-src": [
            "'self'"
        ],
        "font-src": [
            "'self'"
        ],
        "worker-src": ["'self'", "blob:"],
        "connect-src": [
            "'self'"
        ],
        "object-src": "'none'",
        "style-src": [
            "'self'",
            "'unsafe-inline'"
        ],
        "script-src": [
            "'self'", 
            "'strict-dynamic'", 
            "'unsafe-inline'",
            "'unsafe-eval'"
        ],
        "frame-ancestors": [
            "'self'",
            os.getenv('BASE_URL_EXTERNAL_APP'),
        ]
    },
    "content_security_policy_nonce_in": ["script-src"],
    "force_https": True,
    "force_https_permanent": False,
    "session_cookie_secure": False,
}

问题原因 #

报错里的X-Frame-Options: sameorigin是Superset默认发送的响应头，哪怕你配置了CSP的frame-ancestors，Talisman也可能同时发送这个更严格的限制头，导致浏览器优先遵守它，拒绝加载跨域iframe。

解决步骤 #

1. 确认环境变量值
   先检查BASE_URL_EXTERNAL_APP环境变量是否正确设置为Angular应用的完整域名（比如https://your-angular-app.com），别带多余路径，确保协议（http/https）和域名拼写完全正确。

2. 修改Talisman配置，处理X-Frame-Options
   显式配置frame_options，要么指定允许的来源，要么直接禁用这个旧版头（推荐后者，因为frame-ancestors是更现代的CSP标准，浏览器会优先遵循）：

   • 方式一：指定允许的来源
     在TALISMAN_CONFIG里添加两行：

     "frame_options": "ALLOW-FROM",
     "frame_options_allow_from": os.getenv('BASE_URL_EXTERNAL_APP'),
     

   • 方式二：直接禁用X-Frame-Options头
     在TALISMAN_CONFIG里添加一行：

     "frame_options": False,
     

3. 验证CSP配置
   确保frame-ancestors数组里的Angular域名格式正确，开发环境如果是http://localhost:4200，就把环境变量设成这个值；生产环境填正式域名即可。

4. 重启Superset服务
   修改配置后必须重启Superset的所有相关服务（web服务、worker等），新配置才会生效。

5. 检查响应头
   用浏览器F12开发者工具查看Superset仪表盘页面的响应头，确认：

   • 没有X-Frame-Options: sameorigin头，或者是X-Frame-Options: ALLOW-FROM [你的Angular域名]
   • Content-Security-Policy头里的frame-ancestors包含你的Angular域名和'self'

额外注意事项 #

• 如果Angular用了HTTPS，Superset也必须启用HTTPS（你的配置里force_https已经设为True），否则浏览器会因为混合内容阻止iframe加载。
• 排查是否有反向代理（比如Nginx）或防火墙自动添加了X-Frame-Options头，有的话需要在代理配置里禁用这个设置。

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