如何让iframe可以跨域访问(以下哪些是iframe跨域的方法)
利用iframe引入需要认证的跨域页面
1、需求描述
一个页面中包含两部分内容,一块内容是本系统中的页面,要展示一些本系统中后端接口返回的数据的内容,一块完全是另一个项目的页面,但这个页面是需要认证信息才能打开的,因此会涉及到跨域信息传递的问题,iframe 引入的页面能拿到主站页面传递给它的认证信息,然后正常展示出来页面。
2、解决思路
实现的时候考虑使用iframe引入第三方页面的方式。
1) 传递认证信息的方式—postMessage
对于主站向iframe引入的页面传递认证信息,可以通过 postMessage 来进行,但是要能够 postMessage 传递认证信息的前提是iframe 引入的页面能够正常显示,但是事实上没有认证信息,iframe引入的页面是不能正常显示的,这貌似就陷入了一个死循环。
2)传递认证信息—cookie
另一个想到的方法就是 cookie 传递信息了,这个引入的页面和当前的主站页面有一个关系就是,引入的页面是主站的子域,那么写cookie的时候有一个规则,cookie 的 domain 写成 .aaa.com写到主站,那么 test.aaa.com 和aaa.com 页面都可以获取到cookie信息并利用起来。
上面的第二种方法是已经经过实践检验的,在打开主站的情况下,cookie 的domain设置成.xxx.com的方式,浏览器打开子域的页面,子域页面中是可以拿到这个cookie的信息的。
但是当前的问题并不是直接在浏览器中打开页面,而是在主站中以 iframe 的方式引入页面,这样也能看到吗??
3、实践
有句话是这么说的,实践是检验真理的唯一标准,经过实践检验后,第二种方法是可行的,在浏览器中保存过一个页面的cookie之后,无论是直接打开一个页面,还是别的页面通过 iframe 引入该页面,cookie都是可以被利用到的。
4、思考
所以 cookie 其实是存在浏览器中的,只要浏览器中的这个cookie 文件保存,并且cookie是有效的,那么在当前页面引入与本页面无关的页面,都是可以的,csrf 跟这个有什么关系呢?
其实觉得自己写了一堆智障的东西,以后还是要多写,多研究,才能真正知道自己有多浅薄。
跨域访问iframe问题
跨域指的应该是数据传输的跨域,一般的解决方法就是用转正页面把数据带回到本地,然后用js来取数据。
下图是常用的跨域形式:
下面是用中转页面解决跨域的步:
1.建立一个中转页面,用来接受从服务器端返回的数据,同时在这个页面中有一段js来处理数据:
script
(function(){
????var?str=window.location.search;
????var?ret=str.match(/\w+?\=.*?(?=($|\))/g);
????if(!ret){return;}
????var?param={},i=-1,len=ret.length,ar;
????for(;str=ret[++i];){
????????ar=str.split('=');
????????param[ar[0]]=ar[1];
????}
????var?json=param.json,callback=param.callback;
????if(!(jsoncallback)){return;}
????window.setTimeout(callback+'('+decodeURIComponent(json)+')',0)
})();
/script
这个中转页面就是一段js,不需要其他内容。
这段js的作用就是接受跟在链接后面的参数。
2.在当前页面中加上一个隐藏的iframe,并让上面的页面在这个隐藏的iframe中打开,这样一来,页面就被嵌套到你当前的页面中,所以如果你在当前页面中定义了函数,那么在iframe中是可以调用到的:
window.top或者window.parent
需要你根据需要选择。
这样一来远程的数据就通过了中转页面到达了你当前页面,解决了跨域的问题。
其他跨域方式简介:
1.img标签(只能发送)(一像素的透明图)统计点击数和流量分析)
2.iframe
3.script标签(约定回调,json格式)
4XMLHttpRequst对象
5服务器端代理
你先看一下,有问题可以继续追问,希望能帮到你!
js如何操作iframe的跨域问题
A域名下的页面index.htm中内嵌了一个iframe页面,iframe内引用的是B域名的sub-index.htm页面,但是为了避免出
现在index.htm页面中出现滚动条,需要明确知道sub-index.htm页面的高度和宽度,可是sub-index.htm的页面内容是不可控的,可能会根据不同用户页面大小会不一样;问题就是如何把sub-index.htm页面的高度和宽度传递给index.htm页面?
具体解决:
1、在index.htm页面中声明一个js函数process(height, width);用来实现设置页面内iframe的高度和宽度;
2、
在sub-index.htm页面中再内嵌一个隐藏的iframe,iframe的src指向A域名下的页面ex.htm?height=xx
width=yy,该页面没有任何内容,只是用来传递sub-index.htm页面加载完之后的宽度和高度这两个数据的,页面内js拿到request
中的参数之后直接调用parent.parent.process(height, width);完成对父页面宽度和高度的设置;
如图:
iframe跨域通信方案
概述
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:
首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:
对于主域相同子域不同的通信方法这里不一一列举了,这里主要讲解一下跨主域的通信问题。
postMessage方法
window.postMessage 是一个用于安全的使用跨源通信的方法。通常,不同页面上的脚本只在这种情况下被允许互相访问,当且仅当执行它们的页面所处的位置使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的主机(两个页面的 document.domain 的值相同)。 在正确使用的情况下,window.postMessage 提供了一个受控的机制来安全地绕过这一限制。
兼容性
具体用法
发送消息:destination.postMessage(message, targetOrigin);
destination: 目标窗口
message:发送的消息
targetOrigin: 定义发送消息的范围
监听接受消息:window.addEventListener(‘message’,callback,false);
已知问题
部分版本IE8/9浏览器只支持iframe通信,不支持tabs之间通信。
IE8/9不能传输对象,只能传输string。
参考资料
mozlia官方文档:
IE官方文档:
webplatform文档:
HTML5官方文档:
window.navigator(适用于ie6/7)
ie6/7有个漏洞,父窗口与所有的iframe共享window.navigator对象,可以利用这个漏洞,由于ie6/7不支持postMessage,所以可以利用这个漏洞对ie6/7做兼容跨域通信支持。
具体用法
途中A过程和B过程都是初始化监听事件,类似于onmessage事件。只不过实现方法不一样而已。
按执行顺序来描述的话,如下:
B: 父窗口向window.navigator添加一个监听函数,并打上父窗口的戳。
A: 子窗口向window.navigator添加一个监听函数,并打上子窗口的戳。
C: 父窗口执行post的时候,调用原先子窗口添加在navigator里的监听函数,并将要传输的数据作为函数参数传入。
D: 子窗口执行post的时候,调用原先父窗口添加在navigator里的监听函数,并将要传输的数据作为函数参数传入。
注意:子窗口和父窗口要找到对方的监听函数必须得事先知道对方在添加监听函数的时候打上的戳