iframe not reading cookies in Chrome

javascript google-chrome iframe cookies cross-domain
40,306

Solution 1

There is a relatively new cookie attribute called SameSite that was being set by my server automatically. Disabling this (while retaining the settings listed in the question) allows the iframe access to its own cookies in Chrome.

See also Chrome feature status & IETF draft

UPDATE Aug 2020

Chrome now blocks cookies without SameSite set, so you need to explicitly set it to samesite=none and secure=true.

Solution 2

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

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; frame-src *; connect-src *; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    </head>
    <body>
        <script>
            const uuidv4 = () => ([1e7]+1e3+4e3+8e3+1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
            const id = localStorage.getItem('id') || uuidv4();
            localStorage.setItem('id', id);
            const iframe = document.createElement('iframe');
            iframe.setAttribute('width', '100%');
            iframe.setAttribute('height', '100%');
            iframe.setAttribute('src', `https://proxy.domain/?proxy_layer_id=${id}`);
            document.body.appendChild(iframe);
        </script>
    </body>
</html>

You proxy server index.php

<?php

error_reporting(E_ALL);
ini_set("display_errors", "1");

$defaultTargetDomain = "target.domain";
$proxyDomain = "proxy.domain/";

$ck = $_COOKIE;
$userAgent = $_SERVER["HTTP_USER_AGENT"] ?? null;
$id = $_GET["proxy_layer_id"] ?? null;
$remoteDomain = $_GET["proxy_layer_domain"] ?? $defaultTargetDomain; // Use the default target domain if no other domain has been specified
$remotePath = $_GET["proxy_layer_path"] ?? null;
$sw = $_GET["proxy_layer_sw"] ?? false;

/* Decode remote domain */
if ($remoteDomain != null) {
    $remoteDomain = urldecode($remoteDomain);
}

/* Decode and parse remote path */
if ($remotePath != null) {
   $_url = parse_url($remotePath);
   $remotePath = $_url["path"]."?".($_url["query"] ?? "");
}

/* Generate service worker if requested */
if ($sw) {
    $sw = file_get_contents("./sw.js");
    $sw = str_replace("%id%", $id, $sw);
    $sw = str_replace("%target%", $remoteDomain, $sw);
    $sw = str_replace("%proxy%", $proxyDomain, $sw);
    header("Content-Type: application/javascript; charset=UTF-8");
    print($sw);
    return;
}

function processCookies(&$cookies = []) {
    foreach ($cookies as $cookie) {
        $values = trim(explode(":", $cookie)[1] ?? "");
        if (strlen($values) < 1) continue;
        $values = explode("; ", $values);
        foreach ($values as $value) {
            list($key, $value) = explode("=", urldecode($value));
            $ck[$key] = $value;
        }
    }
}

/* Generate final target URL */
$site = "https://" . $remoteDomain . $remotePath;

$request = $_SERVER["REQUEST_URI"];

$ch = curl_init();

/* If there was a POST request, then forward that as well*/
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $_POST);
}
curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);
curl_setopt($ch, CURLOPT_URL, $site . $request);
curl_setopt($ch, CURLOPT_HEADER, true);

$headers = getallheaders();

/* Translate some headers to make the remote party think we actually browsing that site */
$extraHeaders = [];
if (isset($headers["Referer"])) {
    $extraHeaders[] = "Referer: " . str_replace($proxyDomain, $remoteDomain, $headers["Referer"]);
}
if (isset($headers["Origin"])) {
    $extraHeaders[] = "Origin: " . str_replace($proxyDomain, $remoteDomain, $headers["Origin"]);
}

/* Forward cookie as it came.  */
curl_setopt($ch, CURLOPT_HTTPHEADER, $extraHeaders);

$cookie = [];

foreach ($ck as $key => $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("<head>", "<head><script>$injection</script>", $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

Share:
40,306
Tyler
Author by

Tyler

Type type type

Updated on September 30, 2021

Comments

  • Tyler
    Tyler over 2 years

    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 <iframe src="https://second-site.com"> (inside of parent)
    • cookie set with
      • path: '/'
      • secure: true
      • httpOnly: false
      • domain: '.second-site.com'

    I control both sites, and I want the iframe to perform an operation within the iframe that requires reading cookies for .second-site.com. 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:

    • Set secure:false or secure:true for the cookie
    • Set sandbox="allow-same-origin allow-scripts" for the iframe, or remove the sandbox attribute

    What is Chrome doing differently, and how can an iframe in Chrome access its own cookies?

  • GregTom
    GregTom about 6 years
    How to disable SameSite attribute?
  • Tyler
    Tyler almost 5 years
    That's going to be specific to whatever server/framework you're using
  • Marco Marsala
    Marco Marsala about 4 years
    Mandatory to set Secure flag too! (simply using HTTPS is not enough)
  • Chris Ruck
    Chris Ruck over 3 years
    This solution no longer works with Chrome 84 release. Please advise.
  • Tyler
    Tyler over 3 years
    @ChrisRuck Updated; now you have to explicitly set SameSite to "None"
  • Marco Marsala
    Marco Marsala over 3 years
    Won’t work again with latest Chrome, setting Secure and SameSite=None with session_cookie_set_Paramus under PHP 7.3
  • Nathan
    Nathan over 3 years
    I did the exact thing, and yet it is not preserving the session. <sessionState cookieSameSite="None" /> <httpCookies sameSite="None" httpOnlyCookies="true" requireSSL="true" /> In my case, I'm not directly trying to access the cookie. the iframe stores a var in session. in subsequent clicks within the iframe, I need to use the session var stored. However, it comes null when I do the ajax call within the first load of iframe too.
  • h00ligan
    h00ligan about 3 years
    Can someone tell me if this still works / works again in 2021? My chrome-version is: 90.0.4430.93
  • François
    François almost 3 years
    I've set the SameSite attribute to none but the cookie is still not showing in my request headers. This is driving me nuts. Chrome version is 90.0.4430.212. Works fine if the page containing the iframe and the iframe content are on the same domain.
  • wowandy
    wowandy over 2 years
    @h00ligan I added an answer, maybe this solution will suit you
  • kklepper
    kklepper about 2 years
    Great! I wasn't too hard to adopt for my case and works perfectly. Thank you. Why was this downvoted?

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

JavaScript errors (localstorage, cookie) loading sandboxed iframe within Chrome Extension
Safari 13+ iframe blocks CORS cookies
What is window.origin?
Get cookies with javascript
Chrome Extension: Open tab, go to url, fill form and submit form
Cookies on cross domain requests
Read IFrame cookie
Unsafe JavaScript attempt to access frame in Google Chrome
Set focus on iframe in Chrome
iframe.contentWindow.document Chrome alternative?