关于iframe跨域使用postMessage的实现_html5教程技巧

来源:脚本之家  责任编辑:小易  

浏览器有同源策略的限制,跨域是无法做到的。之前我们有个项目的经理出提出过这个需求,但后来还是放弃了。因为,你可以换另一个角度来思考,如果可以让javascript跨域读取iframe内容的话,会造成很严重的安全问题。比如我可以在我的页面中套一个iframe,内嵌你的微博、京东等账号,然后用javascript读取你的用户信息、甚至是敏感的安全信息,多可怕www.zgxue.com防采集请勿采集本网。

当我们要在域名A.com下使用一个域名B.com提供的页面服务,直觉想到的实现方式就是使用iframe。但是iframe直接的交互存在**跨域问题**,目前看来解决方式有两种。一是使用nginx代理转发,在域名A的nginx上配置指定的转发规则,直接指向域名B,直接干掉了跨域;另一种方式是使用postMessage方法。此处针对第二种方式,看下使用方式和可能的问题。

省事的是iframe;jquery+ajax依然会有跨域现象 使用jsonp可跨域访问

postMessage是什么

跨域读写cookie肯定做不到的,没有权限。先明白什么是跨域,就是不同的域名页面。

此处引用MDN关于postMessage的详细说明。简而言之就是:postMessage是挂载在window下的一个方法,用于不同域名下的两个页面的信息交互,父子页面通过postMessage()发送消息,再通过监听message事件接收信息。

你这个调用的方式没问题, 问题是你的showM 在 加载 child的时候,页面内容是 对的 但是通过父业面调用一次后,child的内容就变成 'child'了,showm()之类的就都被冲掉了, 所以再次执行就会报错

postMessage使用

先说下跨域的几种方法: jsonp,需要服务器返回jsonp格式 服务器代理法,将请求发送本域服务器,由服务器获取内容后返回结果 使用window.name方法,不同的标签都能读写window.name的内容 跨子域

假设有一个父页面indexPage.html, 子页面iframePage.html

如果是在一个父页面中的一个IFRAME去操纵另外一个IFRAME可以在IFRAME的页面中试一下window.parent.document.getElementById[‘iframeID’]去试试改变两外一个IFRAME的高度

一、父页面向子页面发送消息

// 父页面index.html//获取iframe元素iFrame = document.getElementById('iframe')//iframe加载完毕后再发送消息,否则子页面接收不到messageiFrame.onload = function(){//iframe加载完立即发送一条消息iFrame.contentWindow.postMessage({msg: 'MessageFromIndexPage'},'\*');}

iFrame.contentWindow.postMessage('MessageFromIndexPage','b.com')

方法的第一个参数是发送的消息,无格式要求;第二个参数是域名限制,当不限制域名时填写* ,第三个可选参数transfer一般不填,这个参数有严重的浏览器兼容问题。

二、子页面接收父页面发送的消息

// 子页面iframePage.html//监听message事件window.addEventListener("message", function(event){console.log( '这里是接收到来自父页面的消息,消息内容在event.data属性中', event )}, false)

三、子页面给父页面传递消息

window.parent.postMessage({name: '张三'}, '\*');

方法的第一个参数是发送的消息,目前可无格式要求, 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前, 参数 message 必须是一个字符串;第二个参数是域名限制,当不限制域名时填写’*‘

四、父页面接收子页面的消息

//监听message事件window.addEventListener("message", function receiveMessageFromIframePage (event) {console.log('这里是子页面发送来的消息,消息内容在event.data属性中', event)}, false);

postMessage的安全问题

使用postMessage交互,默认就是允许跨域行为,一旦允许跨域,就会有一些安全问题,针对postMessage主要有两种攻击方式。一是伪造数据发送方(父页面),易造成数据接收方(子页面)受到XSS攻击或其他安全问题;二是伪造数据接收方,类似jsonp劫持。

一、伪造数据发送方

攻击方式:伪造一个父页面,引导使用者触发功能,发送消息给子页面,如果子页面将父页面发送的消息直接插入当前文档流,就是引发XSS攻击,或者子页面使用父页面传递的消息进行其他操作,例如写入数据,造成安全问题。

防范方式:子页面iframe对接收到的message信息做域名限制

// 子页面iframePage.html//监听message事件window.addEventListener("message", function(event){origin = event.origin || event.originalEvent.originif(origin == 'https://A.com'){console.log( '这里是接收到来自父页面的消息,消息内容在event.data属性中', event )}}, false)

二、伪造数据接收方

攻击方式:伪造一个子页面,在父页面中引入子页面,在伪造的页面中接收父页面发送的消息,此时可以获取用户的敏感消息。

防范方式:父页面对发送消息的页面做域名限制

// 父页面index.html//获取iframe元素iFrame = document.getElementById('iframe')//iframe加载完毕后再发送消息,否则子页面接收不到messageiFrame.onload = function(){//iframe加载完立即发送一条消息iFrame.contentWindow.postMessage('MessageFromIndexPage','https://B.com');}

假如在网站A下通过iframe或ajax调用B下的内容时,默认情况下IE会阻止B写任何CookieB里的被调用的页面需要写P3P头,从而解除IE对写Cookie的阻止context.Response.AddHeader("P3P内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5 window/iframe跨域传递消息 api介绍
  • iframe 高度自适应(兼容ie/firefox、同域/跨域)
  • 如何使用iframe实现跨域写入cookie 并且兼容大部分浏览器
  • 如何用javascript 跨域获取iframe子页面的元素信息
  • 如何使用iframe实现跨域写入cookie 并且兼容大部分浏览器
  • 如何用javascript 跨域获取iframe子页面的元素信息
  • jquery+ajax 和iframe 跨域嵌套 的哪个更好
  • 如何使用iframe实现跨域写入cookie 并且兼容大部分浏览器
  • js iframe 跨域调用怎么不行。
  • 怎么跨域获取网页内容,不想使用iframe,也不能让远程服务器配合,也就是使用不了jsonp,该怎么办
  • iframe跨域动态改变高度,谁会啊,各位大神,赶快来帮帮我这菜鸟吧!
  • IFRAME 的JS跨域问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5postmessage跨域iframehtml5 window/iframe跨域传递消息 api介绍iframe 高度自适应(兼容ie/firefox、同域/跨域)html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved