Tandaly的gravatar头像
Tandaly 2014-06-06 17:49:00

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

在做项目的时候遇到跨域问题,经过自己的一番摸索终于找到一种解决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
不同域名 不允许


最代码官方编辑于2016-11-15 9:57:15


打赏

文件名:跨域.rar,文件大小:586.609K 下载
  • /
      • /跨域
          • /跨域/site1
            • /跨域/site1/.classpath
            • /跨域/site1/.project
              • /跨域/site1/.settings
                • /跨域/site1/.settings/.jsdtscope
                • /跨域/site1/.settings/org.eclipse.jdt.core.prefs
                • /跨域/site1/.settings/org.eclipse.wst.common.component
                • /跨域/site1/.settings/org.eclipse.wst.common.project.facet.core.xml
                • /跨域/site1/.settings/org.eclipse.wst.jsdt.ui.superType.container
                • /跨域/site1/.settings/org.eclipse.wst.jsdt.ui.superType.name
              • /跨域/site1/WebContent
                • /跨域/site1/WebContent/iframe.html
                • /跨域/site1/WebContent/index.html
最代码最近下载分享源代码列表最近下载
sisihuisi  LV1 2020年9月28日
xshxxm1  LV21 2020年9月5日
milkhq  LV1 2020年6月4日
我想变强  LV2 2020年4月20日
zk1259  LV6 2019年7月30日
wetland2009  LV1 2019年4月22日
zdm2157  LV3 2019年4月17日
嘻嘻~  LV7 2019年4月10日
林夕0908  LV2 2019年1月16日
我最洋气  LV1 2019年1月12日
最代码最近浏览分享源代码列表最近浏览
lszloz  LV8 2023年5月17日
聪明的雨果  LV2 2023年3月6日
月光skr  LV3 2023年3月2日
wiffy1988 2022年6月28日
暂无贡献等级
lcy123ww  LV5 2022年3月2日
Linux_Life 2022年2月25日
暂无贡献等级
zhuzhenbin 2021年12月27日
暂无贡献等级
gwqgwq456 2021年12月20日
暂无贡献等级
dingzeyuan 2021年11月25日
暂无贡献等级
tjf0303  LV2 2021年11月25日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友