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


相关文章
|
Java 关系型数据库 数据库连接
MyBatis Plus 解决大数据量查询慢问题
MyBatis Plus 解决大数据量查询慢问题
|
4月前
|
前端开发 JavaScript 数据可视化
前端组件库——Radix UI知识点大全(一)
教程来源 https://bncne.cn/ Radix UI是React生态中革命性的无样式组件原语库,专注提供高可访问性、键盘导航完备、ARIA合规的底层交互逻辑,将样式完全交由开发者掌控,完美平衡定制自由与无障碍标准,已成为shadcn/ui等主流工具的底层基石。
|
10月前
|
应用服务中间件 网络安全 nginx
手把手教你使用 Docker 部署 Nginx 教程
本文详解Nginx核心功能与Docker部署优势,涵盖镜像拉取、容器化部署(快速、挂载、Compose)、HTTPS配置及常见问题处理,助力高效搭建稳定Web服务。
4129 4
|
网络协议 应用服务中间件 网络安全
Nginx,正向代理
本文介绍了Nginx作为HTTPS正向代理的两种方案:HTTP CONNECT隧道(7层)和NGINX stream(4层)。HTTP CONNECT隧道需要客户端手动配置代理,通过CONNECT请求建立隧道;而NGINX stream则更适合透明代理,利用SNI字段实现流量转发。文章详细讲解了两者的原理、环境搭建、使用场景及常见问题,并提供了配置示例和最佳实践建议。内容转载自阿里云开发者社区@怀知的文章,推荐读者参阅原文获取更多信息。感谢您的阅读!
3345 80
Nginx,正向代理
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
9611 90
|
人工智能 测试技术 API
PaperBench:OpenAI开源AI智能体评测基准,8316节点精准考核复现能力
PaperBench是OpenAI推出的开源评测框架,通过8316个评分节点系统评估AI智能体复现学术论文的能力,涵盖理论理解、代码实现到实验执行全流程。
1017 30
PaperBench:OpenAI开源AI智能体评测基准,8316节点精准考核复现能力
|
JavaScript
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
1992 2
|
Java 数据库连接 mybatis
成功解决: Invalid bound statement (not found) 在已经使用mybatis的项目里引入mybatis-plus,结果不能共存的解决
这篇文章讨论了在已使用MyBatis的项目中引入MyBatis-Plus后出现的"Invalid bound statement (not found)"错误,并提供了解决方法,主要是通过修改yml配置文件来解决MyBatis和MyBatis-Plus共存时的冲突问题。
成功解决: Invalid bound statement (not found) 在已经使用mybatis的项目里引入mybatis-plus,结果不能共存的解决
|
JavaScript 测试技术
vue配置生产环境.env.production、测试环境.env.development
该文章介绍了如何在Vue项目中配置和使用不同的环境变量文件(.env、.env.production、.env.development)以适应开发、测试和生产环境,并通过修改`package.json`中的scripts来实现不同环境的打包。
4655 0
vue配置生产环境.env.production、测试环境.env.development
|
JavaScript 测试技术 API
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
13978 8