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/;
    }
  }
  • 查看生效


相关文章
uniapp如何安装vant
uniapp如何安装vant
973 1
|
JavaScript 前端开发 搜索推荐
|
安全 Unix Linux
Windows如何远程连接服务器?服务器远程连接图文教程
服务器操作系统可以实现对计算机硬件与软件的直接控制和管理协调,任何计算机的运行离不开操作系统,服务器也一样,服务器操作系统主要分为四大流派:Windows Server、Netware、Unix和Linux。今天驰网飞飞将和你分享Windows server远程连接图文教程,希望可以帮助到你
4928 4
Windows如何远程连接服务器?服务器远程连接图文教程
|
12月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
546 0
|
12月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
1881 2
|
关系型数据库 MySQL API
flinkcdc不做任何处理,直接mysql同步到 mysql 的过程中 sink 使用 哪个方法?
flinkcdc不做任何处理,直接mysql同步到 mysql 的过程中 sink 使用 哪个方法?
491 1
Vue3标签页(Tabs)
该组件提供可自定义的标签页功能,支持居中显示、不同尺寸与样式,并能设置当前激活选项。其主要属性包括标签页数组、居中显示、尺寸、样式、间隙及激活键值。示例展示了基本使用、卡片式标签页、禁用选项、左右滑动等功能。组件基于Vue3开发,并利用`useResizeObserver`等技术实现。[在线预览](https://themusecatcher.github.io/vue-amazing-ui/guide/components/tabs.html)。
747 0
Vue3标签页(Tabs)
|
开发工具 git Windows
解决git clone提示You hasn‘t joined this enterprise
解决git clone提示You hasn‘t joined this enterprise
1189 2
|
JavaScript API 数据格式
【Vue 3】如何封装一个超级好用的 Hook!
【Vue 3】如何封装一个超级好用的 Hook!
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
1893 2