14

My Cordova mobile app uses an iframe to load in a website. I want to send and receive contents over the iframe with postMessage(). However, through my testing my mobile app origin is always localhost:8000 or file://. Every other example on this site uses a unique domain and origin (e.g. www.example.com), but my origin is obviously not unique.

How can I secure communication between my mobile app and my website if my origin is localhost:8000 / file://? If for whatever reason I'm not able to, can I use access tokens to validate any communication like shown below?

mobile.app

var iframe = document.getElementById('iframe');
var data = {
  'access_token': 'whatever'
};
iframe.contentWindow.postMessage(data, 'localhost:8000');

website.com

window.addEventListener('message', function(event) {
  if (!event.data || !event.data.access_token) {return;}
  // ajax request to validate the token here
});

If it helps, the things I'm doing are:

  • Detect when the iframe has finished loading. iframe sends back an object. {'loaded':true}
  • Send an object with a boolean from the iframe when the user logs out. {'logout':true}
  • Send an object with a boolean and an html string from the iframe when the user presses a print button. {'print':true, 'html':htmlString}
  • Send encrypted payload to the iframe, then waiting for the iframe to return an object. {'success':true}
JM-AGMS
  • 1,670
  • 1
  • 15
  • 33
  • Wondering why dont you use an InAppBrowser to load website inside the app. – Gandhi Oct 21 '18 at 06:58
  • Because my mobile app uses its own navigation header. – JM-AGMS Oct 21 '18 at 07:38
  • I guess customised inappbrowser should help you out. – Gandhi Oct 21 '18 at 07:46
  • I looked into it. Short of editing the plugin itself (beyond my expertise and scope), there are no options for that. – JM-AGMS Oct 21 '18 at 07:49
  • Then you got to take care of the stuffs as mentioned in this link - https://gist.github.com/jedp/3005816 – Gandhi Oct 21 '18 at 14:00
  • the official cordova link - https://cordova.apache.org/docs/en/latest/guide/appdev/security/#iframes-and-the-callback-id-mechanism itself suggests to avoid the usage of iframe. – Gandhi Oct 28 '18 at 16:53

1 Answers1

0

While sending data using postMessage, you can encrypt communication by specifying https://... in the origin url.

Using this kind of procedure is a gate to cross site scripting, you should verify caller and callee on web app and mobile side. More specs about postMessage available here (and useful consideration regarding threats): https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage

For authentication, you'll have to put authentication in the data transmitted as you did (with something provided by hand by the user of the phone, otherwise it is not authenticating anything).

To read data, from cordova, you should use an AJAX request targeting a service on the web server.

C.Vergnaud
  • 857
  • 6
  • 15
  • 1
    This does not answer the question. I cannot set the origin url if it does not match the origin of the mobile app which is always `localhost:8000` or `file://`, that means I cannot put anything starting with `https://` because it won't work. – JM-AGMS Oct 24 '18 at 16:01
  • I miss something in your data flow... the iframe is the result of an html stream coming from the web server so it should be named, unless cordova hide it under this generic "localhost:8080". In this case, try to target directly the web server service from main javascript when the iframe onload event is triggered. – C.Vergnaud Oct 24 '18 at 16:30