Tuesday 4 February 2014

Safari: Setting third party iframe cookies

Safari is known to be strict about permissions in iframes, especially when the domain of the iframe page is different from the domain of the parent page. Some would even say paranoically strict.

Safari will block you from setting cookies for the third-party domain (the different domain in the iframe), unless you already have cookies set for that domain.

Here's a snippet of javascript I pulled together last week that as a way to get around the iframe cookie security. It works great if your page is nice and light and loads fast, otherwise it can feel pretty clunky with the triple loading...

window.onload=function(){
 if(navigator.userAgent.indexOf('Safari')!=-1&&navigator.userAgent.indexOf('Chrome')==-1){
  var cookies=document.cookie;
  if(top.location!=document.location){
   if(!cookies){
    href=document.location.href;
    href=(href.indexOf('?')==-1)?href+'?':href+'&';
    top.location.href =href+'reref='+encodeURIComponent(document.referrer);
   }
  } else {
   ts=new Date().getTime();document.cookie='ts='+ts;
   rerefidx=document.location.href.indexOf('reref=');
   if(rerefidx!=-1){
    href=decodeURIComponent(document.location.href.substr(rerefidx+6));
    window.location.replace(href);
   }
  }
 }
}

Here's what it basically does:
  • The javascript is placed in the page loaded inside the iframe. 
  • If the JS is run inside the iframe and the browser is Safari and there are no cookies set, then we frame-burst the page to take over the window and append the original parent page URL as a parameter. 
  • If the JS is run not inside a frame and the browser is Safari, then we set a timestamp cookie (now that we are out of the iframe) and if a reref param exists we redirect back to the original page.
  • If the JS is run inside the iframe and the browser is Safari and there ARE cookies set, then we do nothing.

And one more time in pseudo-code

if(browser is Safari){
 if(we are in an iframe){
  if(no cookies){
   set window_url = iframe_url + reref=iframe_parent_url;
  }
 } else {
  set a timestamp cookie;
  if(reref exists in url){
   redirect to original url so we have iframe again
  }
 }
}