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


相关文章
|
安全 Unix Linux
Windows如何远程连接服务器?服务器远程连接图文教程
服务器操作系统可以实现对计算机硬件与软件的直接控制和管理协调,任何计算机的运行离不开操作系统,服务器也一样,服务器操作系统主要分为四大流派:Windows Server、Netware、Unix和Linux。今天驰网飞飞将和你分享Windows server远程连接图文教程,希望可以帮助到你
5268 4
Windows如何远程连接服务器?服务器远程连接图文教程
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
1251 76
|
算法 前端开发 开发工具
vitepress从0到1,让每个前后端小伙伴都拥有一个属于自己的博客
这篇文章详细介绍了如何从零开始使用VitePress搭建个人博客,包括项目初始化、配置美化及部署全流程。
|
安全 前端开发 Java
Spring Security 自定义异常失效?从源码分析到解决方案
Spring Security 自定义异常失效?从源码分析到解决方案
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
2000 2
|
JavaScript API 数据格式
【Vue 3】如何封装一个超级好用的 Hook!
【Vue 3】如何封装一个超级好用的 Hook!
|
开发工具 git Windows
解决git clone提示You hasn‘t joined this enterprise
解决git clone提示You hasn‘t joined this enterprise
1321 2
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
2092 2
|
XML 前端开发 JavaScript
深入探究iframe:网页嵌入的魔法盒子(下)
深入探究iframe:网页嵌入的魔法盒子(下)