Apache Superset仪表盘集成至外部Angular应用相关问题咨询

Iframe 嵌入重定向到登录页问题处理 #

• 先调整Superset服务端安全配置，修改superset_config.py文件：
  放开iframe嵌入的域名限制，配置CSP的frame-ancestors字段加入你的Angular应用域名，同时配置CORS允许跨域请求，关闭针对嵌入场景的不必要CSRF校验：

  # 允许iframe嵌入的域名列表，开发环境请加对应带端口的本地地址
  TALISMAN_CONFIG = {
      "content_security_policy": {
          "frame-ancestors": ["'self'", "https://你的Angular应用域名"],
          "default_src": ["'self'"],
          "script_src": ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
          "style_src": ["'self'", "'unsafe-inline'"]
      }
  }
  CORS_ORIGINS = ["https://你的Angular应用域名"]
  CORS_SUPPORTS_CREDENTIALS = True
  # 如无特殊安全要求，嵌入场景可关闭WTF CSRF校验
  WTF_CSRF_ENABLED = False
  # 跨域Cookie配置，如使用HTTPS可设置为None
  SESSION_COOKIE_SAMESITE = "Lax"
  

• 采用guest token方式完成身份透传，不要直接使用原生的仪表盘访问地址：
  先通过你的服务端调用Superset的/api/v1/security/login接口获取管理员权限的access token，再调用/api/v1/security/guest_token接口生成对应仪表盘的临时访问令牌，将令牌拼接在仪表盘URL的guest_token参数后，再加上standalone=true、show_bookmark_button=false等自定义参数，最终生成的URL放入iframe的src属性即可绕过登录校验。

调用API获取仪表盘JSON配置方案 #

• 完成身份认证后，在请求头携带Authorization: Bearer <access_token>，调用GET /api/v1/dashboard/<目标仪表盘ID>接口，返回结果中：
  • json_metadata字段存储仪表盘的全局配置、滤镜规则、组件关联映射关系
  • position_json字段存储所有组件的布局位置、尺寸、层级、类型等渲染必要信息
• 如需完整导出所有关联资源，调用GET /api/v1/dashboard/<目标仪表盘ID>/export接口，返回的压缩包中包含仪表盘、关联图表、数据集、数据源的全量JSON配置，可直接用于自定义渲染。
• 你可以根据拿到的配置，拆分出每个图表的ID，调用POST /api/v1/chart/<图表ID>/data接口获取图表的实时查询结果，自行组装生成自定义的HTML仪表盘页面。

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