I am having requirement to navigate to third party site (SSO) from my application, this works well in chrome, IE9 and Firefox but not in safari. There was a workaround to have hidden iframe on page to set the cookie and then navigate to actual iframe, but this trick no longer works now. I also tried to open a new window with action as the third party URL to set cookie in the browser and then open the same in the iframe, but this has a disadvantage of that small window that is opened which looks like some hack. Is there any workaround to set the cookie in iframe for safari browser ??
4 Answers
Introduction to tracking cookies
“Tracking cookies” is a very important part of the online advertising ecosystem. There are many usage scenarios. Here's one example called retargeting.
It's known that a lot of internet shoppers don't make purchases right after they saw a good deal on an e-commerce website. They take a look, leave the website and return in a couple of hours or days to make an actual order.
To stimulate those users, websites utilize so-called retargeting technology. Basically, they want to remember users who left their website without making an order and show them a relevant advertisement on other websites. Typically e-commerce websites delegate such work to online advertisement platforms, like ad exchanges, DSPs and so on.
From a technical point of view it works as follows:
Website owner has a small piece of HTML code, called a "tracking pixel". Let's consider a simple case when the tracking pixel is a transparent GIF image:
<img src="http://pixel.sample-ad-exchange.com/pixel.gif">
http://pixel.sample-ad-exchange.com/pixel.gif
drops a cookie for domain '.sample-ad-exchange.com' with name user_id. In this cookie a generated unique user ID is stored (if the cookie already exists, the server just skips this part)sample-ad-exchange.com remembers internally that the user with this ID visited the e-commerce site
When sample-ad-exchange.com is requested to show an ad somewhere else (by calling tag.sample-ad-exchange.com/show_ad.js for example) it receives the user_id cookie along with the HTTP request
sample-ad-exchange.com checks internally if this user visited any e-commerce sites before. If he has, it could show a very relevant ad to him
The problem
As you can see, the ability to drop cookies is a viable part of retargeting schemes. These kind of cookies are called "third-party cookies" because the tracking pixel code is sitting on the e-commerce site's domain (e.g. my-cool-store.com), and the pixel itself is located on the third-party ad-exchange's domain (.sample-ad-exchange.com).
By default, different browsers have different policies about third-party cookies:
Chrome, Firefox, IE before 8.0 always accept third-party cookies
IE 8.0 and above accept third-party cookie only if website explicitly declared how it will use the cookies. The declaration is done via P3P protocol. As every spec from W3C, this one is also very cryptic. But the essence is the HTTP header called "P3P" that you need to send along with http response containing cookie. This header content works fine though I have no idea what's exactly it's declaring: 'P3P: CP="NOI DSP COR NID CURa ADMa DEVa PSAa PSDa OUR BUS COM INT OTC PUR STA"'
Safari never accepts third-party cookies
Safari wasn't a huge problem for industry before iPad appeared and gained huge popularity. Studies shows that iPad users tend to shop online even more than usual PC guys.
Trick 1.0 (not working anymore)
In fact Safari sometimes doesn't reject third-party cookies. It happens than user did some action related to third-party domain. Google Analytics (and other platforms too) took advantage of this feature: they inserted an iframe and simulated form sumbit inside it. I won't stop on technical details here. First, this hack cost google $22.5 millions and second the trick isn't working anymore in last versions of Safari
Trick 2.0 (HTML5 localStorage)
The idea of this trick is use HTML5 localStorage API. This API is very similar to cookies - it allows managing user’s preferences from javascript and storing it locally on user's box. Why not store user id in localStorage? The first version of code I came up with:
<script type="text/javascript">
if (typeof navigator != "undefined" && typeof navigator.vendor != "undefined" && navigator.vendor.indexOf("Apple") >= 0 && typeof localStorage != "undefined") {
//Check if browser is made by Apple (means it's Safari) and local storage is available
var userId = localStorage.getItem("user_id");
if (userId == null) {
//set user is if user is unknown
userId = Math.random();
localStorage.setItem("user_id", userId);
}
var img = document.createElement('img');
img.src = "http://pixel.sample-ad-exchange.com/pixel.gif?user_id=" + user_id;
var body = document.getElementsByTagName('body')[0];
body.appendChild(img);
}
The idea is pretty straightforward: look for user_id key in local storage (create one if it doesn't exist) and pass user_id to pixel server as GET parameter. Then server will record this id instead firing the cookie.
But this code isn't working well. Each domain has it's own local storage. And if you tracking pixel was fired at my-cool-store.com user_id will be stored in my-cool-store.com local storage. If the same user would visit other-domain.com with tracking code later on it will be treated as new one.
To fix that old good trick with iframe will work. Instead of img tag we will insert iframe tag with source somewhere inside pixel.sample-ad-exchange.com. And place user detection code inside iframe. As iframe is executed "inside" pixel.sample-ad-exchange.com local storage will be the same for all tracked sites. Here's a complete example:
Tracking code:
<script type="text/javascript">
if (typeof navigator != "undefined" && typeof navigator.vendor != "undefined" && `navigator.vendor.indexOf("Apple") >= 0 && typeof localStorage != "undefined") {`
var iframe = document.createElement('iframe');
img.src = "http://pixel.sample-ad-exchange.com/iframe.html";
var body = document.getElementsByTagName('body')[0];
body.appendChild(img);
}
</script>
Iframe code (http://pixel.sample-ad-exchange.com/iframe.html
)
<html>
<head></head>
<body>
<script type="text/javascript">
var userId = localStorage.getItem("user_id");
if (userId == null) {
//set user is if user is unknown
userId = Math.random();
localStorage.setItem("user_id", userId);
}
var img = document.createElement('img');
img.src = "http://pixel.sample-ad-exchange.com/pixel.gif?user_id=" + user_id;
var body = document.getElementsByTagName('body')[0];
body.appendChild(img);
</script>
</body>
</html>
Legal issue
The interesting question is if this method is legal. Znd if next company using it will get $22.5 million fine. I'm not a lawyer, but from my common sense perspective as Safari settings explicitly says "Block third-party cookies from third parties and advertisers" and localStorage isn't a "cookie" the approach above seems legit.
-
25The localStorage+iFrame no longer works in Safari. Safari appears to partition localStorage in an IFrame to the combination of main page domain and IFrame domain. Thus, in Safari: On site X with an IFrame with src site Y, you write to localStorage in the IFrame. The localStorage value will be available in the IFrame only on site X. If you go to site Z and have an IFrame to site Y, the values set when on site X will not be available. See discussion on JSMentors list– SimeonJMCommented Jul 2, 2015 at 6:27
-
@SimeonJM that's really clever! This kind of information is really helpful to understand how all the pieces of the puzzle fit together. Commented Jan 21, 2021 at 19:47
Hidden (or not hidden !) iframes won't work, since they would still violate the same-origin policy.
Try searching for CORS - "Cross Origin Resource Sharing". It's a standard that is now implemented in all major browsers.
The online privacy field is changing fast in recent years. Cross site cookies in safari will not work. There are a series of articles related to privacy polices for webkit.
The general principle is that user data should not be read by third parties unless the user is aware of the third party's behavior.
Intelligent Tracking Prevention(ITP1.0)
-
Hi I am stumbling upon this same issue now. Have you found a solution for this problem? It would be great if you can please share some sample code for the solution. Thanks. Commented Jan 30, 2020 at 2:20
In answer to the suggestion to localStorage. Access to all 1st party storage (cookies, localStorage, indexDB) is blocked by ITP. Webkit and Mozilla expose an implementation of Storage Access API which allows the user to opt-in to exposing 1st party storage to 3rd-party components.