关于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开启硬件加速的使用和坑
Aug 21 HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python进阶教程之异常处理
2014/08/30 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
keras实现多种分类网络的方式
2020/06/11 Python
python如何输出反斜杠
2020/06/18 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
海飞丝广告词
2014/03/20 职场文书
百年校庆节目主持词
2014/03/27 职场文书
商场租赁意向书
2014/07/30 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
JavaScript组合继承详解
2021/11/07 Javascript