Milèstre BV
Nov 18, 2019

Safari: using cookies in an iframe


Reference: Safari 3rd party cookie in iframe workaround

When you loaf website B in an iframe of website A (main website) and website B sets some cookies, those cookies are blocked by Safari, whatever is defined on server side.(SameSite=None,AntiForgery etc)

To solve this problem, we need to define a couple of javascripts. The idea behind those scripts is: redirect the visitor from website A (main website) to website B (framed wembesite) to set a cookie and return back to the main website. After that Safari allows the setting of whatever cookie in website B, because they will be seen as part of the main website now.

In the index page of the main website add the following script:

<!DOCTYPE html>
<html>
<head>
    <title>Main website A</title>
</head>
<body>

<script>
    var is_safari = navigator.userAgent.indexOf("Safari") > -1;
    // Chrome has Safari in the user agent so we need to filter (https://stackoverflow.com/a/7768006/1502448)
    var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
    if ((is_chrome) && (is_safari)) {is_safari = false;}  
    if (is_safari) {
        // See if cookie exists (https://stackoverflow.com/a/25617724/1502448)
        if (!document.cookie.match(/^(.*;)?\s*fixed\s*=\s*[^;]+(.*)?$/)) {
            // Set cookie to maximum (https://stackoverflow.com/a/33106316/1502448)
            document.cookie = 'fixed=fixed; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/';
            window.location.replace("https://www.websiteB.com/_safari_fix.html");
        }
    }
</script>

<iframe src="https://www.websiteB.com/framed.html" width="50%" height="400" frameborder="2"></iframe>

</body>
</html>

In website B add a new file _safari_fix.html and set the following content:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<script>
  document.cookie = 'safari_cookie_fix=fixed; path=/';
  window.location.replace(document.referrer);
</script>

</body>
</html>
That is all.

To understand what is happening here:

In the index page of the main website, we check first if we have to deal with Safari by checking the navigator.userAgent.
When it is Safari, the document.cookie is checked on the existence of the value 'fixed'. If not available the current index page will be replaced by the _safari_fix.html in the framed website B.
In _safari_fix.html the document cookie safari_cookie_fix with value 'fixed' is defined, whereafter a redirect to the index page in the main website A occurs.
Again, the check on Safari and existence of the value 'fixed' in document cookie is taken place. Because of the creation of the fixed cookie in _safari_fix.html, this check will be true, so the redirect to _safari_fix.html will not take place anymore, but the iframe will be loaded now.
All cookies, created in following page within website B, will be accepted by Safari now.
About us

Milèstre is a digital development agency based in Maastricht and operating all over the world. Since 2003 we build software solutions together with established companies and great startups. During the years we have developed a process that enables us to transform ideas into meaningful, intelligent and designfull experiences for mobile and web. A process where strategy, design, development and user experience are playing an important rol.

 

Contact us

Milestre BV
Ambyerstraat Zuid 82
6225 AJ Maastricht
Netherlands

Tel: +31(0)43 - 4070780
Email: info@milestre.nl
Recent Posts

© Copyright 2022 - Milestre BV
Top