How can I use cookies with a site where the HTML and the API calls have different domains?

Question

I am hosting a Single Page App website on a static server (happens to be Amazon S3), so it is served up from the URL of my application, lets say "example.com". So the website lives at " https://example.com ". This site uses API calls made using JavaScript's fetch() call to perform the functionality of the site. Because example.com points to a static server, the API calls go to a different domain, let's call it "xyz.execute-api.cloudhost.com" (it happens to be behind Amazon's API Gateway).

I want to use cookies to manage a user session. That is, I want one API call to return a Set-Cookie header on the response which will store a cookie on the browser and I want certain other API calls to pass a Cookie header on the request which can then be verified in the API. The cookie will always come from the APIs and be returned to the APIs (NOT the site of page, since the page itself is hosted on a static server). I want the cookie to be saved between sessions (with some expiration lifetime and understanding that the browser may clear it due to space constraints or user action).

But this is hard to do. First of all, my API calls are all to a separate domain, so I must use CORS to authorize the calls. When I use CORS the server must include "Cookie" in the list for Access-Control-Allow-Headers or it will not be returned. Furthermore, when I use Javascript's fetch() API to make the call, I need to specify to include credentials like this:

fetch(url, {method: "POST", credentials: "include"})

...or the cookie will not be sent. The API call that RETURNS the cookies does not need to receive cookies, but I must specify credentials: "include" for that as well or the browser will ignore that Set-Cookie response header.

I also need to configure the cookie itself properly. The various API calls have different paths, so I need to specify Path=/ in my Set-Cookie header. I'd prefer to set SameSite=Strict , Secure , HttpOnly and a value for Max-Age , but I'm willing to be flexible if needed.

And that's as far as I've gotten. I still can't get my cookies to be placed (with Set-Cookie) and returned to the server (in Cookie) in a cross-platform fashion. Because the page domain isn't the same as the API domain, I may need to specify SameSite=None , but if I do that, recent standards changes may require me to set Secure also (which is fine). Even so, I can't get all the major browsers to return the cookie. I also expected that setting a new cookie with the same key would replace an existing one, but I can't get that to work either -- when it IS returned I see both cookies.

What is the correct way to use cookies in this situation?

Answer 1

As you are specifically saying that you would like to initiate these requests from a separate site to the API site, that means they will inherently be cross-site or third-party requests and therefore the cookies must be marked as SameSite=None; Secure SameSite=None; Secure .

If you want to use something like SameSite=Strict or SameSite=Lax then you will need to manage the cookie from within the SPA instead. This may be preferable, as it would allow you to store your session identifier or token there and then pass this as a separate field or header to your API. This way your API is not dependent on cookies, which is probably preferable.