Question

我有一个基于iframe的小部件，它使用postMessage与父级进行通信。这意味着即我从iframe发送消息以请求调整其自身的大小。数据是json，目前正在干扰父页面上其他小部件/脚本发送的消息。

所以我需要一种方法来区分自己的消息和其他消息。

现在我正在考虑简单地添加{ app: 'Poules.com', [...] }参数并在处理消息之前检查该参数。

但在此之前：是否已经签订了合同？

发送代码：

parent.postMessage( JSON.stringify(data), page.widgetOrigin );

接收结束：

poules.sdk.receiveMessage = function(event)
{
    var data = JSON.parse( event.data );

    switch ( data.message )
    {
        case 'requestResize':   poules.sdk.requestResize( data ); break;
        case 'loginSuccess':    poules.sdk.triggerLoginEvent( data ); break;
        default: throw "poules.sdk: can't parse message: " + event.data;
    };
}

Answer 1

当您收到message活动时，必须检查event.origin以确保它来自您要接收来自的来源。这通常足以将它们与其他消息区分开来。

所以：

poules.sdk.receiveMessage = function(event)
{
    if (event.origin != "http://poules.com") { // or whatever
        return;
    }

    var data = JSON.parse( event.data );

    switch ( data.message )
    {
        case 'requestResize':   poules.sdk.requestResize( data ); break;
        case 'loginSuccess':    poules.sdk.triggerLoginEvent( data ); break;
        default: throw "poules.sdk: can't parse message: " + event.data;
    };
}

这有两个原因：

它过滤掉与你正在做的事情无关的窗口的消息，
它会过滤掉试图模仿您的小部件的恶意消息，并欺骗主页执行不应该执行的操作

More about event.origin on MDN;这里是关于如何形成字符串的说明：

<强>来源

调用了在postMessage时发送消息的窗口的来源。此字符串是协议和“：//”的串联，如果存在，则为主机名，如果存在端口，则“：”后跟端口号，并且与给定协议的默认端口不同。典型来源的示例是https://example.org（暗示端口443），http://example.net（暗示端口80）和http://example.com:8080。请注意，此来源不保证是该窗口的当前或未来来源，自从调用postMessage以来，该窗口可能已导航到其他位置。

在onmessage事件处理程序中是否有标准的方法来识别自己的postMessage？

1 个答案: