XDM-跨文档消息传送
XDM
cross-document messaging 类似于XSS的简称,故称为 XDM 而不是 CDM
某些时候 XDM 也能作为跨域的实现手段之一
与Jsonp 和 传统的 CORS 跨域方式不同
XDM通常用于不同域的页面之间传递消息
postMessage
postMessage() 方法作为 XDM 的核心被添加进了 HTML5 规范中
该方法的作用是:向当前页面的iframe或者弹出的窗口传递消息
该方法用于接收以下两个参数:
- 消息的内容
- 接收消息的域
通过第二个参数可以防止浏览器将信息发送到不安全的地方
使用方法如下:
// 支持XDM的浏览器也支持 iframe 的 contentWindow属性
let iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("这里是消息","http://www.example.com");
上方的postMessage的第二个参数则用于指定接收消息的文档的源域
如果匹配,则将消息传入内嵌框架中,否则什么也不做
当然该参数也可以设置为"*" 表示所有域都可以接受消息
发送消息介绍完了,自然就需要接收传递的信息
当文档接收到 XDM消息时就会触发 window 对象的 message 事件
该事件是以异步形式触发的所以可能存在时延, 触发该事件后,该事件的事件对象(event)会包含以下信息:
- data: postMessage传入的第一个参数字符串数据
- origin: 发送消息文档的所在的域
- source: 发送消息文档的window对象的代理,用于在发送上一条消息的窗口中调用postMessage方法(即发送回执消息)
就像发送时指定消息接收的域一样,收到消息后验证消息的来源域也同样重要,以此保证消息来自已知的域
基本的验证如下:
window.onmessage = function(event){
// 确保消息来源于已知域
if(event.origin == "http://www.example.com"){
// 处理接收的数据
processMessage(evnet.data); // 可选,向来源窗口发送回执
event.source.postMessage("Received","http://example1.com");
}
}
需要注意的是:
evnet.source 大多数情况下只是 window 对象的代理对象,也就是说并不是真正的 window 对象
所以不能通过该代理对象来访问原本 window 对象上的属性和值
XDM的一个怪异之处在于:
postMessage的第一个参数最早是作为永远都是字符串来实现的,但后来允许传入任何数据结构,但是为了保险起见最好还是只传入字符串,如果希望传入json数据最好使用 JSON.stringify() 来处理
圈起来上面的是要考的,在阿里面前端的时候被问到,当时是蒙逼且绝望的emm....
最后就是这种跨域的浏览器兼容情况了,话不多说直接上图,自己感受
XDM-跨文档消息传送的更多相关文章
- HTML5 跨文档消息传输
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...
- HTML5新特性之跨文档消息传输
1.同域限制 所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议.同样域名.同样端口的地址进行通信. 2.window.postMessage方法 浏览器限制不同窗口(包括iFrame窗口 ...
- HTML(六)HTML iframe 使用postMessage方法进行跨文档消息传递
什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...
- HTML5中的跨文档消息传递
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...
- HTML5实战与剖析之跨文档消息传递(iframe传递信息)
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...
- HTML5跨文档消息传递
HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web M ...
- 跨文档消息传递----postMessage()
HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...
- 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问
在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...
- Web 通信技术 ——跨文档信息传输(JavaScript)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...
随机推荐
- jsoup 使用总结1--添加header
jsoup 使用总结1--添加header 大部分时候,我们使用jsoup解析网页的是否都是直接Jsoup.connect(url); 孰不知,我们可以添加header,例如 Host, Refere ...
- log4j2.xml全配置文件
可以参考如下配置 <?xml version="1.0" encoding="UTF-8"?> <!--日志级别以及优先级排序: OFF &g ...
- CVE-2017-12149 JBOOS AS 6.X 反序列化漏洞利用
检测目录: 返回500 一般就是存在了. 下载工具: http://scan.javasec.cn/java/JavaDeserH2HC.zip 使用方法: javac -cp .:commons-c ...
- UE4中如何使物体始终朝向摄像头?
要使物体始终正面朝向摄像头需要用到一个关键节点:Find Look at Rotation 其中Start连接需要旋转的物体位置矢量,Target连接摄像头位置矢量 最后设置SetActorRotat ...
- Python 3 利用 Dlib 19.7 实现摄像头人脸识别
0.引言 利用python开发,借助Dlib库捕获摄像头中的人脸,提取人脸特征,通过计算欧氏距离来和预存的人脸特征进行对比,达到人脸识别的目的: 可以自动从摄像头中抠取人脸图片存储到本地: 根据抠取的 ...
- 完全关闭Hyper-v的方法
众所周知Hyper-v和vmware有冲突,开启Hyper-v功能vmware就不能使用,但即使关闭了也是如此,这是因为功能没有被完全关闭,这里整理下方法,我自己在两台机子亲测有效. win+x,a, ...
- Apache 、Tomcat、Nginx的区别
一. 定义: 1. Apache Apache HTTP服务器是一个模块化的服务器,可以运行在几乎所有广泛使用的计算机平台上.其属于应用服务器.Apache支持支持模块多,性能稳定,Apache本身是 ...
- 洛谷 P1057 解题报告
P1057 传球游戏 题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹 ...
- 3d轮播图(另一种方式,可以实现的功能更为强大也更为灵活,简单一句话,比酷狗优酷的炫)
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
- Python《学习手册:第二章-习题》
什么是Python解释器? Python解释器是运行Python程序的程序. 什么是源代码? 源代码是为程序所写的语句:它包括文本文件(通常以.py为文件名结尾)的文件. 什么是字节码? 字节码是Py ...