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


相关文章
|
NoSQL 算法 Java
【工具类用法】Hutool里的生成唯一Id唯的工具类
【工具类用法】Hutool里的生成唯一Id唯的工具类
1543 0
|
Java 关系型数据库 数据库连接
MyBatis Plus 解决大数据量查询慢问题
MyBatis Plus 解决大数据量查询慢问题
|
Java Spring
SpringBoot: 启动Banner在线生成工具
SpringBoot: 启动Banner在线生成工具
39325 1
SpringBoot: 启动Banner在线生成工具
|
机器学习/深度学习 前端开发 JavaScript
WebAssembly:让前端性能突破极限的秘密武器
WebAssembly(简称 WASM)作为前端开发的性能加速器,能够让代码像 C++ 一样在浏览器中高速运行,突破了 JavaScript 的性能瓶颈。本文详细介绍了 WebAssembly 的概念、工作原理以及其在前端性能提升中的关键作用。通过与 JavaScript 的配合,WASM 让复杂运算如图像处理、3D 渲染、机器学习等在浏览器中流畅运行。文章还探讨了如何逐步集成 WASM,展示其在网页游戏、高计算任务中的实际应用。WebAssembly 为前端开发者提供了新的可能性,是提升网页性能、优化用户体验的关键工具。
7194 2
WebAssembly:让前端性能突破极限的秘密武器
|
JavaScript 测试技术 API
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
13004 8
|
JavaScript 前端开发 开发工具
一身反骨的我,用--no-verify绕开了git代码提交限制!
【10月更文挑战第7天】一身反骨的我,用--no-verify绕开了git代码提交限制!
1400 0
|
JavaScript 前端开发 API
快速实现 iframe 嵌套页面
【6月更文挑战第22天】快速实现 iframe 嵌套页面
C#动态查询:巧用Expression组合多条件表达式
在C#中,利用`Expression`类和`AndAlso`、`OrElse`方法,可以组合两个`Expression&lt;Func&lt;T, bool&gt;&gt;`以实现动态多条件查询。该方法通过构建表达式树,方便地构建复杂查询。示例代码展示了如何创建表达式树,分别检查年龄大于等于18和姓名为&quot;John&quot;的条件,并使用`AndAlso`组合这两个条件,最终编译为可执行的委托进行测试。
814 1
|
前端开发 Java Shell
使用纯Java实现一个WebSSH项目再也不用下载Xshell
使用纯Java实现一个WebSSH项目再也不用下载Xshell
396 1
|
安全 前端开发 JavaScript
防御点击劫持:X-Frame-Options头的重要性与实践
防御点击劫持:X-Frame-Options头的重要性与实践
2488 0

热门文章

最新文章