iframe not reading cookies in Chrome

Question

Chrome is not allowing a child iframe to read its own cookies.

I have a parent webpage with a child iframe:

parent at https://first-site.com
child at </code> (inside of parent)</li> <li>cookie set with <ul> <li>path: '/'</li> <li>secure: true</li> <li>httpOnly: false</li> <li>domain: '.second-site.com'</li> </ul></li> </ul> I control both sites, and I want the iframe to perform an operation within the iframe that requires reading cookies for <code>.second-site.com</code>. The outer parent doesn't need to know anything about this. It works in all browsers except for Chrome. Chrome is simply not making the child page's own cookies available to the child. Visiting the child page in its own window and performing the operation works in all browsers, including Chrome. I've tried both of these options in all permutations: <ul> <li>Set <code>secure:false</code> or <code>secure:true</code> for the cookie</li> <li>Set <code>sandbox="allow-same-origin allow-scripts"</code> for the iframe, or remove the <code>sandbox</code> attribute</li> </ul> What is Chrome doing differently, and how can an iframe in Chrome access its own cookies?

user_16593275 · Answer

The question was asked a long time ago, but it is still relevant.

I had the same problem and got a partial solution.

You can try creating a proxy on your server that will redirect requests to the target domain. This way, you will be able to intercept cookies from the response, overwrite them with the desired parameters, and send them to the client.

Example:

Your index.html

You proxy server index.php

 $value) {
    $cookie[] = "{$key}={$value}";
}

if (count($cookie)) {
    curl_setopt($ch, CURLOPT_COOKIE, implode("; ", $cookie));
}

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);

$response = curl_exec($ch);

$lastUrl = curl_getinfo($ch, CURLINFO_EFFECTIVE_URL);

$header_size = curl_getinfo($ch, CURLINFO_HEADER_SIZE);

curl_close($ch);

$headers = substr($response, 0, $header_size);
$body = substr($response, $header_size);

$headerArray = explode(PHP_EOL, $headers);

$cookies = [];
$setCookies = [];

/* Process response headers */
foreach($headerArray as $header) {
    $skip = false;

    $colonPos = strpos($header, ":");

    if ($colonPos !== false) {
        $headerName = strtolower(substr($header, 0, $colonPos));

        /* Serialize html response */
        if (trim($headerName) == "content-type" && strpos($header, "text/html") !== false) {
            $query = http_build_query([
                "proxy_layer_id" => $id,
                "proxy_layer_domain" => $remoteDomain,
                "proxy_layer_sw" => true
            ]);

            /* Generate injection */
            $injection = file_get_contents("./injection.js");
            str_replace("%query%", $query, $injection);

            /* Add your own js to install the service worker */
            $body = str_replace("", "", $body);

            $dom = new DOMDocument();
            @$dom->loadHTML($body);

            /* Get all hyperlinks */
            $links = $dom->getElementsByTagName('a');

            /* Proxy all target hyperlinks */
            foreach ($links as $link) {
                $href = $link->getAttribute('href');
                $scheme = parse_url($href, PHP_URL_SCHEME);
                if (!$href || $href[0] === "#" || $scheme) continue;
                $prefix = $href[0] == "/" ? "" : "/";
                $path = $prefix . $href;
                $query = [
                    "proxy_layer_id" => $id,
                    "proxy_layer_domain" => $remoteDomain,
                    "proxy_layer_path" => $path
                ];
                $newLink = "https://" . $proxyDomain . "?" . http_build_query($query);
                $body = str_replace("\"$href\"", "\"$newLink\"", $body);
            }
        }

        /* Ignore content headers, let the webserver decide how to deal with the content */
        //if (trim($headerName) == "content-encoding") continue;
        //if (trim($headerName) == "content-length") continue;
        //if (trim($headerName) == "transfer-encoding") continue;
        //if (trim($headerName) == "location") continue;

        /* Ignore and get all cookie headers */
        if (trim($headerName) == "cookie") {
            $cookies[] = $header;
            $skip = true;
        }

        /* Change cookie domain for the proxy */
        if (trim($headerName) == 'set-cookie') {
            $header = str_replace('domain=' . $remoteDomain, 'domain=' . $proxyDomain, $header);
            $setCookies[] = $header;
            $skip = true;
        }
    }

    if ($skip) continue;

    header($header, false);
}

/* Merge all cookies */
processCookies($cookies);
processCookies($setCookies);

/* Set cookies */
foreach ($ck as $key => $value) {
    setcookie($key, $value, ["secure" => true, "samesite" => "None"]);
}

echo $body;

Your sw.js

/**
This service worker intercepts all http requests and redirects them to the proxy server
*/

const id = '%id%';
const target = '%target%';
const proxy = '%proxy%';

self.addEventListener('install', (event) => {
    event.waitUntil(self.skipWaiting());
    self.skipWaiting();
    console.log('Installed', event);
});

self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim());
    console.log('Activated', event);
});

self.addEventListener('fetch', (event) => {
    const url = decodeURI(event.request.url);
    if (!url.startsWith(location.origin) && !url.startsWith(`https://${proxy}`) && !url.startsWith(location.host) && (url.startsWith('http') || url.includes(target))) return; // Filter
    const [path, params] = (() => {
        if (url.startsWith('http')) {
            return url.split('/').slice(location.origin.split('/').length).join('/').split('?');
        } else {
            return url.split('?');
        }
    })();
    const request = new Request(encodeURI(`https://${proxy}?proxy_layer_id=${id}&proxy_layer_domain=${target}${typeof path === 'string' && path.length > 1 ? `&proxy_layer_path=/${path}` : ''}${typeof params === 'string' && params.length > 0 ? `&${params}` : ''}`), event.request);
    event.respondWith(new Promise((resolve, reject) => fetch(request).then(resolve).catch(e => {
        console.log("e", e);
        reject(e);
    })));
});

Your injection.js

const serwiceWorkerPath = '/';
const query = '%query%';

navigator.serviceWorker.register(`${serviceWorkerPath}?${query}`).then(() => {
    return navigator.serviceWorker.ready;
}).then((reg) => {
    console.log('Service Worker is ready', reg);
    if (!localStorage.getItem('sw')) { // Reload if the service worker installed for the first time
        localStorage.setItem('sw', true);
        location.reload();
    }
}).catch((error) => {
    console.log('Error: ', error);
});

As a result, the contents of your iframe will have actual cookies in the document.cookie.

PS: In my case, all endpoints were on different domains

iframe not reading cookies in Chrome

2 Answers