For some reason document.cookie not working

I have a cookie that gets set in the server on a successful logon to a complex PWA. However I am having trouble deleting that cookie from within the browser on log off. In order to test that further I have a (psuedo – by which I mean its still the original index.html, but using web components I can simulate page changes) test page which tries to delete the cookie and then sends a fetch request to the api server (proxied through Nginx) which prints out the cookie if its found.

the code to do this is as follows

  _cookie(e) {
    const before = document.cookie;
    console.log('before"'+before+'"');
    document.cookie = 'PASv5=;Max-Age=-1;Path=/;Secure;HttpOnly';//delete cookie
    const after = document.cookie;
    console.log('after"'+after+'"');
    this._ping(e);
  }
  _ping(e) {
    e.stopPropagation();
    fetch(`/api/ping/0`, {
      credentials: 'same-origin',
      method: 'post',
      headers: new Headers({
        'content-type': 'application/json'
      }),
      body: '{}'
    }).then(response => {
      if (response.ok) {
        this.reply = 'Successful Ping';
      } else {
        this.reply = `Unsucessful Ping status ${response.status}`;
      }
    }).catch(e => {
      this.reply = 'Network error with error' + e.toString()
    });
  }

where the _cookie method is called from a button click.

the console.logs shown here:-

before""     ... test-page.js:130
after""      ... test-page.js:133

In chrome dev tools I can still see the cookie (the one from the server when I originally logged on), but the before and after console.log calls which appear to show nothing, and I can also see the network request with the cookie request attached (AND the server also prints out it saw the ping with the cookie as it was set my the server when I originally logged on)

Its almost as though document.cookie does absolutely nothing.

test-page.js is code which defines a custom-element class (extending LitElement – as are all the custom elements in this PWA). The browser at this stage shows pas.xxx.test/testPage' which has got there by calling windows.location.pushState()`

I can find absolutely nothing that explains what I am seeing in the console.logs (ie effectively no cookies defined) and why my setting the cookie using the code I am does not clear it.

Can someone explain what is happening and why my cookie is not getting deleted.

Answer

It’s probably because you set http only: true when creating the cookie Change the definition in its creation on the server to false and you can delete it through the client

Advertisement

Answer