如何安全将Grafana面板嵌入Web应用并解决SSO适配相关问题

核心问题原因 #

你遇到的Iframe无法渲染、SSO失效问题本质是浏览器第三方Cookie拦截规则，以及相关配置不全导致的，可按以下优先级尝试方案：

方案1：调整Cookie配置（优先推荐，改动最小） #

之前设置security.cookie_samesite = none后SSO失效是因为缺少配套配置，正确配置如下：

1. Grafana侧配置
   确保Grafana通过HTTPS访问，修改grafana.ini配置：

   [security]
   cookie_samesite = none
   cookie_secure = true
   # 补充允许嵌入的配置
   allow_embedding = true
   [server]
   # 配置允许嵌入的父域名，多个用空格分隔
   csp_frame_ancestors = https://你的web应用域名.com
   

2. Okta侧配置
   之前开启Iframe权限未生效需同时补全两个配置：
   • 在对应Okta应用的CORS配置中，添加你的Web应用全域名到允许列表，放行GET/POST/OPTIONS请求
   • 在Okta安全设置的Iframe嵌入白名单中，添加你的Web应用域名，同时将Okta自身的会话Cookie SameSite属性调整为None并开启Secure属性

方案2：Auth Proxy方案（适用于不允许使用SameSite=None Cookie的安全场景） #

官方文档未明确的SSO场景配置步骤如下：

1. 前置准备：你的Web应用后端先完成Okta SSO校验，拿到当前登录用户的唯一身份标识（建议用和Grafana用户体系对齐的邮箱/用户名）
2. 反向代理配置：在Web应用和Grafana之间搭建反向代理（可复用现有后端服务或Nginx），代理转发请求到Grafana时，自动添加请求头X-WEBAUTH-USER，值为当前登录用户的Grafana用户名
3. Grafana侧Auth Proxy配置：

   [auth.proxy]
   enabled = true
   header_name = X-WEBAUTH-USER
   header_property = username
   # 可开启自动创建不存在的用户，不需要可关闭
   auto_sign_up = true
   # 必须配置，仅允许你的反向代理IP发起带身份头的请求，避免身份伪造
   whitelist = 反向代理服务的IP地址
   [security]
   allow_embedding = true
   [server]
   csp_frame_ancestors = https://你的web应用域名.com
   

配置完成后直接将Iframe的src指向反向代理暴露的Grafana面板路径即可，无需再走Okta跳转逻辑。

内容的提问来源于stack exchange，提问作者Ravi Nagendra T