解决X-Frame-Options 同源策略阻止问题

问题描述

在使用iframe时遇到"某IP拒绝了我们的连接请求"的错误，这通常意味着您正尝试从网页访问本地服务器上的内容，但存在连接问题。然后在浏览器按F12进入console控制台出现报错信息，如下显示：

Refused to display 'http://172.23.xx.xx:8082/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.Understand this error

意思是：浏览器拒绝在

🔎 背景知识

X-Frame-Options 是一个 HTTP 响应头，用来防止点击劫持（Clickjacking）攻击。常见取值有：
DENY：完全禁止页面被嵌入到任何 ：只允许同源页面嵌入（即协议、域名、端口完全一致）。
ALLOW-FROM uri：只允许指定来源的页面嵌入（但这个在现代浏览器基本不支持了）。
你的情况是目标服务（172.23.xx.xx:8082）设置了 sameorigin，因此只有在相同域名 + 端口下，才能被放进 iframe。

问题原因

当您看到"Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'"错误时，这意味着：
目标网站设置了X-Frame-Options: SAMEORIGIN HTTP响应头
该设置只允许相同域名的页面通过iframe嵌入此内容
您的页面与iframe内容不在同一个域或端口上，因此被拒绝加载
这是一种安全措施，用于防止点击劫持攻击

安全说明： X-Frame-Options是一种重要的安全机制，网站使用它来保护用户免受界面伪装攻击。

解决方案

1. 后端修改响应头（推荐在受控环境下）

在后端配置允许嵌入，比如 Spring Boot 可以在 WebSecurityConfigurerAdapter 或 SecurityFilterChain 里加：

http.headers().frameOptions().disable();

或者设置：

http.headers().frameOptions().sameOrigin();

这样允许同源嵌入。

2. 使用代理

通过 Nginx 或你的后端做一个 反向代理，让前端和 iframe 服务看起来来自同一个源。
例如把 http://172.23.xx.xx:8082 映射到前端的 /proxy/api，这样同源就不会触发限制。

3. 更换安全策略

新的推荐方式是用 Content-Security-Policy (CSP) 的 frame-ancestors 指令，而不是 X-Frame-Options。
可在nginx配置文件中修改，例如：

Content-Security-Policy: frame-ancestors 'self' http://localhost:3000;

这样表示：
'self'：允许自己（同源）
http://172.23.xx.xx:8081：允许这个端口的页面嵌入

⚠️注意

  1. 若使用 更换安全策略 时，记得 清掉旧的 X-Frame-Options，不然 CSP 会和它冲突。
proxy_hide_header X-Frame-Options;
proxy_hide_header Content-Security-Policy;
  1. 改完后要 reload Nginx：
sudo nginx -t   # 检查配置是否正确
sudo nginx -s reload