How to set server-side cookie to iframe on iphone or ipad?

I developed web game. But while integrating this game inside iframe in other websites, setting server-side cookie not working on only iphone or ipad devices. When it launch game url, the sever set cookies using response header. But it is not working.

res.cookie("token", token, {
  path: "/",
  httpOnly: true,
  overwrite: true,
  sameSite: "None",
  secure: true,
});
res.cookie("lang", user.lang, {
  overwrite: true,
  sameSite: "None",
  secure: true,
});
res.cookie("locale", locale[user.lang], {
  overwrite: true,
  sameSite: "None",
  secure: true,
});

All the browsers are working on all devices except iphone or iframe. Even if the device is iphone or ipad, they are working when I do not use iframe. How to fix it?

This is a well known restriction imposed by Safari's ITP. Namely, you can't just set third party cookies (the cookies of your game). If you want to continue using cookies rather than other storage methods like local storage, you need to ask the user for permission to store the cookies, using the Storage Access API. This blog post gives a nice summary and provides React-based code snippets for how to do that.

2 Likes

Thank you for your response.
On Chrome browser, it is also not working.
Even if I use safari on iphone or ipad, it works to set server-side cookie when I open game link in window directly. only in iframe, it doesn't work.

That's because Apple has ITP enabled by default for all browsers on iOS.

I still believe what you are experiencing here is the difference between having your game run in a first party vs. a third party context. Let's say your game is accessible under the your.game.com domain. When you open an iframe to your.game.com (or make any sort of request to it, in fact) from your.website.com, your.game.com will be treated as a third party and hence—under the default ITP rules on iOS—is not allowed to use cookies in any way (neither read nor set them).

1 Like

Thanks again for your kind explanation, @jofas. I got what you said.
So ITP is the reason.
To allow third-party cookies, should I use Storage Access API in website.com, not game.com? Correct?

No, you call it from game.com. From the migration guide:

First, Cross-Site Iframes Call the API

The Storage Access API is called from inside cross-site, or third-party, iframes. You don’t have to call the API if your website is first party and first party websites cannot call the API on behalf of third-parties.

1 Like

I have read this blog "Third-Party Cookie Restrictions for Iframes in Safari" you let me know.
I didn't understand yet because my head is stone. haha.
Hope you explain about this again. Thanks.
Let's assume like the following:
"Evolution" is the game provider.
"Luckydreams" is the online casino website that integrates "Evolution" games.
Users login to "Luckydreams" website and play "Evolution" games there.
Evolution set "SessionId" cookie to identify user whenever user open the game.
But Luckydreams integrate "Evolution" game inside iframe. So the browser removes "SessionId" cookie if the device is iphone or ipad.
So to resolve this issue, there is need to use Storage Access API in "Evolution"?

Yes, exactly. You basically need to find out, whether your game has storage access (in JS by using document.hasStorageAccess) and if it doesn't, you need to request it (in JS by using document.requestStorageAccess). Another example of how to use the Storage Access API can be found here.

I submitted this problem to over 10 communities to get a solution, but I didn't expect that I would receive an answer from the Rust community.
Thank you, Jonas.
You are a good man and expert.
I hope everything goes well for you.

2 Likes

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.