Safari setting localStorage inside iframe is not correctly shared

user_1419590 0
Viewed 877

EDITED description:

I have example.com which hosts an iframe to app.example.com/signup. Whenever app.example.com/signup loads, I want to set a localStorage item for app.example.com from within the iframe:

---------------------------------------
| example.com                         |
|                                     |
|         ___________________________ |
|         | app.example.com/signup  | |
|         |        (iframe)         | |
|         |                         | |
|         | 'coupon': 'discount30'  | |
|         |_________________________| |
|_____________________________________|

example.com code:

<iframe src="https://app.example.com/signup"></iframe>

app.example.com/signup code:

<script>
localStorage.setItem('coupon', 'discount30');
</script>

// Signup form

Then when I go to app.example.com (not /signup), I want to be able to access the storageItem I created previously from within the iframe

---------------------------------------
| app.example.com                     |
|                                     |
| 'coupon' localStorage does not exist|
|_____________________________________|

but it looks like it's not persisted (or I can't access it); Although the iframe app.example.com/signup and app.example.com share the same domain.

The most closely related issue I encountered was this one: Iframe localStorage on Safari and Safari mobile

local-storage iframe cookies html javascript
2 Answers

It looks like disabling Prevent cross-site tracking makes it work (Safari > Preferences > Security)

preferences

user_14195900

This is the expected behavior in Safari. Safari's Intelligent Tracking Prevention (ITP) partitions browser storage (cookies, localStorage, etc) based on the top frame. Here's the explanation from WebKit's documentation:

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.

It's not mentioned in this example, but if the user visited adtech.example directly, that's a different domain than news.example and blog.example, so ITP will give it a new storage instance.

What that means for you is app.example.com has different storage instances when it's being loaded directly by the user and inside an iframe on example.com.

ITP can be turned off in Safari's Preferences, but it is on by default so assuming this app will be used by external customers, most of the users on Safari will have it turned on.

Safari offers the Storage Access API which you may be able to use to solve this. From WebKit's blog post:

The solution is to allow third-party embeds to request access to their first-party cookies when the user interacts with them. To do this, we created the Storage Access API.

user_103775860
Related