Safari not storing cookie set through Angular HttpClient / XMLHttpRequest

Question

We have an Angular app that makes a request to a resource on another domain (a headless cms api). The flow is as follows:

^{Spartacus=Angular, OCC=Java backend, Episerver=.Net backend}

Call nr 10 looks like this:

getExternalCmsAuthCookie(jwt: string): Observable<any> {
const url = `${this.episerverBaseUrl}/externalauth`;
const requestOptions = {
          headers: new HttpHeaders({
            Authorization: 'Bearer ' + jwt
          }),
          withCredentials: true
        };
return this.http.post(url, {}, requestOptions);

}

The in the server response we see the header

Set-Cookie: role-token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NzUxMTE0OTQsInJvbGVzIjpbIkFwaUNvbnN1bWVycyIsIlBhcnRuZXJQb3J0YWxVc2VycyJdLCJ1c2VySWQiOiI4Nzk2MDk0NzkxNjg0In0.Mbvwe5qPIGSvUS-sFzxzPq7PAMed3LJaVeP8hK7eHQI; expires=Sat, 30 Nov 2019 10:58:15 GMT; domain=api.ourepiserver.com; path=/;SameSite=None; secure; httponly

After that all requests to the cms include the cookie and are let through by the server that sends some cms content back. This content can include tags pointing to episerver. This is the reason we need the cookie beause we can't add any custom http headers to resources the browser is downloading through tags.

This is working in all browsers except Safari. There are some duplicate questions (but not as elaborately explaind) but none seems to have any good answers.

rowan_m rowan_m · Accepted Answer · 2019-12-03T17:20:28

Versions of Safari on MacOS 10.14 and iOS 12 have a bug where they will erroneously treat cookies marked with SameSite=None as if they were marked SameSite=Strict. You may be hitting this issue if you are not on the most recent version.

Potentially, this is also just an ITP limitation if you're trying to set a cookie from a third-party domain that the user has never visited in a first-party context.

I would test this by sending a cookie without the SameSite=None attribute to see if it's passed by Safari. If it is, then this is probably a SameSite compatibility issue. If not, it's likely something else.

I'm also assuming your domains are genuinely different sites and not just different origins. e.g. img.example.com and api.example.com are still the same-site. example.com and service.elsewhere.api are cross-site.

If you're hitting SameSite compatibility, you can mitigate this by setting two versions of the cookie or using useragent sniffing. More details on https://web.dev/samesite-cookie-recipes.

Safari not storing cookie set through Angular HttpClient / XMLHttpRequest

1 Answers