Safari 13+ blocks third-party cookies if API is on different subdomain

Question

I have Web application and API application.

These applications are hosted on different domains.

Eg.

WebApp: app.product.com

API: api.product.com

Cookies are set in Set-Cookie header in response to API call:

api.product.com/SetCookie -> response header Set-Cookie: cookie_name=cookie_value; path=/; secure; HttpOnly; SameSite=None

Than I'm making request to API again and I need this cookie to be attached to request headers.

Everything works fine on most of popular browsers, but on Safari (version 13.1+) this cookie is not set (it's not visible in dev tools even).

Cookie is visible in response response with cookie

But its not stored in browser cookies enter image description here

I was trying to set domain attribute of cookie to 'product.com' but it didn't resolve problem.

Is there any way to set cross domain cookies in that case? Maybe by changing set cookie attributes.

Or hosting all applications from same domain will solve the problem?

Answer 1

If possible, hosting from the same domain will solve this problem, because the iframe cookie will no longer be 'third-party' and thus the restrictions will be lifted.

In Safari, the third-party frame will have to request access to the Storage API before the cookie will be accessible.

There have been numerous changes in all of the browsers regarding cookies and iframe.

The basics of what is changing is there is now a 'SameSite' cookie policy, where Only cookies set as SameSite=None; Secure will be available in third-party contexts, provided they are being accessed from secure connections.

Firefox is using a partitioned approach to the storage, and so the frame will behave as normal unless you then open your application as a new window then the cookie store may or may not follow depending on how the new window was created.

Cookie Status is an excellent resource to track how third party cookies work in the different browsers and what you should change to make it work.