Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari LocalStorage not shared between IFrames hosted on same domain

We are working on two web applications that are hosted on two different subdomains of the same domain:

  • https://subDomainA.domain.com
  • https://subDomainB.domain.com

Both web applications are showing an iFrame hosted on a third subdomain:

  • https://subDomainC.domain.com

We are using postMessage to communicate between top window and IFrame window.

Within the iFrame shown on subDomainA, we are setting an AuthToken:

localStorage.setItem("AuthToken", "JWTAuthToken")

When we navigate to subDomainB and try to run the following code within the iFrame:

localStorage.getItem("AuthToken")

The result is null.

  • This only happens in the Safari browser.
    • All other browsers share the LocalStorage within these IFrames
  • We are on the same domain, i.e. the same "eTLD+1" (domain.com)
  • Doing the exact same thing with cookies works!. Just not with LocalStorage
  • Opening subDomainC directly in the browser and setting the data persists them for the IFrames as well.

Is this a indended behaviour of Safari or do we have an issue with our implementation?

like image 323
ggradnig Avatar asked Sep 16 '20 14:09

ggradnig


People also ask

Is localStorage shared between domains?

As you may know, LocalStorage is domain based. You can't read or write from localstorage that's on different domain, even if that's subdomain. But there is iframe trick that you can use to store data from domain to it's subdomain.

Does localStorage persist across domains?

That's because localstorage doesn't support sharing the storage across subdomains or even domain.

Does Safari allow localStorage?

Safari treats cookies and local storage as the same thing, so these steps work for both. Click the “Safari” menu and choose “Preferences”. Click the icon labeled “Privacy”. Make sure the option for “Block all cookies” is not checked.

How do I set up localStorage in Safari?

In Safari, you can find Local Storage by first going to the Develop menu, then choosing Show Web Inspector, selecting the Storage tab and then selecting Local Storage from the side menu.

Why can't I use localStorage on my website?

This is apparently an issue due to the clientside browser settings. You can explicitly allow localStorage by toggling it in Safari's settings. However, since general visitors to your website might not have that setting, it's better to write your code to check for the availability of localStorage before using it.

Why Safari doesn't allow to Store Cookie for iframe?

This implementation works with all other browser except Safari 11. Why Safari doesn't allow to store cookie for iFrame? Try going to Safari/Preferences/Privacy and uncheck Prevent cross-site tracking. Try going to Safari/Preferences/Privacy and uncheck Prevent cross-site tracking. Thanks for your response.

Is it possible to disable localStorage in Safari by default?

IIRC, Safari by default only allows localStorage to be used by sites served over HTTP. I think there is an option to disable this behavior in the develop menu. I'm just opening the file. So do you think if I set up a domain and run the file through there, Safari wouldn't reject localStorage?

Why is cross-domain local storage access disabled with Safari 7+?

All cross-domain local storage access is disabled by default with Safari 7+. This is a result of the "Block cookies and other website data" privacy setting being set to " From third parties and advertisers ". Any cross-storage client code will not crash, however, it will only have access to a sandboxed, isolated local storage instance.


1 Answers

This is the expected behavior in Safari. Safari's Intelligent Tracking Prevention (ITP) partitions browser storage based on the top frame. Here's how WebKit's documentation explains it:

Partitioning is a technology to allow third-parties to use storage and stateful web features, but have those isolated per first-party website. Let’s say adtech.example is a third-party under both news.example and blog.example and that adtech.example uses LocalStorage. With partitioned LocalStorage, adtech.example will get unique storage instances under news.example and blog.example which removes the possibility to do cross-site tracking through LocalStorage.

References:

https://webkit.org/tracking-prevention/#partitioned-third-party-localstorage

Iframe localStorage on Safari and Safari mobile

In slightly plainer English, https://github.com/zendesk/cross-storage says :

Notes on Safari 7+ (OSX, iOS)

All cross-domain local storage access is disabled by default with Safari 7+. This is a result of the "Block cookies and other website data" privacy setting being set to "From third parties and advertisers". Any cross-storage client code will not crash, however, it will only have access to a sandboxed, isolated local storage instance. As such, none of the data previously set by other origins will be accessible. If an option, one could fall back to using root cookies for those user agents, or requesting the data from a server-side store.

This may be of use: https://webkit.org/blog/8124/introducing-storage-access-api/

like image 89
Eliezer Berlin Avatar answered Nov 09 '22 03:11

Eliezer Berlin