HTML5跨域消息发送安全性分析

HTML5是下一代的Web应用，它具有许多新的特性，是一种新兴的技术并且在移动应用中也有着广泛的使用。但也正是因为它的一些新特性的出现以及广泛的应用，使得其安全性非常值得关注。

在本文中，我们将针对HTML5 Web消息发送（跨域消息发送）的安全性进行分析和研究。

跨域消息发送

在讨论这一问题之前，我们先来了解下在HTML5中是如何实现跨域的消息发送。

在HTML5之前，由于同源策略的限制导致在两个窗口之间进行消息传送必须是使用相同的协议、端口和主机。

HTML5有一种新的方法叫做postMessage()，通过这一方法，跨域的消息传送将不再受到同源策略的限制。

以下是postMessage()的语法：

发送窗口：

Otherwindows：涉及到的其他窗口 Message：被发送到接收窗口的信息 targetOrigin：接收窗口必须规定的URL。如果没有任何特殊偏好，可以将其规定为“*”定义“*”为targetOrigin，但这样做其实会存在一些安全隐患，在后文中我会提到。 Transfer：这个是任意的。

接收窗口：

当otherWindow.postMessage()执行时，消息将会被发送到接收窗口。

发送方使用以下这段代码后，我们就可以接收到这条消息。

通过该段代码，我们可以访问数据以及这一信息的源。如下所示：

Event.origin：提供信息的源（我们所接收到的信息的URL） Event.data：提供实际所发送出的信息内容

安全性实例分析

出于演示需要，我设立了如下两个Lab：

A: http://localhost:8383/ B: http://localhost/

正如你所看到的，上面两个URL具有不同的端口，第一个运行在8383端口，第二个则是在80端口。正是因为其源不同，所以才导致端口不同。

A是发送窗口，B是接收窗口

现在我们加载第二个URL（http://localhost/ ;）作为第一个URL的iframe：