problems with CORS (Access-Control-Allow-Origin) on browser platform (cordova run browser)

[Marc]

I'm not sure when, but this stopped working easily.  

When I debug using the browser it currently opens up a new browser, and then I need to go occasionally and add the   Allow-Control-Allow-Origin: * extension. and then things work again.  Needless to say, this is a little bothersome.  

I know there was an update to the browser platform, but the browser platform is not described in the documentation.  

For example, it is not listed in the platform guide: http://cordova.apache.org/docs/en/5.1.1/guide/platforms/index.html

[Jesse Monroy]

CORS is NOT part of the phonegap system. CORS is for webbrowers and servers. CORS is NOT part of Mobile Apps.

Jesse

[Steve Sobol - Lobos Studios]

That header should be added by the web server. You don't do anything with it on the client side.

Jesse Monroy wrote:

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Lobos Studios - Website and Mobile App Design & Development; IT Support; Computer Maintenance
Toll Free  877.919.4WEB - Apple Valley 760.684.8859 - Los Angeles 310.945.2410 - Cleveland 216.242.4010
www.LobosStudios.com * www.facebook.com/LobosStudios * @LobosStudios

[Marc]

browser is a cordova platform, similiar to ios or android.  It is great for debugging using Chrome, rather than using the debugger via the smartphone.

Take a look at this blog post from last year by Raymond Camden.

http://www.raymondcamden.com/2014/09/24/browser-as-a-platform-for-your-phonegapcordova-apps

The problem is that it has changed a lot over the last year, and what worked last year is no longer working.

m

[Marc]

I have no idea what you are referring to.

The CORS information should happen automatically by Cordova.  Perhaps I need to do something in config.xml for this platform.

m

[Jesse Monroy]

Wait, let me get you the CORS so you can read it (see bottome). CORS is not implemented on phonegap, because it has no value. If you canNOT access a website, then you might need to apply the white-list, the plugin and CSP (see #10).

If you are talking about the Cordova Browser Platform and not a mobile app, then Raymonds article (as listed above) is as close as you can get; and this Blog entry Apache Cordova CLI 4.0 Release. There is not alot of information on this that I am aware of. Maybe someone else has some.

My Notes are here
https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/browser-platform.md

From Mozilla
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.  For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

Using CORS

http://www.html5rocks.com/en/tutorials/cors/

HTTP access control (CORS)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Cross-Origin Resource Sharing

http://www.w3.org/TR/cors/

[jcesarmobile]

As Jesse and Steve told you, CORS is a server thing, you have to configure it on your server

I think your confusion is, CORS doesn't affect cordova mobile apps because they use file:// protocol, but as far as I know it affects all desktop browsers, even if it's a cordova browser project

You can disable this restriction in all the browses and/or on the server

https://blog.nraboy.com/2014/08/bypass-cors-errors-testing-apis-locally/

[Marc]

Thanks for your responses. 

Again, the Browser platform is a platform supported by Cordova, but poorly documented.

Calling

cordova run broswer

from the CLI, starts up a browsers, and automatically configures a server on http:/localhost:8000

The following is the trace from CLI on a Mac

Static file server running on port 8000 (i.e. http://localhost:8000)

CTRL + C to shut down

Static file server running @ http://localhost:8000/index.html

CTRL + C to shut down

Executing command: open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir_for_cordova http://localhost:8000/index.html

gzip

I do not configure the server, nor do I configure Chrome, I assume this is all done through the Browser platform.  Perhaps there is a way to do this via config.xml - I'm not sure.

Ray's suggestion in his blog post from a year ago, no longer seem to work, as the implementation of the browser platform has gotten before.

As I noted, if I manually add a Chrome Extension, it works fine, but since it starts up a new version of Chrome, every time I reboot my system I need to add this manually.

I assume that there is a way to do this via Cordova.

Any ideas?

[Rob Willett]

Marc,

Your problem is that the browser is sending out a request (XHR or something), that is going out from your browser with one URL. However the web server that your browser is connected to (thats the Static file server running on port 8000 (i.e. http://localhost:8000) on your Mac) is then forwarding that request on to your API server. The API server is responding with a CORS check to see if that web server is allowed to connect, however you want the browser to connect NOT the web server. So the Allow-Origin header that comes back is for the web server and not the browser. 

Your CORS server is probably working correctly, the problem is the browser and the web server you are running on your desktop. 

Its all very confusing. We have exactly the same issue at the moment and we are struggling to get it to work. The ionic team are talking about using a proxy which is poorly documented so we're working through it step by step.

It works very well as-is on real hardware, just not the browser.

Rob

[Marc]

Thanks.  

If you find out anything, please let me know.  In the meantime what works for me is to occassionally add the Allow-Control-Allow-Origin:  extension.  But it is a pain.  If I have time, I'm try to look at the Browser platform code and see if I can change the Chrome arguments which are called automatically by the Browser platform.

[Steve Sobol - Lobos Studios]

No, it shouldn't.

The CORS header is sent *by a web server*, not by the HTTP client.

[Rob Willett]

Steve

Not sure who this is meant for.

I agree the cors header or rather the family of headers that make up the cors interaction and the requests come from the server.

The web browser makes a query request to the server, gets the CORS response and then if allowed will make a request. That's the problem the browser has, the request isn't coming from the browser but from the web server attached to the browser. 

We still haven't worked it out :(

[Jesse Monroy]

Steve & Rob,

The OP does not want to read the Specification, I have. It is a simple protocoal,

• the client sends a request for CORS to the server
• the server responds with what is okay
• the client obliges on the webpage, and all innerpages including iframes (but not the assets)

I've attached an image from HTML5rocks. There is the shortest and best of the answer that show up on the first google search. 

IN SHORT, if the client does NOT send a request, nothing happens. It is up to the client (webbrowser) to enforce the protocol. It is a colaborative effort that starts with the client (browser).

[Jesse Monroy]

Okay. We may have to back track on this.

In a separate thread, Rob and others and I are discussing the white-list.

In that thread last night (about 10 hours now), I pointed to the complexity in this white-list.
Rob just a bit ago point to problems he is have and the solution is to SYNC with CORS!?!

UGLY.

[Rob Willett]

All,

The issue here is subtle and is to do with the interaction of using the browser (through cordova run browser or similar) with Cordova and CORS. All of us are correct to a point, its is due to the browser, it is due to CORS and it is due to the network-whitelist plugin which has different behaviour to the legacy network whitelist plugin. Ain't life fun.

I'm not going to claim I have all the details worked out as its kind of complex, but I *think* the issue is this.

Jesse's diagram, which I hadn't seen, but fits in with my internal model, which is a relief, demonstrates this. The problem is that when you run the browser under cordova run browser or similar, an extra local web server gets put into the interactions. It's is no longer JavaScript Code -> Browser -> Server. It is Javascript Code -> Browser -> Local Web Server  -> Server. This is the local web server that starts up to run cordova.

Here's an updated (top part) version of the diagram

​As the web server has changed things around, specifically the calling IP address, CORS validates that and says OK but as it gets passed on up the chain to the originating browser, the browser then says to go no further as something is wrong. 

This is my understanding of what is wrong and the error messages from Chrome seem to back this up. Here's an error message I get in Chrome. This is to a local micro service I'm running on my local machine on port 3000. 

-------- Error Message ------

XMLHttpRequest cannot load http://localhost:3000/user. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

-------- Error Message ------

We can see the web server at localhost:8000 being referenced. 

I think that the legacy white list plugin has different behaviour, but I wasn't prepared to go back and investigate further. 

I think this is why code works on the device but doesn't on the browser when run from cordova run browser. There's an intermediate local web server put in place. Another explanation which is a bit high level but backs me up is here http://ionicframework.com/docs/cli/test.html

Does this make sense now?

The solution is to put a proxy server in the middle and work through that as per the Ionic article. We haven't managed to get that working yet.

Rob

--

[Jesse Monroy]

To All,
My apologizes to Marc. In my zeal (and late night hours spent on answering questions), I see nails every where.

Apparently, my brain had registered Cordova platform and not Cordova broswer platform. The later is not well know, and has many, many issue; the least of with is clear documentation and usage. In addition, the poor choice of the name *platform* leaves it ripe of misinterpretation and obfuscation. (How do you search for Cordova browser platform?)

All I know about this, is it was mentioned in a blog post, and Raymond Camden wrote a blog post. What limited notes I have on this say, white-list does not work. Now a plugin may say different, but aside Raymond's blog post, I can neither confirm nor deny that the Cordova browser platform is worth much. In addition, I can neither confirm nor deny the whitelist and CSP.

Lastly, the interaction between Cordova browser platform is not well understood, least be me. I have *some* notes (see bottom What you should watch for), but aside from publishing these. I feel like I am in the way.

Here is a summary of my notes:

• does NOT have access to the hardware on the mobile device
• The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.
• conflicting when using the target = _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
• ?it is affect by white-list sometimes, but mostly by CSP?

Again, I apologize for the confusion.

Jesse

[Rob Willett]

Jesse,

The Ionic website and the link I posted does seem to indicate that it does work, however not easily, and you need to setup a proxy. We're still trying to do it as having a browser for debugging is easier on the workflow than starting up a simulator (which has its own issues) or using an actual device which also has issues. For many situations when debugging JavaScript, Chrome is better than the simulator or actual hardware. We find iOS often glosses over issues when we want errors shown.

We'll persevere and see if we can get the browser to work.

Rob.

[Steve Sobol - Lobos Studios [P]]

Ionic? I had some issues both in the browser and on the device with one of my projects not too long ago. I'm going to bed now but will get you a link to my solution later. I posted both here and in the ionic forum.

Sent from my iPhone

[Rob Willett]

Steve

I'd be interested in seeing that. Working through proxy server is on our to do list now.

[Steve Sobol - Lobos Studios]

Original thread: https://groups.google.com/forum/#!topic/phonegap/AsB23-4DXzs

Update where I report that I solved the problem: https://groups.google.com/d/topic/phonegap/SekpbTorRA4/discussion

It was a new Angular requirement that I was missing. ng-csp

Blog post on CORS in Ionic: http://blog.ionic.io/handling-cors-issues-in-ionic/

--

[Jesse Monroy]

Thanks for the new can of worms. ;-)

RAW Notes so far. Just added Ionic to the bottom. :-)

https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/whitelist-system.md

[Marc]

In the end, the solution that seems to work for me was the following:

Go to platforms/browser/cordova/node_modules/cordova-serve/src/browser.js

in function getBrowser add --disable-web-security to the chromeArgs.

function getBrowser(target, dataDir) {
    dataDir = dataDir || 'temp_chrome_user_data_dir_for_cordova';

    var chromeArgs = ' --disable-web-security --user-data-dir=/tmp/' + dataDir;
//    var chromeArgs = ' --user-data-dir=/tmp/' + dataDir;

Is this the kind of thing that should make it into the next reelase of the browser platform?  How do I submit a bug report (or this fix) to make sure this happens.

I assume that the next time I do:

cordova platform rm browser

cordova platform add browser

that this change will go away.

[Rob Willett]

Marc

Not sure it's a bug. What you appear to have done is turn off all security. Whilst this may work, it may also hide other security bugs that you want to know about.

Rob

[Marc Luria]

It definitely is a bug that users of the browser platform need to make additional changes in order to test something that works fine on a smartphone.  The idea of the browser platform is to seamlessly mimic and test a cordova application using the browser.  For a while after it was introduced this worked easily, and then at some point, it stopped, meaning that I had to add an extension by hand. 

Obviously, if there was a more secure solution via the localhost server which is created automatically that would be better than my brute force solution.

You received this message because you are subscribed to a topic in the Google Groups "phonegap" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phonegap/W8zAKXowrJk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to phonegap+u...@googlegroups.com.

[Rob Willett]

Marc

I have to make other changes to my code for it to work in a browser. GPS, can't be put in background, notifications, payments immediately come to mind.

The browser is not a substitute for the real device. It's not a simulator. Indeed some of the 'real' simulators don't support notifications or payments.

The solution apparently is to put a proxy in place.

The browser gets us further along the testing path but there comes a time when we have to move to simulators and then to the actual device.

Rob

[Jesse Monroy]

@Marc,
first welcome to the world of mobile and embedded programing.
second welcome to the open source world.

On the later, if you don't like the tools you have, build your own. And then share them if you like.
Otherwise, you are making noise.

Welcome again
Jesse