Deleting cookie: how to get its path (and domain)?

Question

Various articles and SO answers suggest that deleting cookie via JS should be done like this:

document.cookie = cookieName + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';

or if we need to specify domain/path, like this:

document.cookie = cookieName + "=" +
    (path   ? `;path=${path}` : "") +
    (domain ? `;domain=${domain}` : "") +
    ";expires=Thu, 01 Jan 1970 00:00:01 GMT";

Now, in a non-root location (like https://classic.tiddlywiki.com/upgrade/) a more complicated situation takes place. If you open it and type document.cookie in console, you'll get one value (with no domain, path or expires specified):

TiddlyWikiClassicOptions=chkRegExpSearch:%22false%22 chkCaseSensitiveSearch:%22false%22 chkIncrementalSearch:%22true%22 chkAnimate:%22true%22 chkSaveBackups:%22true%22 chkAutoSave:%22false%22 chkGenerateAnRssFeed:%22false%22 chkSaveEmptyTemplate:%22false%22 chkOpenInNewWindow:%22true%22 chkToggleLinks:%22false%22 chkHttpReadOnly:%22true%22 chkForceMinorUpdate:%22false%22 chkConfirmDelete:%22true%22 chkInsertTabs:%22false%22 chkUsePreForStorage:%22true%22 chkDisplayInstrumentation:%22false%22 chkRemoveExtraMarkers:%22false%22 txtBackupFolder:%22%22 txtEditorFocus:%22text%22 txtMainTab:%22Timeline%22 txtMoreTab:%22moreTabAll%22 txtMaxEditRows:%2230%22 txtFileSystemCharSet:%22UTF-8%22 txtTheme:%22%22 txtUserName:%22YourName%22

and writing in console

document.cookie = 'TiddlyWikiClassicOptions=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';

doesn't remove the cookie (or change its value) (document.cookie gives the same). Moreover, writing

document.cookie = 'TiddlyWikiClassicOptions=lalala';

doesn't change the existing cookie, but rather addes another one with the same name:

TiddlyWikiClassicOptions=lalala; TiddlyWikiClassicOptions=chkRegExpSearch:%22false%22 chkCaseSensitiveSearch:%22false%22 chkIncrementalSearch:%22true%22 chkAnimate:%22true%22 chkSaveBackups:%22true%22 chkAutoSave:%22false%22 chkGenerateAnRssFeed:%22false%22 chkSaveEmptyTemplate:%22false%22 chkOpenInNewWindow:%22true%22 chkToggleLinks:%22false%22 chkHttpReadOnly:%22true%22 chkForceMinorUpdate:%22false%22 chkConfirmDelete:%22true%22 chkInsertTabs:%22false%22 chkUsePreForStorage:%22true%22 chkDisplayInstrumentation:%22false%22 chkRemoveExtraMarkers:%22false%22 txtBackupFolder:%22%22 txtEditorFocus:%22text%22 txtMainTab:%22Timeline%22 txtMoreTab:%22moreTabAll%22 txtMaxEditRows:%2230%22 txtFileSystemCharSet:%22UTF-8%22 txtTheme:%22%22 txtUserName:%22YourName%22

That's what I get in clean Chrome. I've also tried that in Vivaldi with installed HTML5 Storage Manager All in One (Chrome extension) and it shows the same, except for the case when 2 cookies are present: while console gives the same line as above (on document.cookie), the extension shows

This doesn't happen at https://classic.tiddlywiki.com/ (deleting/editing works as expected).

Now, I figured that to delete the initial cookie, I had to do

document.cookie = 'TiddlyWikiClassicOptions=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';

and if I added the lalala one, I also had to do

document.cookie = 'TiddlyWikiClassicOptions=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';

to remove the second one.

I wonder, how can I determine which path should I use? document.cookie seems to be silent about the "scope" of each cookie. Or is this something introduced by design and I always have to know which cookie was assigned for which path?

PS I've seen a post which makes me think that there's the same problem about domains (it's in Russian), so I wonder how to get the domain assosiated with the cookie as well.

Answer 1

If you don't know the (sub)domain and/or the path of the cookie, try expiring all combinations.

var hostname = window.location.hostname;
var pathname = window.location.pathname;
var i = -1;
do {
  var domain = hostname.substr(i+1);
  var j = 0;
  do {
    var path = pathname.substr(0,j+1);
    var cookie = 'TiddlyWikiClassicOptions=; path='+path+'; domain='+domain+'; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    console.log(cookie);
    // stacksnippets throws an exception... uncomment to set cookie.
    //document.cookie = cookie;
  } while ((j = pathname.indexOf('/', j+1)) != -1)
} while ((i = hostname.indexOf('.', i+1)) < hostname.lastIndexOf('.'));

Answer 2

Here's my implementation of the dana's idea (deleting cookie for each path+domain pair):

function deleteCookieFromAllScopes(cookieName)
{
    var domainParts = window.location.hostname.split('.').reverse();
    var topLevelDomain = domainParts.shift();
    var domains = [];
    for(let domainPart of domainParts)
    {
        let prevDomain = domains.slice(-1)[0] || topLevelDomain;
        domains.push(domainPart + '.' + prevDomain);
    }

    var path = window.location.pathname;
    var paths = ['/'], pathLength = 1, nextSlashPosition;
    while( (nextSlashPosition = path.indexOf('/', pathLength)) != -1 )
    {
        pathLength = nextSlashPosition + 1;
        paths.push(path.substr(0, pathLength));
    }

    for(let path of paths)
        for(let domain of domains)
            document.cookie = `${cookieName}=; path=${path}; domain=${domain}; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
}

It's longer no doubt, but much more readable I think. Suggestions of improvements are welcome.

Here's a modification for a special case of cookies of a page opened via file: scheme or on the localhost domain:

function deleteCookieFromAllPaths(cookieName)
{
    var path = window.location.pathname;
    var paths = ['/'], pathLength = 1, nextSlashPosition;
    while( (nextSlashPosition = path.indexOf('/', pathLength)) != -1 )
    {
        pathLength = nextSlashPosition + 1;
        paths.push(path.substr(0, pathLength));
    }

    for(let path of paths)
        document.cookie = `${cookieName}=; path=${path}; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
}