CORS cookie credentials from mobile WebView loaded locally with file://

Question

Bear with me, this one needs a bit of explanation.

I am helping to build a hybrid mobile web app. The main codebase is HTML5 and JavaScript, which will be wrapped in a native mobile Web View (a la Phonegap).

Part of the functionality requires the app to post information to a web service controlled by one of our clients. There is very little scope to change this web service as it is being used by others. We send JSON using an HTTP POST and receive responses from the server. Part of this response is a JSESSIONID cookie which manages our session with the server. After the initial initSession() call, we need to send the JSESSIONID cookie with every (AJAX) request.

When deployed on a mobile device, the web app is wrapped in the native Web View, which starts the web app by browsing to file:///path/to/app/index.html.

The first thing we tried was asking our client to set Access-Control-Allow-Origin: * in their response header to allow CORS. We then tried posting to the server:

$.ajax({
  url: 'http://thirdparty.com/ws',
  data: data,
  type: "POST",
  dataType: "JSON",
  success: successCallback,
  error: failedCallback
});

Monitoring the requests, it was apparent that the cookies were not being included. On closer inspection there is a special section in the CORS spec for dealing with user credentials, which includes session cookies. So I modified the AJAX call to include this:

$.ajax({
  url: 'http://thirdparty.com/ws',
  data: data,
  type: "POST",
  dataType: "JSON",
  success: successCallback,
  error: failedCallback,
  xhrFields { withCredentials: true }
});

Another error, this time from the Browser. More reading yielded the following:

If the third party server did not respond with an Access-Control-Allow-Credentials: true header the response would be ignored and not made available to web content.

Important note: when responding to a credentialed request, the server must specify a domain in the Access-Control-Allow-Origin header, and cannot use wild carding.

So we need to change the server's headers to include Access-Control-Allow-Credentials: true and Access-Control-Allow-Origin to our Origin.

Here we finally come to my problem: when loading a web page using the file:// protocol, the Origin request header sent from the Web View is set to null. It therefore can't be parsed by the server and so the server can't set it in Access-Control-Allow-Origin. But if the server can't set Access-Control-Allow-Origin to something other than * we can't send credentials, including cookies.

So I'm stuck. What to do? I saw a similar question posted here but I don't really understand the proposed answer. Any help would be much appreciated!

Answer 1

I realize this question is old, but I figured I'd throw in on it anyhow. In the case of CORS requests, the browser preflights them. What this means is - in spite of whatever $.ajax() method you are using, an OPTIONS request is sent to the server.

What this preflighted OPTIONS request is actually doing is saying:

"Hey there, foreign-server-from-some-other-domain, I want to send you a not-simple request (simple req's are not preflighted). My not-simple request going to have these kinds of headers and content type and so on. Can you let me know if this is okay?"

Then the server will do whatever it does (probably check some configuration or database) and respond with the allowable origin(s), the allowable header(s), and/or the allowable method(s).

Finally - if that preflight OPTIONS request has received response that allows the actual $.ajax() method to go - it goes.

CORS is not the same as JSONP.

All that said - while withCredentials preflight success requires the response to carry a Access-Control-Allow-Credentials header (as stated in the question), that is IN ADDITION to Access-Control-Allow-Origins AND Access-Control-Allow-Methods values, which must include the facets of the intended request.

For example - if you are making a CORS POST request from origin http://foo-domain.com with headers somevalue to http://bar-domain.com, a preflight OPTIONS request would go out and in order for the actual post request to be made to http://bar-domain.com, the OPTIONS request would need to receive a response with an Access-Control-Allow-Origins value that included http://foo-domain.com. This could be the origin name itself or *. The response would also need to have an Access-Control-Allow-Methods value that included POST. This may also be *. And Finally if we want our somevalue header to be allowed, the response must contain a Access-Control-Allow-Headers value that includes our somevalue header key or *.

To circle back - if you can't control the server, or have no way to allow the server to allow your CORS requests, you could always use JSONP or some urlEncoded datatype and/or make simple requests without custom headers. GET, HEAD, and full POST requests are usually simple requests.

Answer 2

I imagine that if you are creating a hybrid application you are using cordova. If that is the case you don't need CORS you just need to white list the domains you are going to access.

http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html

Answer 3

My suggestion is set ACCESS-CONTROL-ALLOW-ORIGIN to null on server side

Yes, This question bothers me for a little bit.

Regarding to CORS spec, null can cater the situation where a CORS request from a file:// scheme

And a pratical recommendation on that spec is to set it as origin-list-or-null, which is either a list of space-separated origins or simply "null" (by the way, the string %x6E %x75 %x6C %x6C from the definition for origin-list-or-null is literally null hex- encoded)

Finally you will ask, wont that equal to * if we set ACCESS-CONTROL-ALLOW-ORIGIN to null since every request from scheme file:// is valid (which means every hybrid app can access your endpoint if it knows about your uri)?

Well, given Access-Control-Allow-Credentials: true, I believe you've got a whole auth mechanism working on the server. It should have filtered those requests without the correct auth

Hope it will help

Answer 4

Use JsonP request. JsonP request enables you to do cross domain request. Here is an example.

Answer 5

On php side for example you need set this:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With, Set-Cookie, Cookie, Bearer');
header('Access-Control-Allow-Credentials: true');
// header('Cookie: PHPSESSID='.$_COOKIE['PHPSESSID']);

Answer 6

Try looking at www.5app.co.uk. Avoids use of XHR calls altogether and works reliably on mobile when data connections comes and goes. Gateway then interfaces with your client.