See cookies in Chrome devtools set from an ajax XHR request

Question

I have a page on localhost:4000 that has a cookie set by the server. The page also contains a script that successfully makes an XHR request back to the server upon the page loading. This XHR request response sets a second cookie. I can only see the non-XHR cookie in Chrome devtools under Application (tab) > Storage (menu group on left) > Cookies > http://localhost:4000.

I can see the XHR cookie returned from the server in the Network tab (which if the page is loaded a second time shows both the non-XHR and XHR cookies are correctly included in the XHR request:

Request Cookies
xhr_cookie  valueABC
from_homepage   value123
Response Cookies
xhr_cookie  valueABC

So the XHR cookie is being persisted somewhere but I can't see it in Chrome's devtools.

Answer 1

Not the answer for Chrome but a work around is to use Firefox and enable the Storage "inspector" from the gear wheel on the web developer pane. https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

Answer 2

Same Origin request were fine.

Cross origin request has some limitations.

File:1.php:

<?php
    setcookie("cookie_name_1", "cookie_value_1", time() + (86400 * 30), "/"); 
?>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://foo.ir/2.php', true);
    xhr.withCredentials = true;
    xhr.onreadystatechange = function() {
      if(this.readyState == xhr.DONE) {
       get_res();
      }
    }
    xhr.send(null);

    function get_res(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://foo.ir/2.php?is_set', true);
        xhr.withCredentials = true;
        xhr.onload = function () {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                   console.log(xhr.responseText);
                }
            }
        };
        xhr.send(null);
    }
</script>

File:2.php

<?php
header('Access-Control-Allow-Origin: http://localhost');
header('Access-Control-Allow-Credentials: true');

if(isset($_GET["is_set"])){
    if(isset($_COOKIE["cookie_name_2"]))
        echo "cookies are set:".$_COOKIE["cookie_name_2"];
    else
        echo "cookies not set";
}else
    setcookie("cookie_name_2", "cookie_value_2", time() + (86400 * 30), "/");
?>

• Cross-origin cookies are working:You need to allow third party cookies to be set in browser setting
• I couldn't find where third party cookies are stored.
• Chrome Won't show cookies and wont effect the real website.
• Firefox & Edge save cookies in the third party website storage thus it will effect real third party website.

More information can be found on Here

According to the XMLHttpRequest Level 1 and XMLHttpRequest Level 2, this particular response headers falls under the "forbidden" response headers that you can obtain using getResponseHeader(), so the only reason why this could work is basically a "naughty" browser

Answer 3

This should show up as a seperate "Cookies" tab when you inspect the XHR request. It's easy to miss because the tab only shows when withCredentials is set to true.

Answer 4

In Chrome, disable "Site isolation":

1. Go to 'chrome://flags/#site-isolation-trial-opt-out
2. Set Disable site isolation to Disabled
3. Relaunch

For further details see: https://blog.ermer.de/2018/06/11/chrome-67-provisional-headers-are-shown