利用代理页面解决html iframe跨域访问网站问题

news/2024/5/13 20:41:20/文章来源:https://blog.csdn.net/zxp2624161989/article/details/78531143

转自:http://www.zuidaima.com/share/1854884509142016.htm


在做项目的时候遇到跨域问题,经过自己的一番摸索终于找到一种解决iframe跨域问题的方案,或许很多人也会遇到这样头疼的问题,希望能尽自己绵薄之力帮助大家。如果不清楚或者有问题的可以留言和私信我,谢谢。

【问题描述】

    在项目中由于许多页面都是连接到其他项目的页面。由菜单连接到其他域页面,再在其他域页面上调用本项目的js用iframe显示其他域的页面,这样就会涉及到安全性问题即跨域问题。报错信息如下

浏览器控制台跨域报错信息:Unsafe JavaScript attempt to access frame with URL xxx from frame with URL xxx Domains, protocols and ports must match.

【分析思路】

    要想解决问题就必须得还原问题本身,那就是重现问题。对于这个问题我就单独写了两个项目来进行模拟测试,并使用iframe来嵌套调用两个项目的页面,把这两个项目分别放在两个不同端口的tomcat下。由于端口不同所以浏览器就会抛出安全异常即跨域问题。

    成功的重现问题后,接下来就是根据错误信息在网上搜寻答案。根据网上给的答案大多数都是设置页面document.domain为同一域,这个方法倒是能解决,但是需要所有页面都这样设置,但在实际项目中往往会有很多页面而无法每个页面都设置,逐放弃之。后来几经琢磨想到了利用代理页面,就好像访问本项目页面一样,再结合之前弄打印页面采用自动创建iframe来加载别的页面(即中间页面/代理页面),结果通过这种方式还真有效。

【具体解决方法】

     把site1和site2项目分别放在不同端口的tomcat下运行,访问site1的index.html页面,这是入口页面。在site1的index.html页面中用iframe访问显示site2的index.html页面,再通过操作site2的index.html页面调用site1的index.html页面中的方法excute,要调用此方法就要利用到中间代理页面site1中的iframe.html,这个是一个关键页面,因为所有需要跨域的访问都要通过这个页面来调用site1项目中的代码。这样就形成了自己调用自己的代码也就不会出现跨域了。在这个执行过程中site2的index.html页面中的crossFrame方法起到了关键作用,就是通过它来调用代理页面的。

项目截图

利用代理页面解决html iframe跨域访问网站问题

Site1/index.html

利用代理页面解决html iframe跨域访问网站问题

Site2/index.html

利用代理页面解决html iframe跨域访问网站问题

Site1/iframe.html

利用代理页面解决html iframe跨域访问网站问题

 

访问site1/index.html

运行截图:

利用代理页面解决html iframe跨域访问网站问题

参考资料:

什么是跨域

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

例如:

URL说明是否允许通信
http://www.a.com/a.js 
http://www.a.com/b.js
同一域名下允许
http://www.a.com/lab/a.js 
http://www.a.com/script/b.js
同一域名下不同文件夹允许
http://www.a.com:8000/a.js 
http://www.a.com/b.js
同一域名,不同端口不允许
http://www.a.com/a.js 
https://www.a.com/b.js
同一域名,不同协议不允许
http://www.a.com/a.js 
http://70.32.92.74/b.js
域名和域名对应ip不允许
http://www.a.com/a.js 
http://script.a.com/b.js
主域相同,子域不同不允许
http://www.a.com/a.js 
http://a.com/b.js
同一域名,不同二级域名(同上)不允许(cookie这种情况下也不允许访问)
http://www.zuidaima.com/a.js 
http://www.a.com/b.js
不同域名不允许

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_885379.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web安全/渗透测试(四):收集目标网站信息的网站

一、http://whois.domaintools.com/ 查找目标网站所有者的信息 二、https://sitereport.netcraft.com/?url site report入口输入目标网站地址 查找目标网站使用的技术,包括服务器的技术和客户端的技术 三、https://www.robtex.com/ 查找关于目标网站的DNS信…

第一篇——胡咧咧之动漫素材如何最有效最快的查找下载,动漫网站有哪些?

第一篇——胡咧咧之动漫素材如何最有效最快的查找下载,动漫网站有哪些? 大家好,我是祥小和,喜欢我的可以点赞收藏,让我去吃灰了,鼓掌。。。 我之所以写博客,是因为我记性不太好,难…

【笔记1】chrome网站技术分析插件:Wappalyzer

1、下载: 插件下载地址:https://chrome.zzzmh.cn/info?tokengppongmhjkpfnbhagpmjfkannfbllamg 2、安装: chorme中打开:chrome://extensions/ 可以把下载的.crx文件拖到浏览器中安装 也可以手动导入插件 3、使用: 在…

Python学习笔记 - 使用django的内置功能开发网站(详细)

Python学习笔记 - 使用django的内置功能开发网站(详细) Part 1 | 基本操作 安装django模块 django是第三方模块,因此需要下载。这里介绍2种下载方式。 使用PyCharm下载django 打开PyCharm,在菜单栏中找到: File > Setting…

Python学习笔记 - 使用django模块开发网站(较详细)

注:我上次的django开发教程:点击这里 Python学习笔记 - 使用django模块开发网站(较详细) 下载 & 安装django django是Python的第三方模块,需要下载安装。使用pip安装django非常简易1。 pip install django新建项目 cmd窗口输入命令:…

中医自学平台---前端网站

使用开源的框架vue-admin-template(https://github.com/PanJiaChen/vue-admin-template)。 这个需要提前安装node。 可以用nvm来管理和安装node。 然后设nvm的镜像源: nvm node_mirror https://npm.taobao.org/mirrors/node/ nvm npm_mir…

Web开发人员应当收藏的10个网站

Web开发人员应当收藏的10个网站 互联网上有数百万的网站可以提供服务,其中只有一些对Web开发员来说是极为有效的工具。在本文中,Jean-Baptiste Jung整理出了10个极有用的网站,绝对值得Web开发者收藏到书签中。 1. Mysql Format Date 通过MySQ…

实战--Scrapy框架爬去网站信息

Scrapy的框架图 一、使用Strapy抓取网站一共需要四个步骤: (1)创建一个Scrapy项目; (2)定义Item容器; Item是保存爬取到的数据的容器,其使用方法和python字典类似,并且提供了额外保护机制来i避免拼写错误导致的未定义…

最新手写图片爬虫(针对千库网和一个福利网站)

前言:由于前一段时期需要从网站上扒一些图片下来,因为css,js都好扒,就是图片数量众多,需要代码实现,在网上找了一堆以实现的代码,要么没有用,要么功能不是自己想要的,干脆…

.Net修改网站项目调试时的虚拟目录

有些项目需要在IIS发布的时候,将网站发布到虚拟目录,为了保持调试和发布的路径同一,一般会修改VS调试的虚拟目录 一、Web应用程序 Web应用程序的修改方式非常简单,在解决方案资源管理器->项目>右键>属性>Web>服务…

在云服务器上建立网站

1.修改ECS实例的安全组规则,开放Web服务端口 新购买的ECS实例默认已开启远程管理端口(22、3389),若希望在云服务器上建立网站,还需要开启80端口。 点击右侧“更多—更改安全组” 点击“新建安全组” 默认状态是没有…

阿里云服务器或者其他网站绑定域名方法

阿里云服务器或者其他网站绑定域名方法 |浏览:6896|更新:2014-04-18 17:25|标签:域名 1 2 3 4 分步阅读 阿里云服务器或者其他服务器绑定域名方法。添加高级网站标志,使域名解析。 工具/原料 服务区 已解析域名或者站点 方法/步骤…

阿里云服务器或者其他网站绑定域名方法

阿里云服务器或者其他网站绑定域名方法 |浏览:6896|更新:2014-04-18 17:25|标签:域名 1 2 3 4 分步阅读 阿里云服务器或者其他服务器绑定域名方法。添加高级网站标志,使域名解析。 工具/原料 服务区 已解析域名或者站点 方法/步骤…

高性能网站使用的14条技术

Translated by mask 从2004年开始,我开始进入雅虎的异常表现小组。我们是一个很小的队伍,专门针对雅虎的产品进行质量检测和改进,我作为一个后端工程师,现在却开始捣鼓前端代码优化方面的工程,所以我认为这是一个极好…

成就大型高性能网站的十项规则

在我们公司ChinaNetCloud,见过多种不同类型的网站和系统,有好也有差。其中有些系统拥有良好的服务器/网络架构,并且进行了合理的调整和监控;然而一般的系统都会有安全和性能上的问题,不能良好运行,也无法变得更流行。 …

怎么让网站快速生成手机App?

初雪云 如果你一个手机站,想给网站加个壳,封装成一个APP。打开显示的还是网站,就是多了启动页面,可以的话能在加上加载页面,标签导航栏,可以实现吗?我的回答是肯定的,现在APP的开发成…

电商分析:网站运营不得不做的用户分析

当电子商务网站成功地把一个访客转化成一个客户之后,如何提高这个客户对于网站的忠诚度,继而增加客户对于网站的整体贡献值就变得非常重要了, 因为带来一个新客户的成本是维护好一个老客户的3 ~5 倍 。只有有效地提高每个客户的消…

anaconda git/镜像网站下载压缩包后本地安装

**情景:有时候会从git或者非官方下载第三方库,无法从pip里查找 ** 1、从镜像网站(https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/win-64/)或者其他情况下载下压缩包,不要解压(格式为zip/.tar.g…

爬山虎采集实战-站长之家网站排行榜

目标采集网址:中文网站总排名_网站排行榜 类型:标准列表页详情页翻页 数据量:1895页 x 30/页 56850条数据 采集工具:爬山虎采集器 爬山虎采集器 - 简单易用的网页数据采集工具_免费网页爬虫软件 首先我们建立一个任务&#xff0…