title: CORS cookie credentials from mobile WebView loaded locally with file://
body: <p>Bear with me, this one needs a bit of explanation.</p>
  <p>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).</p>
  <p>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 <code>initSession()</code> call, we need to send the JSESSIONID cookie with every (AJAX) request.</p>
  <p>When deployed on a mobile device, the web app is wrapped in the native Web View, which starts the web app by browsing to <code>file:///path/to/app/index.html</code>.</p>
  <p>The first thing we tried was asking our client to set <code>Access-Control-Allow-Origin: *</code> in their response header to allow CORS. We then tried posting to the server:</p>
  <pre><code>$.ajax({
    url: 'http://thirdparty.com/ws',
    data: data,
    type: &quot;POST&quot;,
    dataType: &quot;JSON&quot;,
    success: successCallback,
    error: failedCallback
  });
  </code></pre>
  <p>Monitoring the requests, it was apparent that the cookies were not being included. On closer inspection there is a <a href="https://developer.mozilla.org/en/HTTP_access_control#Requests_with_credentials" rel="noreferrer">special section in the CORS spec for dealing with user credentials</a>, which includes session cookies. So I modified the AJAX call to include this:</p>
  <pre><code>$.ajax({
    url: 'http://thirdparty.com/ws',
    data: data,
    type: &quot;POST&quot;,
    dataType: &quot;JSON&quot;,
    success: successCallback,
    error: failedCallback,
    xhrFields { withCredentials: true }
  });
  </code></pre>
  <p>Another error, this time from the Browser. More reading yielded the following:</p>
  <blockquote>
  <p>If the third party server did not respond with an <code>Access-Control-Allow-Credentials: true</code> header the response would be ignored and not made available to web content.</p>
  <p>Important note: when responding to a credentialed request, the server must specify a domain in the <code>Access-Control-Allow-Origin</code> header, and cannot use wild carding.</p>
  </blockquote>
  <p>So we need to change the server's headers to include <code>Access-Control-Allow-Credentials: true</code> and <code>Access-Control-Allow-Origin</code> to our Origin.</p>
  <p>Here we finally come to my problem: <a href="https://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin">when loading a web page using the file:// protocol</a>, the <code>Origin</code> request header sent from the Web View is set to <code>null</code>. It therefore can't be parsed by the server and so the server can't set it in <code>Access-Control-Allow-Origin</code>. But if the server can't set <code>Access-Control-Allow-Origin</code> to something other than <code>*</code> we can't send credentials, including cookies.</p>
  <p>So I'm stuck. What to do? <a href="https://stackoverflow.com/questions/5138057/cross-origin-resource-sharing-and-file">I saw a similar question posted here</a> but I don't really understand the proposed answer. Any help would be much appreciated!</p>