关于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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
详解HTML5.2版本带来的修改
May 06 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
PHP四大安全策略
2014/03/12 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
关于js类的定义
2011/06/28 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jQuery知识点整理
2015/01/30 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
深入浅出学习python装饰器
2017/09/29 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
毕业自我鉴定
2013/11/05 职场文书
办理居住证介绍信
2014/01/15 职场文书
诚信承诺书模板
2014/05/26 职场文书
优秀家长自荐材料
2014/08/26 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS