Question

如何检查从PhoneGap应用发送的postMessage的来源？

我在PhoneGap中设置了一个iframe：

<iframe id="receiver" src="http://example.com/receiver.html" width="90" height="90"></iframe>

在PhoneGap javascript中，发送消息：

var receiver = document.getElementById('receiver').contentWindow;
receiver.postMessage('from phonegap app', 'http://example.com');

在receiver.html中，有一些javascript接收消息：

function receiveMessage(e) { alert(e.data) }
window.addEventListener('message', receiveMessage);

为了安全起见，我应该在function receiveMessage检查来源：

function receiveMessage(e) { 
    if (e.origin !== "something here")
        return;
    else
        alert(e.data);

但由于该消息来自PhoneGap应用，因此来源始终只是file://。检查file://是否可以接受安全性？或者我应该使用其他一些价值吗？

如果重要，我在app的config.xml中有<access origin="http://example.com" />。

Answer 1

在这种情况下我做的是将数据（从Cordova应用程序发送到iframe）作为对象，并在此对象内设置密码。我的实施将是：

发送消息：

function sendMessage() {
var receiver = document.getElementById('receiver').contentWindow;
var data={
pw: ‘mypassword’,
value1: ‘first value’,
value2:1234
};
receiver.postMessage(data, 'http://example.com');
};

在iframe中接收消息：

function receiveMessage(e) { 
   if (e.data.pw !== ‘mypassword’){
        alert(wrong password)    //(or return)
}
    else{
alert(e.data.value1+e.data.value2)
}
};

Answer 2

从PhoneGap（或Cordova）你可以使用InAppBrowser加载外部内容，它支持注入CSS和JavaScript（带结果回调），但只能从应用程序向加载/外部站点注入，这正是你需要什么。

var browser = window.open('https://example.net', '_blank', 'location=no,toolbar=no,zoom=no,hidden=yes');

browser.addEventListener('loadstop', function(){
    browser.executeScript({
        code: "localStorage.getItem('key_from_external_site_localStorage')", // or file: 'appLocalInjectScript.js',
        function( values ) {
            var value = values[ 0 ];

            navigator.notification.alert('Value received: ' + value, null, 'Success');
        }
    })
})

```

phonegap - postMessage - 原始安全性

2 个答案: