跨域传输信息postMessage
widnow.postMessage()方法允许安全的跨域传输。
Syntax
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
- 指向另一个窗口的引用:。
message
- 传输给另一个窗口的信息
targetOrigin
- 一个字符串,指定消息来源(URL形式)。记住总是提供一个特定的URL地址如果你知道的话,不要总是使用“*”(针对所有的URL),因为指定一个特定的URL可以防止恶意的网站来攻击。
The dispatched event
其他的窗口可以通过以下代码来监听被发送的信息:
window.addEventListener("message", receiveMessage, false); function receiveMessage(event)
{
var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
if (origin !== "http://example.org:8080")
return; // ...
}
被发送的信息的属性如下:
data
- 从其他窗口传递的data
origin
- 当postMessage调用的时候,发送信息窗口的origin。这个字符串是协议和"://"和主机名和后面用":"连接了一个接口名称,如果这个接口名和默认的接口名不一样的话。比如http://example.org(默认的接口是443),http://example.net(默认的接口是80)和http://example.com:8080。注意,这个origin并不一定要是当前亦或未来的那个窗口的origin,所以这将有可能当调用postMessage的时候,导致跳转到另一个完全不同的地址。
source
- 发送信息的window对象。你可以使用这个在不同origin之间在两个窗口之间建立两个通信。
Security concerns
如果你不想接受到其他网站的信息,不要在message对象上增加任何监听。
使用origin(有可能也会使用source)属性来确定发送者的身份,如果你不想接受到其他网站的信息的话。
任何的window(包括,例如http://evil.example.com)可以向任何的其他window发送信息,你没有任何的保障来保证未知的发送者不会发送恶意的信息。确保了发送信息者的身份之后,你还需要确验证接收到的内容的语法。否则,发送信任信息的受信网站可能在你的网站上创建一个跨域的脚本漏洞。
不要使用“*”,而是确定的目标origin,当你使用postMessage来发送信息给其他的windows的时候,防止其他网站在你postMessage的时候拦截发送的信息。
Example
/*
* In window A's scripts, with A being on <http://example.com:8080>:
*/ var popup = window.open(...popup details...); // When the popup has fully loaded, if not blocked by a popup blocker: // This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'bob' and the password is 'secret'",
"https://secure.example.net"); // This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
popup.postMessage("hello there!", "http://example.org"); function receiveMessage(event)
{
// Do we trust the sender of this message? (might be
// different from what we originally opened, for example).
if (event.origin !== "http://example.org")
return; // event.source is popup
// event.data is "hi there yourself! the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);
/*
* In the popup's scripts, running on <http://example.org>:
*/ // Called sometime after postMessage is called
function receiveMessage(event)
{
// Do we trust the sender of this message?
if (event.origin !== "http://example.com:8080")
return; // event.source is window.opener
// event.data is "hello there!" // Assuming you've verified the origin of the received message (which
// you must do in any case), a convenient idiom for replying to a
// message is to call postMessage on event.source and provide
// event.origin as the targetOrigin.
event.source.postMessage("hi there yourself! the secret response " +
"is: rheeeeet!",
event.origin);
} window.addEventListener("message", receiveMessage, false);
Notes
任何window可以在任何其他的window上使用这个方法,在任何的时候,不管当前页面在window中的location,来发送信息。
所以,任何的对象监听被使用来接受信息时必须先检查信息发送着的身份,使用origin和可能使用的属性source来判断。
这个必须再三声明:不检查origin和source可能会导致跨站点脚本攻击。
和任何的异步执行的脚本(timeout,用户生成的脚本),调用postMessage来监听何时事件处理函数监听postMessage发送的事件对象是不可能的,将会抛出错误。
发送对象的origin属性是不会受到当前在调用窗口的document.domain值的影响。
For IDN host names only, the value of the origin
property is not consistently Unicode or punycode; for greatest compatibility check for both the IDN and punycode values when using this property if you expect messages from IDN sites. This value will eventually be consistently IDN, but for now you should handle both IDN and punycode forms.
The value of the origin
property when the sending window contains a javascript:
or data:
URL is the origin of the script that loaded the URL.
Using window.postMessage in extensions
window.postMessage
is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the source
property of the dispatched event is always null
as a security restriction. (The other properties have their expected values.) The targetOrigin
argument for a message sent to a window located at a chrome:
URL is currently misinterpreted such that the only value which will result in a message being sent is "*"
. Since this value is unsafe when the target window can be navigated elsewhere by a malicious site, it is recommended thatpostMessage
not be used to communicate with chrome:
pages for now; use a different method (such as a query string when the window is opened) to communicate with chrome windows. Lastly, posting a message to a page at a file:
URL currently requires that the targetOrigin
argument be "*"
. file://
cannot be used as a security restriction; this restriction may be modified in the future.
Browser compatibility
[1] Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the message
parameter must be a string. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), themessage
parameter is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.
[2] Gecko 8.0 introduced support for sending File
and FileList
objects between windows. This is only allowed if the recipient's principal is contained within the sender's principal for security reasons.
[3] IE8 and IE9 only support it for <frame>
and <iframe>
.
[4] IE10 has important limitations: see this article for details.
跨域传输信息postMessage的更多相关文章
- JavaScript 跨域:window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- 详解JS跨域问题
什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- 【前端】【转】JS跨域问题总结
详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...
- js跨域问题解决方案
跨域:当协议.域名.端口号任何一个不相同时,叫称为跨域. HTML5 CORS(cross-origin-resource-sharing)跨域资源共享: 原理:当需要访问跨域的资源时,可以通 ...
- 详解js跨域
什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 对于端口和协议的不同,只能通过后台来解决.URL 说明 是否允许通信 http://www.a.com/a.js http ...
- JS中的跨域问题
一.什么是跨域? 1.定义:跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.但是一般情况下不能这么做,它是由浏览器的 ...
- js跨域解决方式
什么是跨域? 概念:仅仅要协议.域名.port有不论什么一个不同,都被当作是不同的域.(所谓同源是指,域名.协议,port同样.),对于port和协议的不同,仅仅能通过后台来解决. URL 说明 是否 ...
- 在javascript中的跨域解决
跨域产生的原因 跨域是由浏览器的同源策略引起的,即不同源(协议,域名,端口中其中有一个不同)的js是不能读取对方的资源的.当要网站中的js要请求其他网站的数据时就会产生跨域问题,就像下面这样,浏览器会 ...
- 一个iOS程序员眼中的跨域问题
摘要: 跨域问题是web开发领域一个常见的问题,相信每个web开发者都遇到"跨域"的问题 最近公司的iOS开发任务比较少,所以自己最近开始了Web开发的任务,在用H5做了很多页面, ...
随机推荐
- Java中没有C#的out关键字,但可以通过数组实现类似的效果
其实传递的就是数组的指针,里面的每一项的值还是那块内存,所以能直接操作里面的值.如果单纯传指定的值,那么里面操作的就是新的一块内存块. 用数组实现的效果如下: class B{ String cnt= ...
- Windows Server 2003中报PerfDisk “无法从系统读取磁盘性能信息。
Windows Server 2003中报PerfDisk “无法从系统读取磁盘性能信息.”的问题解决 2015-01-22 09:49:02 标签:Windows Server2003 PerfDi ...
- 开始我的GL离屏渲染绑定[转]
地址: http://wiki.woodpecker.org.cn/moin/lilin/swig-glBmpContext 呵呵,有了第一次的经验,我们就要开始我们的GL离屏渲染的绑定了. 关 于O ...
- 基于GPU加速的三维空间分析【转】
基于GPU加速的三维空间分析 标签:supermap地理信息系统gisit 文:李凯 随着三维GIS 的快速发展和应用普及,三维空间分析技术以其应用中的实用性成为当前GIS技术研究的热点领域.面对日益 ...
- construct-binary-tree-from-preorder-and-inorder-traversal——前序和中序求二叉树
Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume tha ...
- python(26)- 面向对象补充Ⅱ
一 isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)判断obj是否是类 cls 的对象 class Foo(object): ...
- sass的使用(载)
一.什么是SASSSASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般使 ...
- Node.js Express 框架 Express
Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
- Amazon SNS移动推送更新——新增百度云推送和Windows平台支持
Amazon SNS(Simple Notification Service)是一种基于云平台的消息通知和推送服务. SNS提供简单的 Web 服务接口和基于浏览器的管理控制台让用户可以简易设置.执行 ...
- (全然背包)小P寻宝记——好基友一起走
题目描写叙述 话说.上次小P到伊利哇呀国旅行得到了一批宝藏.他是相当开心啊.回来就告诉了他的好基友小鑫.于是他们又结伴去伊利哇呀国寻宝. 这次小P的寻宝之路可没有那么的轻松,他们走到了一个森林,小鑫一 ...