Local Storage Cross Domain - Safari disables it by default

Question

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:

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!

Answer 1

As noted by the Cross-Storage library documentation:

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.

Answer 2

It seems that the recent updates to the Safari browser (Prevent cross-site tracking) blocks any cookies from being generated when the Matomo domain doesn't match the website it's being loaded from.

This breaks the use of iFrames for Matomo that require cookies to be set (For example the logme feature)

There doesn't seem to be any way to fix this with headers (Eg using CSP or CORS configurations).

current workarounds exist that I've found:

1. Disable the "Prevent cross-site tracking" setting in the Privacy settings
2. Redirect the visitor to the page outside of an iFrame to set the cookie - after this the iFrame can load as long as the CORS configuration is correct and the browser isn't completely blocking the iFrame from loading.

I'm not sure how many users are using iFrames that would require cookies to be set, but they would be impacted if any of their users use Safari.

Answer 3

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

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