How to overcome Safari third-party cookie policy

Problem

A session can not be started with unblu API when using Safari with default setting. How I can solve this issue?

Solution

First of all, the Safari third party cookie policy is some thing that has effect on most web sites, which include scripts or widgets or any other features from third-party sources. Many websites include third party sources to provide services such as personalization or social interaction or co-browsing or live-chat.

For instance, your website may include the “Like” button, in turn your page may either directly create an iframe pointing it to a Like button URL on Facebook or include a script, the way you do with unblu (you include unblu scripts into your pages) This works in both cases only if the user browser allows third party cookie because the URL within the iframe includes the URL of the desired page (unblu/Facebook, etc.), and since the iframes domain is another domain than yours.

If you use unblu UI to initialise a session, unblu automatically checks cookie-support before displaying the UI. So if the browser does not support third party cookie, unblu will display a popup with content/origin from unblu, where the user can start a session.

However, if you use unblu API to initialise a session, you need to implement the following workaround to solve the issue. First you check whether the browser supports third-party-cookie or not:

1. Call an unblu service that sets cookie (https://start.unblu.com/unblu/cookieSupport?action=setCookie), for example like this:

   var url = "https://start.unblu.com/unblu/cookieSupport?action=setCookie";
   ajax.request("GET", url, onSuccess, onFailure, null, {});
   

2. Store the value provided to you in a variable, for example in "respText" then you call another unblu service to verify the previous cookie value (https://start.unblu.com/unblu/cookieSupport?action=verifyCookie&cookieValue=respText), for example like below:

   var url = "https://start.unblu.com/unblu/cookieSupport?action=verifyCookie&cookieValue=" + respText;
   ajax.request("GET", url, onSuccess, onFailure, null, {});
   

   Remember that you are performing a CORS request, so you need to set "withCredentials: true"

The verification service sends you a "true" if the browser supports third party cookie, otherwise it sends a "false"

In case the browser does not support third party cookie, then you display a popup with an origin from http://customer.unblu.com/your-landing-page-for-the-popup/ Please note that by default Safari blocks popups, thus, it is important that the user is asked to click on a link/button which executes the JS opening the popup. A direct try to open popup without user interaction will be blocked by Safari. So it is important that the user is provided with any element (Button/Image, etc) having a click listener to open popup.

For a proof of concept you can use this URL "http://customers.unblu.com/example/confirm.php" to display the popup, for example like below:

var url = 'http://customers.unblu.com/example/confirm.php';    
var popup = window.open(url,'1437728504397','width=790,height=350,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=400,top=220');

Note: If you need a custom popup, please get in touch with our support-and-service team through our support portal https://support.unblu.com

The user needs to confirm that we (unblu) can set a cookie into his browser. Once this is done the popup gets closed and the user should reload the page. In this way, unblu can set the cookie and, as a result, an unblu session can be initialised through the API successfully. A simple example can be found here: http://test.aufdeinerseite.com/cookie-support/

Related Topics

How to set the cookie domain so that a session remains active after navigating to a sub-domain

Can I add the unblu snippet dynamically?

• deploycloud
• deployonprem