webviewdartgoogle-chrome-appgoogle-chrome-webview

How to postMessage to webview in Dart google chrome app (securityError)


I'm building a Google Chrome App with webview using Dart programming language. The app is communicating with webview content via postMessage. If I run the app from DartEditor (run as Chrome app) postMessage works ok. But after build (dart2js) and loading into browser with "Load unpackaged extention..." - application can't get webview contentWindow and execute postMessage on it.

Error from chrome dev console: Uncaught SecurityError: Blocked a frame with origin "chrome-extension://bpddihniogcgmnlaghkacfagkecgnljo" from accessing a frame with origin "swappedout://". The frame requesting access has a protocol of "chrome-extension", the frame being accessed has a protocol of "swappedout". Protocols must match.

Google Chrome Version 36.0.1951.5 dev Dart version SDK 1.4.2, version 1.5.0-dev.4.2 - gives same error.

This is minimal working example to demonstrate the problem - https://github.com/Dumbris/dart_chrome_app_webview_security_error


Solution

  • It became known, this is a bug of current version of dart2js compiler, see bug report here

    I built a simple workaround chromeapp_webview_wrapper.js If contextWindow.postMessage called from JS wrapper - it works ok. Usage example:

    js.JsObject _webview = new js.JsObject.fromBrowserObject(querySelector('webview'));
    js.JsObject _webview_wrapper = new js.JsObject(js.context['WebviewWrapper'], [_webview]);
    _webview_wrapper.callMethod('postMessage', ['initial message', '*']);
    

    Nevertheless, I am waiting for bug fix from Dart developers team. Because, a communication with WebView content is significant function in Chrome Packaged App.