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
.
domain.com
)Is this a indended behaviour of Safari or do we have an issue with our implementation?
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.
That's because localstorage doesn't support sharing the storage across subdomains or even domain.
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.
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.
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.
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.
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?
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With