iframe如何解决跨域问题(关于iframe跨域使用postMessage的实现)
iframe如何解决跨域问题
关于iframe跨域使用postMessage的实现当我们要在域名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'); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- iframe跨域原理(详解使用postMessage解决iframe跨域通信问题)
- html5 postMessage(html5关于外链嵌入页面通信问题postMessage解决跨域通信)
- iframe嵌入页面跨域(使用iframe+postMessage实现页面跨域通信的示例代码)
- iframe向子页面发送消息(使用postMessage让 iframe自适应高度的方法示例)
- iframe如何解决跨域问题(关于iframe跨域使用postMessage的实现)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
- 吐槽完《弧光大作战》之后,我们和设计师聊了聊魔兽首款手游的立项初衷和未来(吐槽完弧光大作战之后)
- 魔兽争霸3自定义战役少年杰雷 2(魔兽争霸3自定义战役少年杰雷)
- 今日菜价 芥兰涨幅最高 1.33 ,花菜降幅最高 3.10(今日菜价芥兰涨幅最高)
热门推荐
- sqlserver2016的安装(Sql Server2016 正式版安装程序图解教程)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- mysql的默认数据库例子在哪里(修改MySQL8.0 默认的数据目录快捷操作无配置)
- SQL中哪些情况会引起全表扫描
- 详解如何获取localStorage最大存储大小的方法(详解如何获取localStorage最大存储大小的方法)
- 利用python合并pdf(Python合并同一个文件夹下所有PDF文件的方法)
- laravel 用户登录认证(Laravel5.5 实现后台管理登录的方法自定义用户表登录)
- 如何用微信公众号发送信息(微信公众号之主动给用户发送消息功能)
- apache协议内容(Apache中rewrite伪静态规则介绍)
- 国内云主机哪家靠谱(云主机哪家比较便宜)