Criando third party iframe cookies

Recentemente tive esse problema com o meu webapp, ele tinha que rodar dentro de um iframe no site do cliente. Então, o cliente pegou o iphone dele e #FAIL!

/* E agora?! E o leitinho das crianças? */

Antigamente tive um problema semelhante com o IE, mas tinha esse header que resolvia o problema:

Exemplo Apache

# -------------------
# | Iframes cookies |
# -------------------

# Allow cookies to be set from iframes in Internet Explorer.
#
# https://msdn.microsoft.com/en-us/library/ms537343.aspx
# http://www.w3.org/TR/2000/CR-P3P-20001215/

<IfModule mod_headers.c>
  Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
</IfModule>

Mas agora o Safari não deixará que você configure cookies para o domínio de terceiros, a menos que você já tenha os cookies criados para esse domínio.

Então, eu fiz esse javascript como forma de contornar a segurança.

/* Salvou a minha vida e fiquei milhonário!! Noooottt!!! */


No seu App

/* global console */
'use strict';

// Third party iframe cookies
(function(doc, win, nav) {

    var clientMsg = 'Oh no!!';
    var isInIframe = (win.parent !== win);

    var isSafari = false;
    var ua = nav.userAgent.toLowerCase();
    if (ua.indexOf('safari') !== -1)
    isSafari = (ua.indexOf('chrome') === -1);

    function cookieStuff(parentUrl) {
    var href, ts, rerefidx, cookies;
    if (isSafari) {
        cookies = doc.cookie;
        if (top.location !== doc.location) {
        if (!cookies) {
            href = doc.location.href;
            href = (href.indexOf('?') === -1) ? href + '?' : href + '&';
            top.location.href = href + 'reref=' + encodeURIComponent(parentUrl);
        }
        } else {
        ts = new Date().getTime();
        doc.cookie = 'ts=' + ts;
        rerefidx = doc.location.href.indexOf('reref=');
        if (rerefidx !== -1) {
            href = decodeURIComponent(doc.location.href.substr(rerefidx + 6));
            win.location.replace(href);
        }
        }
    }
    }

    function waitingParentOrigin(event) {
    var item;
    try {
        item = JSON.parse(event.data);
    } catch (e) {
        console.error('parse json');
        item = false;
    }

    if (item !== false) {
        if (item.msg === 'luke i am your father') {

        win.removeEventListener('message', waitingParentOrigin, false);

        cookieStuff(item.url);

        event.source.postMessage(
            JSON.stringify({
            'app': 'AppReady',
            'msg': clientMsg,
            'origin': win.location.origin
            }), event.origin);
        }
    }
    }

    if (isInIframe) {
    win.addEventListener('message', waitingParentOrigin, false);
    }

}(document, window, navigator));

No site do cliente(onde será colocado o iframe)

<iframe id="app" frameborder="0" src="about:blank" width="100%" style="height: 700px"></iframe>  
<script type="text/javascript">  
    (function(doc, win) {
    'use strict';

    var intervalo, iframe, baseUrl;

    function getUrl(baseUrl) {
        var d = baseUrl.split('/');
        return d[0] + '//' + d[2];
    }

    function iframeMsg(event) {
        clearInterval(intervalo);
        win.removeEventListener('message', iframeMsg, false);
    }

    function callSon() {
        var item = {
        'msg': 'luke i am your father',
        'url': win.location.href
        };
        iframe.contentWindow.postMessage(JSON.stringify(item), baseUrl);
    }

    function iframeLoaded() {
        intervalo = setInterval(callSon, 100);
    }

    iframe = doc.querySelector('#app');
    iframe.src = '//demo.nimble.com.br/vw/1' + win.location.search;
    baseUrl = getUrl(iframe.src);

    win.addEventListener('message', iframeMsg, false);
    iframe.addEventListener('load', iframeLoaded, false);

    }(document, window));
</script>  

Espero que ajude!

comments powered by Disqus