Angular使用iframe嵌入页面报X-Frame-Options sameorigin错误

你遇到的是浏览器同源安全策略下的帧嵌入拦截问题：
被嵌入的内部项目页面返回的HTTP响应头中设置了X-Frame-Options: sameorigin，该安全头的作用是防范点击劫持攻击，规则为仅允许和当前页面同协议、同域名、同端口的站点通过iframe嵌入当前页面。
你的Angular工具应用和待嵌入的内部项目地址存在域名/端口/协议上的差异，不满足同源要求，因此浏览器直接拒绝了iframe的加载请求。

你当前使用的嵌入代码如下：

<iframe src="https://......at/certificates" class="full"></iframe>

浏览器抛出的错误信息：

Refused to display 'https://....at/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

这类限制是浏览器层面的强制安全校验，无法通过前端Angular业务代码绕过，只能通过调整服务端配置或代理规则解决，可选方案如下：

• 调整被嵌入项目的安全响应头配置
  因为两个项目都属于公司内部可信系统，可以修改被嵌入项目的响应头规则，加入对你的Angular工具应用域名的信任。优先推荐使用兼容性更好的Content-Security-Policy的frame-ancestors指令配置，以Nginx配置为例：

  # 替换为你自己的Angular应用实际访问域名
  add_header Content-Security-Policy "frame-ancestors 'self' https://your-internal-angular-app.com;";
  

  如果需要兼容旧浏览器，可以配合X-Frame-Options的ALLOW-FROM参数配置，注意不要直接删除该安全头，避免引入点击劫持安全风险。
• 通过反向代理实现同域嵌入
  如果不方便修改被嵌入项目的配置，可以在Angular应用的部署层（Nginx服务、开发环境devServer）配置反向代理，将指定路径的请求转发到目标内部项目地址，让iframe使用同域相对路径访问，绕开跨源限制。
  Angular本地开发环境可在proxy.conf.json中添加如下代理规则：

  {
    "/internal/certificates": {
      "target": "https://......at/certificates",
      "changeOrigin": true,
      "secure": true,
      "pathRewrite": {"^/internal/certificates" : ""}
    }
  }
  

  代理配置完成后，将iframe的src改为同域相对路径即可：

  <iframe src="/internal/certificates" class="full"></iframe>
  

  生产环境部署时在对应的Nginx等服务上配置相同逻辑的反向代理规则即可。

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