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
  }
 }
}

82 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. I am testing out your code. I am assuming that the part that I have to edit is the one with the interrogation marks inside single quotes?

    Do you know if this works with IE9+? Because I have this issue with IE9.

    ReplyDelete
    Replies
    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India . or learn thru JavaScript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

      Delete
  3. I can't get this to work.

    If I have domainA.com with iframe loading domainB.com. The javascript above should be in domainB.com, right?

    This is what I have: http://pastie.org/9280470

    ReplyDelete
  4. Thank you. This made a world of difference! :) It worked beautifully!

    ReplyDelete
  5. I am facing issue with triple loading ?Please help me out to avoid that

    ReplyDelete
  6. Thanks.. it works!!

    ReplyDelete
  7. Thank you, it was very helpful!

    ReplyDelete
  8. Since this was geared towards normal GET requests, is there a way that this could be easily modified to handle POST requests?

    I have a web app where the top frame POSTs into the iframe. So the initial call into the iframe is a POST request. Might be hard to carry those POST variables throughout the various redirects.

    ReplyDelete
  9. Hello the JavaScript must be placed into the page where the iframe is referring to ?

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Hello and omg, it to hard to understand those complicated settings such as for me. Better to download latest https://yepdownload.com/safari safari windows 8.1 from the begining, than try to understand those codes. I like this browser, from that moment when I start use the iphone, before I applied the chrome every day, but now only safari browser. For me here is convenient the read mode and the confidential system is very high.

    ReplyDelete
  14. Main sabung ayam online di Situs Terpercaya Saja Dijamin Pasti Bayar !

    ReplyDelete
  15. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance the knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got a good knowledge.
    Php course in chennai

    ReplyDelete

  16. Ingin Menjadi Jutawan Dalam Bermain Game Online, Inilah saat'a Anda Bergabung Bersama s128 sabung ayam, Pendaftaran Gratis Dan Akan Di berikan Panduan Cara Memenangkan Game Online. Bolavita Juga Menyediakan Promo Bonus Setiap Deposit 10% Utk New Member, Adalagi gan yaitu Bonus CashBack 10% Setiap Minggu'a, Jangan Lupa Di Like Juga FB Bolavita guys, Cara'a Sangat Gampang gan BBM: D1A1E6DF/ Wa: 081377055002/ Line: cs_bolavita Atau Kunjungi FB Bolavita Lalu Like Dan Share ya gan. thx ya gan ^_^

    ReplyDelete
  17. Hi Thanks for the nice information its very useful to read your blog.
    Web Design Training

    ReplyDelete
  18. Hats off to your presence of mind. I really enjoyed reading your blog. I really appreciate your information which you shared with us.
    safety course in chennai

    ReplyDelete
  19. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    fire and safety course in chennai

    ReplyDelete
  20. Thanks for sharing the details! thanks for sharing information,nice article.
    i would like to more information from your side!
    please added more then tips!Am working in
    Excel Training In Hyderabad

    ReplyDelete
  21. This is very good content you share on this blog. it's very informative and provide me future related information.
    Java training in Chennai

    Java training in Bangalore

    ReplyDelete
  22. I appreciate that you produced this wonderful article to help us get more knowledge about this topic.
    I know, it is not an easy task to write such a big article in one day, I've tried that and I've failed. But, here you are, trying the big task and finishing it off and getting good comments and ratings. That is one hell of a job done!


    Selenium training in bangalore
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

    ReplyDelete
  23. .................................................................................
    read online info.

    ReplyDelete
  24. I Regreat For Sharing The information The InFormation shared Is Very Valuable Please Keep Updating Us Time Just Went On Reading The Article Python Online Training AWS Online Training Hadoop Online Training Data Science Online Training

    ReplyDelete
  25. Such an ideal piece of blog. It’s quite interesting to read content like this. I appreciate your blog
    Data Science Certification

    ReplyDelete
  26. simply superb, mind-blowing, I will share your blog to my friends also
    I like your blog, I read this blog please update more content on hacking,Nice post
    Tableau online Training

    Android Training

    Data Science Course

    Dot net Course

    iOS development course

    ReplyDelete
  27. Thanks for sharing valuable article having good information and also gain worthful knowledge.

    Oracle Integration cloud service online training

    ReplyDelete
  28. Thank you for sharing your awesome and valuable article this is the best blog for the students they can also learn.

    Workday HCM Online Training

    ReplyDelete
  29. PPSSPP iOS is a free emulator allowing you to play PSP games on your iOS device at high definition and extra features. The software is compatible with iOS 6, 7, 8, 9, 10, 11 and iOS 12. It runs almost all popular games but depending on your device power, not all will run at full speed.

    ReplyDelete
  30. An amazing web journal I visit this blog, it's unbelievably wonderful. Oddly, in this blog's content made without a doubt and reasonable. The substance of data is informative.
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  31. A bewildering web journal I visit this blog, it's unfathomably heavenly. Oddly, in this present blog's substance made purpose of actuality and reasonable. The substance of data is informative
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  32. A befuddling web diary I visit this blog, it's incredibly grand. Strangely, in this present blog's substance made motivation behind fact and sensible. The substance of information is instructive
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  33. Just now I read your blog, it is very helpful nd looking very nice and useful information.
    Digital Marketing Online Training
    Servicenow Online Training
    EDI Online Training

    ReplyDelete
  34. Great blog created by you. I read your blog, its best and useful information.
    AWS Online Training
    Devops Online Training
    Apllication Packaging Online Training

    ReplyDelete
  35. Thanks for this post, I really appriciate. I have read posts,
    all are in working condition. and I really like your writing style.
    autocad in bhopal
    3ds max classes in bhopal
    CPCT Coaching in Bhopal
    java coaching in bhopal
    Autocad classes in bhopal
    Catia coaching in bhopal

    ReplyDelete
  36. The article is so informative. This is more helpful for our
    software testing training institute in chennai
    selenium training Thanks for sharing

    ReplyDelete
  37. Hey, would you mind if I share your blog with my twitter group? There’s a lot of folks that I think would enjoy your content. Please let me know. Thank you.

    advanced java training in chennai | advanced java training institute in chennai | advanced java course in chennai | best advanced java training in chennai

    ReplyDelete
  38. Permainan Bandar Q atau yang lebih di kenal dengan Bandar Judi Keliling saat ini memang sedang naik daun di dalam kancah perjudian online di seluruh Indonesia
    asikqq
    dewaqq
    sumoqq
    interqq
    pionpoker
    bandar ceme
    hobiqq
    paito warna
    forum prediksi

    ReplyDelete
  39. I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.is article.

    ReactJS Online Training

    ReplyDelete
  40. An overwhelming web journal I visit this blog, it's unfathomably amazing. Unusually, in this present blog's substance made inspiration driving truth and reasonable. The substance of data is enlightening
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  41. thanks for your information really good your work web design company in velacheryQbigpro branding solution is the best web design company in velachery web design company in velachery.we will create the web site and managing the site.we will help for all business.website is very important for all business.

    ReplyDelete
  42. An overwhelming web journal I visit this blog, it's unfathomably amazing. Unusually, in this present blog's substance made inspiration driving truth and reasonable. The substance of data is enlightening
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  43. thanks for your information really good and very nice web design company in velacheryQbigpro branding solution is the best web design company in velachery web design company in velachery.we will create the web site and managing the site.we will help for all business.website is very important for all business.

    ReplyDelete