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

通过使用postMessage()的方法，我可以轻松的将消息从第一个URL发送到第二个URL.

我们可以通过点击”send message“的按钮来进行验证。

尽管加载在第一个URL中的iframe与其并不同源，但通过postMessage() 即可进行信息传递。

现在我们来看一些postMessage()使用过程中可导致应用出现漏洞的例子：

case1.

发送方代码：

当发送者把targetOrigin规定为通配符”*“时，将会导致未知的信息被陌生的接收方（窗口）接收到。原因是从接收窗口传来的消息任何人都可以再加载一个iframe来进行监听。因此在进行敏感数据的传输时，使用通配符是一个十分错误的决定。

针对此问题最好的解决方法就是在发送时添加具体的目标字段，如下所示：

Case2.

接收窗口代码：

在上面这段代码中可以看到，我们是直接接收发送方的消息对其进行处理，并不检验是否来自发送方。

但检查消息的来源无疑是十分重要的，这样可以防止消息来自未经授权的发送者。

因此，我们只需要在代码中加入对发送方的验证，这一问题就可解决了。代码如下：

通过检验event.origin，来进行验证。

Case3.

在这一过程中，发送方和接收方都应该验证正在传送的.消息。如果数据插入到HTML DOM中时并没有进行验证，那么应用很有可能遭受到基于DOM的跨站脚本攻击。

由下面这段代码可以看出，当应用程序接收到攻击者发来的恶意信息，并已经插入到HTML DOM使用innerHTML属性时，其显得异常脆弱。

发送方： 

接收方： 

执行上面这段代码，可导致在接收窗口出现XSS。

解决这一问题最简单的方法就是在给元素分配数据值时使用 textContent 而不是innerHTML.