Search code examples
javascripthtmlsafaricross-domainlocal-storage

Local Storage Cross Domain - Safari disables it by default

The issue:

I have used github project of Ofir Dagan: Storing cross domain local storage.

It implements html5 local storage: https://github.com/ofirdagan/cross-domain-local-storage

The problem:

Safari doesn't allow third party cookies by default (other browsers allow it).

Safari privacy preferences are:

enter image description here

The default is: "Allow from websites I visit".

I read about these settings:

  1. Always Block - Block all first-party cookies and block all third-party cookies.

  2. Allow from Current Website Only - Allow all first-party cookies and block all third-party cookies.

  3. Allow from Websites I Visit - Allow all first-party cookies and block all third-party cookies unless that third party was a first party at one time (based on current cookies and browsing history).

  4. Always Allow - Allow all first-party cookies and allow all third-party cookies.

Solution I have tried:

Local Storage with an iframe (pixel) - I think it's no longer works on Safari - Is there any workaround to set third party cookie in Iframe for safari?

I think that there is a way to share local storage between first party and third party sites on Safari. (Facebook.com and Booking.com share data between different domains).

I succeeded to achieve it by removing the API and writing it by myself, But I don't want to remove the API and implement it by myself (hope that there is a small fix in order to support Safari):

Iframe.html:

window.addEventListener('cors_event', function(event) {
    if(event.event_id === 'my_cors_message'){
        if (event.data.options.funcName == "SetItem") {
            localStorage.setItem(event.data.options.key, event.data.options.value);
        }
        else if (event.data.options.funcName == "GetItem") {
            return localStorage.getItem(event.data.options.key);
        }
    }
});

MainPage:

<iframe id="target" src="iframe.html" frameborder="1"></iframe>

<script>

    var target = document .getElementById('target');
    target.onload = function(){
        target.contentWindow.postMessage('set', '*')
    }
</script>

So does someone know how can I achieve it by changing some API logic to support Safari?

Any help appreciated!

Solution

  • You may try Store.JS. As per the docs:

    store.js exposes a simple API for cross browser local storage