关于iframe跨域使用postMessage的实现


Posted in HTML / CSS onOctober 29, 2019

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

postMessage是什么

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

postMessage使用

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

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

// 父页面index.html

//获取iframe元素

iFrame = document.getElementById('iframe')

//iframe加载完毕后再发送消息,否则子页面接收不到message

iFrame.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.origin

if(origin == 'https://A.com'){

console.log( '这里是接收到来自父页面的消息,消息内容在event.data属性中', event )

}

}, false)

二、伪造数据接收方

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

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

// 父页面index.html

//获取iframe元素

iFrame = document.getElementById('iframe')

//iframe加载完毕后再发送消息,否则子页面接收不到message

iFrame.onload = function(){

//iframe加载完立即发送一条消息

iFrame.contentWindow.postMessage('MessageFromIndexPage','https://B.com');

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 #HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 #HTML / CSS
HTML table 表格边框的实现思路
Oct 12 #HTML / CSS
Html5自定义字体解决方法
Oct 09 #HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 #HTML / CSS
You might like
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python实现扫描ip地址的小程序
2019/04/16 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
期末自我鉴定
2014/01/23 职场文书
股东合作协议书
2014/04/14 职场文书
实习报告评语
2014/04/26 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
培训后的感想
2015/08/07 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫