前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iframe页面嵌套提示X-Frame-Options问题

iframe页面嵌套提示X-Frame-Options问题

作者头像
Li_XiaoJin
发布2022-12-15 14:03:22
7.1K0
发布2022-12-15 14:03:22
举报
文章被收录于专栏:Lixj's BlogLixj's Blog

最近需要在大屏网页中嵌套跳转一些网站地址,使用 iframe 页面嵌套时会提示X-Frame-Options问题,具体报错如下:

Refused to display 'xxxxxxxxx' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('DENY'). Falling back to 'deny'.

X-Frame-Options 介绍

代码语言:javascript
复制
X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在<frame>、<iframe>、<embed> 或者 <object> 中展现的标记。

站点可以通过确保网站没有被嵌入到别人的站点里面,从而避免点击劫持攻击。

X-Frame-Options 可以有几个参数:

  • DENY 表示该页面不允许在 frame 中展示(拒绝任何 iframe 的嵌套请求),即便是在相同域名的页面中嵌套也不允许。
  • SAMEORIGIN 表示该页面可以在相同域名页面的 iframe 中展示,例如网页为 abc.com/123.html,則 abc.com 底下的所有网页可以嵌入此网页,但是 abc.com 以外的网页不能嵌入。 设置后如果在不同域名页面通过 iframe 加载会报下面错误:Refused to display 'xxxxxxxxx' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('DENY, SANEORIGIN'). Falling back to 'deny'.
  • ALLOW-FROM uri 表示该页面可以在指定的 uri 页面中被 iiframe 加载。
  • ALLOWALL 表示该页面允许全部来源域名的frame展示。 nginx配置示例:add_header X-Frame-Options ALLOWALL;

Nginx 配置

配置 nginx 发送 X-Frame-Options 响应头,把下面这行添加到 ‘http’, ‘server’ 或者 ‘location’ 的配置中:

  • 表示该页面可以在相同域名页面的 frame 中展示 add_header X-Frame-Options SAMEORIGIN;
  • 表示该页面可以在指定来源的 frame 中展示 add_header X-Frame-Options "ALLOW-FROM domain.com";
  • 表示该页面允许全部来源域名的 frame 展示 add_header X-Frame-Options ALLOWALL;

问题处理

Nginx 配置了 add_header X-Frame-Options SAMEORIGIN; 之后

发现报错变了,如下:

Refused to display 'xxxxxxxxx' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('DENY, SANEORIGIN'). Falling back to 'deny'.

网上查了很多博客资料,还是没找到原因,

发现有些评论说可以先屏蔽再设置...

代码语言:javascript
复制
location /xxxxxx/ {
      proxy_hide_header X-Frame-Options;  //忽略返回头的X-Frame-Options
      add_header X-Frame-Options SAMEORIGIN always;  //设置X-Frame-Options
      proxy_pass http://xxxxxxxx/xxxxxx/;
}

试了之后发现可以正常打开页面了,就是不知道有没有安全隐患,希望没事吧。这个问题后面持续跟进,先这样吧...

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-12-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • X-Frame-Options 介绍
  • Nginx 配置
  • 问题处理
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档