iframe嵌套其他网站提示连接被拒绝

简介: iframe嵌套其他网站提示连接被拒绝

最近开发项目中遇到了iframe嵌套页面,遇到了域名提示…拒绝了您的访问。

报错:Refused to display ‘http://xxxxxxx/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.

X-Frame-Options可用于指示是否应该允许浏览器呈现在一个页面

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

<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <meta http-equiv="X-Frame-Options" content="SAMEORIGIN / DENY "> 
  <title> X-Frame-Options </title> 
</head> 

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

X-Frame-Options 有三个属性值:

  1. deny
    浏览器拒绝当前页面加载任何Frame页面。即该页面不允许在frame中展示,即便是在相同域名的页面中嵌套也不允许。
  2. sameorigin
    frame页面的地址只能为同源域名下的页面。即表示该页面可以在相同域名页面的frame中展示。
  3. allow-from uri
    为允许frame加载的页面地址。即表示该页面可以在指定来源的frame中展示。

nginx配置

需要添加到 ‘http’, ‘server’ 或者 ‘location’ 的配置项中,如配置在‘server’ 中

正常情况下都是使用SAMEORIGIN参数

# 允许同域嵌套
add_header X-Frame-Options SAMEORIGIN;
# 允许单个域名iframe嵌套
add_header X-Frame-Options ALLOW-FROM http://whsir.com/;
# 允许多个域名iframe嵌套,注意这里是用逗号分隔
add_header X-Frame-Options "ALLOW-FROM http://whsir.com/,https://cacti.org.cn/";
  • 配置Nginx为所有网页发送X-Frame-Options.
server {
    listen 80;
    server_name *.xxxxxxx;
    location /public/ {
      autoindex on;
      alias /usr/local/nginx/html/web/myblog/node/public/;
    }
    location /webgate/ {
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://127.0.0.1:1314/api/;
    }
    location / {
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      # add_header X-Frame-Options deny;
      # 此处设置X-Frame-Options配置
      add_header X-Frame-Options "ALLOW-FROM  https://xxx2.xxxx.com";
      if ($host ~ ^(xxxx)\.xxxxxxx\.xyz$) {
        proxy_pass http://0.0.0.0:8083;
      }
      if ($host ~ ^(xxxx)\.xxxxxxx\.xyz$) {
        proxy_pass http://0.0.0.0:8081;
      }
      if ($host ~ ^(xxxx)\.xxxxxxx\.xyz$) {
        proxy_pass http://0.0.0.0:8082;
      }
      proxy_pass http://127.0.0.1:1314/;
    }
  }
  • 查看生效


相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
1月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
20 1
|
3月前
|
开发者
在用户关闭页面时,提示用户有内容未保存-论onbeforeunload事件的用法
在用户关闭页面时,提示用户有内容未保存-论onbeforeunload事件的用法
25 0
|
3月前
|
前端开发 JavaScript
【面试题】如何取消 script 标签发出的请求
【面试题】如何取消 script 标签发出的请求
|
4月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
5月前
|
Web App开发 移动开发 安全
如何阻止 iframe 里引用的网页自动跳转
如何阻止 iframe 里引用的网页自动跳转
|
6月前
|
移动开发 JavaScript
同样的JS效果,有部分页面生效,有部分页面无效的原因(怪异模式)
同样的JS效果,有部分页面生效,有部分页面无效的原因(怪异模式)
31 0
|
前端开发
怎么禁止iframe里的元素输入跟操作?
怎么禁止iframe里的元素输入跟操作?
142 0
怎么禁止iframe里的元素输入跟操作?
|
Web App开发 JavaScript iOS开发
求助,主页面通过iframe访问ngnix中的子页面,子页面中利用调用js方法判断localstonge中是否有值,ios不可用,关闭阻止跨网站追踪,safari可用
紧急求助,主页面通过iframe访问ngnix中的子页面,子页面中利用调用js方法判断localstonge中是否有值,ios不可用,关闭阻止跨网站追踪,safari可用