MobileSafari won't send back Cookies set with CORS

Question

I have a page loading up in MobileSafari which communicated with another server via CORS.

In desktop browsers (tested Chrome and Safari), I am able to log in, get a session cookie, and have that session cookie be sent back for subsequent requests so that I may be authenticated with all API calls.

However, when I login via Mobile Safari, the cookie does not get sent back on subsequent requests.

I'm using Charles Proxy to spy on what's going on, and it tells me:

1. POST https://myremoteserver.com/sessions.json passes up my login info
2. It succeeds and response is received with a valid Set-Cookie header.
3. GET https://myremoteserver.com/checkout.json is requested, without a Cookie request header.
4. Server responds as if I am not logged in.

I'm using this snippet with Zepto.js to ensure that the withCredentials: true is properly setup on the XHR object. (pardon the coffeescript)

# Add withCredentials:true to the xhr object to send the remote server our cookies.
xhrFactory = $.ajaxSettings.xhr
$.ajaxSettings.xhr = ->
  xhr = xhrFactory.apply(this, arguments)
  xhr.withCredentials = yes
  xhr

And that snippet works great in desktop browsers, and before I added it I was not able to preserve the session cookies in those desktop browsers.

Is there some quirk in MobileSafari that prevents this from working like desktop browsers? Why does it not work in the same way?

---

Edit!

here is my CORS headers setup in my rails 2.3 app, fairly standard stuff I believe

def add_cors_headers
  if valid_cors_domain
    headers['Access-Control-Allow-Origin']      = request.headers['HTTP_ORIGIN']
    headers['Access-Control-Expose-Headers']    = 'ETag'
    headers['Access-Control-Allow-Methods']     = 'GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD'
    headers['Access-Control-Allow-Headers']     = '*,x-requested-with,Content-Type,If-Modified-Since,If-None-Match'
    headers['Access-Control-Allow-Credentials'] = 'true'
    headers['Access-Control-Max-Age']           = '86400'
  end
end

Also today desktop Safari on Mountain Lion started not to send the cookie, behaving just like MobileSafari. I'm not entirely sure if my assessment yesterday was inaccurate, or perhaps Apple is just trolling me...

Also could this be affected by using https:// at the remote url?

Delorenzo

Can you use test-cors.org to craft a CORS request to your server on mobile safari? Does it work there? – Sacksen

@Sacksen Using that tool I can make a get request to /sessions/new which should start a session. I see the cookie come down, and when I make a second request for the same page I can see the cookie header sent back up in Chrome, but no cookie is sent with the second request on Safari or MobileSafari. – Delorenzo

A small nit: '*' is not a valid value for the Access-Control-Allow-Headers response header. However that should not cause the issues you are seeing. Can you also include the Charles Proxy request/response headers for the failing request? – Sacksen

Just ran across the following question; could this be a Safari bug? #14256955 – Sacksen

Gah, I cannot seem to get Charles to play nice with SSL now, even though I think was before. This is so annoying. – Delorenzo

Though it's actually more important this work from an app, so this may be the route forward for me: #5954882 – Delorenzo

I'm also seeing this with a JSONP app. Mobile Safari doesn't send the cookie back. Mobile Chrome does as well as desktop Chrome and Safari. – Styliform

Answer 1

I believe you are experiencing what I have been seeing in my app. My issue, was caused because iOS Safari, comes with a default option "Prevent Cross-Site Tracking" enabled by default that is causing the browser to block ALL third party cookies, even cookies that are issued by your back-end server from a different domain and CORS is configured correctly.

The only solution to this problem I found was to use a proxy in production like I did in dev. I accomplished this in Azure with Azure Functions and making all request go through a proxy. At that point iOS Safari did not block my cookies everything was set as expected.

I wrote about it in my blog https://medium.com/@omikolaj1/complete-guide-to-deploying-angular-and-asp-net-33a0976d0ec1

Letourneau

I can confirm that when I turned off "Prevent Cross-Site Tracking" on Safari (mobile) the cookie was set on each request. – Corkwood

But I can not expect every user of my app having this setting disabled. So I need another solution. Therefore I wanna ask you how the proxy server can solve this? Because for the Safari (mobile) browser the proxy server is itself CORS Resource/Domain and therefore should not sent the Cookies along making requests to this proxy. Could you explain this? – Corkwood

I'm not sure I completely follow or perhaps I don't have all of the information. However when your application is hosted on www.spa.com and your api is at different domain such as api.com and you make requests to the api via api.com/some-resource then youll encounter problem in this question. However if you're going to make your requests at spa.com/api/some-resource then the mobile browser should forward the cookies because you're not making any cross origin resource sharing requests from the browser. The proxy server then makes the actual request to api.com. – Letourneau

Understand so far. But the the proxy server as to be hosted at the same server as www.spa.com. Because if not, the proxy server will have a different domain. Or not? As I have research so far, proxy server are usually hosted on a different and independent server. – Corkwood

Ah I see, yes, the “proxy server” would have to host the spa essentially. Or you could use azure functions to do this. – Letourneau

Answer 2

I don't know if this solution will work or is acceptable to you but I had the same problem with mobile Safari and a JSONP app. It seemed that Safari was not set to accept third party cookies. I went to Settings > Safari > Accept Cookies and set 'Always' and the problem evaporated. Good luck.

Can I set cookies in a response from a jsonp request?

Styliform

Answer 3

You didn't mention whether the remote server is under a different domain or just a different subdomain. I assume is under a different domain.

As @schellsan pointed out you can't set/write cookies to a different domain even if the CORS policy allows it due the 3rd party cookies restriction on safari. It's the latest safari restriction. I guess Firefox is about to do the same.

Workarounds I'm currently evaluating:

• Use a redirect on the remote server so that when the client is redirected (the remote URL is in the browser bar) you can set the cookie
• Use a custom header

Espinoza

Answer 4

I was running into the same problem.

My setup was:

• AngularJS (Ionic) App on Server A with domain a.com
• NodeJS with Passport JS as Backend on Server B with domain b.com

The login with the cookie went well on every browser, except Mobile Safari on iOS. Also the change of the mobile cookie (Do not track) settings in iOS did not had any impact on the issue.

Solution was to set a CNAME DNS Record

backend.a.com CNAME b.com

Stultify

You are adding this record in which domain's DNS? a.com or b.com ? – Tokoloshe

Answer 5

Open an address that sets the cookie via an iFrame - this will set the cookie.

Referent