如何在React应用的iframe中嵌入带AWS Cognito认证的Open Search Dashboard？

你遇到的问题本质是：未携带有效认证状态时，OpenSearch Dashboards会跳转到AWS Cognito登录页，而Cognito登录页默认设置了X-Frame-Options: deny，禁止被iframe嵌入，因此触发报错。

可以通过传递认证令牌让Dashboard正常显示，具体操作要点如下：

• 先获取有效的OpenSearch认证令牌：通过Cognito OAuth2流程获取id_token或access_token（取决于你的OpenSearch安全插件配置，通常id_token即可满足需求）。
• 在iframe的src URL中追加令牌参数：格式为&security_token=<你的令牌>（若原URL末尾无参数，改用?security_token=开头），让Dashboards直接识别认证状态，避免触发Cognito登录跳转。
• 处理令牌过期逻辑：令牌存在有效期，需在前端定时刷新令牌，或监听iframe状态，在令牌失效时重新获取并更新iframe的src。
• 配置OpenSearch Dashboards允许嵌入：修改opensearch_dashboards.yml配置文件，添加或调整content_security_policy的frame-ancestors规则，允许你的React应用域名作为嵌入来源，示例配置：

  opensearch_security.csp.frame_ancestors: ["https://your-react-app-domain.com", "self"]
  

修改后的iframe代码示例：

<iframe
    title="Dashboard"
    src="https://app-name.us-east-1.es.amazonaws.com/_dashboards/app/dashboards?security_tenant=READ_ONLY&security_token=YOUR_VALID_AUTH_TOKEN#/view/app-id?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),query:(language:kuery,query:''),timeRestore:!f,title:test_abm,viewMode:view)"
></iframe>

额外注意：

• 令牌禁止硬编码，需通过安全渠道获取（比如后端接口返回，或前端使用Cognito SDK获取）。
• 确保令牌拥有访问指定READ_ONLY租户和目标仪表盘的权限。

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