My web app is made so that when a user logs in the server adds a Set-Cookie header to the response, like this:
Set-Cookie:JSESSIONID=1; Path=/myApp/; Secure
On logout I try to delete this cookie on the client (browser), as I don't care if the session was successfully destroyed on the server as long as the cookie is deleted. Any lingering "ghost" sessions will be cleaned up from time to time on the server.
However, my app is unable to delete the JSESSIONID cookie. Say the logout function was called from https://test.myserver.com/myApp/app/index.html#/mySubPage
and the logout function does:
delete $cookies["JSESSIONID"];
$location.path("/login");
The cookie isn't deleted. Refreshing the cookies listing in the "Resources" tab in Chrome Developer Tools shows it's still there. Reloading the login page and refreshing the cookies listing in the "Resources" tab still shows the cookie.
Why can't I delete the cookie from my Javascript client when it's not a HTTPOnly cookie? Is it the path that's causing problems? Shouldn't be, as the script is running on a page included in the cookie's path. Cookies aren't really that difficult to deal with normally, so I'm well aware that there might be something trivial I'm overlooking here - but any help would be much appreciated.
UPDATE:
I had given the wrong path to my app in my original post. It's now edited to reflect the correct path (well, abstractly). It turns out that this was critical information for the question. AngularJS uses the complete relative path of the app as the path attribute of all cookies it creates/deletes, so since our server set the cookie with a path of /myApp/
and the app was running on the relative path of /myApp/app
, Angular was trying to delete the former cookie, which doesn't exist (in order to overwrite or delete an existing cookie the name, domain, and path all need to be identical to those used when creating the cookie).
Your cookie is most likely not being deleted because when you set the new value, it has to match the path and domain of the original cookie you're trying to delete. that "something" value needs to line up with whatever the existing cookies have set.
The solution is to delete the cookie from the server, which will require an HTTP request before the tab is closed. Most JS libraries will use asynchronous HTTP requests, which will cause the tab to be closed before receiving the expired cookie from the server, so asynchronous calls will not work reliably.
Delete a Cookie with JavaScript Just set the expires parameter to a past date: document. cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; You should define the cookie path to ensure that you delete the right cookie.
I suppose you should check the responses from server - maybe they include a 'set cookie' header field that sets the cookie's value.
Here is a Plunker example that illustrates how you can add/change/delete/watch for cookie's value (but without server-side responses that can change cookie values).
But generally, $cookies object is kind of 'proxy object' that is two-way tracked by AngularJS ngCookies module and from one side change its fields when browser's cookies are changed (so you can $watch for changes) but also changes are reflected to browser's real cookies, so you can change this object.
So the only reason why cookies cannot be deleted is that you delete them on browser, and server sets the cookie again and after reloading page it is still there.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With