2

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

2
  • I edited the description, I hope it's clearer now
    – Saraband
    Commented Sep 17, 2020 at 7:43
  • 1
    Big time! Great edit! I suggest removing your "Edit 2" and posting it as an answer (with instructions for how to do it). Glad you figured it out! Commented Sep 17, 2020 at 8:14

2 Answers 2

1

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

preferences

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.