Javascript 无法使用 AngularJS 的 $cookies 删除 cookie

Can't delete cookie with AngularJS's $cookies

提问by Joe Dyndale

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 标头，如下所示：

Set-Cookie:JSESSIONID=1; Path=/myApp/; Secure

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.

注销时，我尝试在客户端（浏览器）上删除此 cookie，因为只要删除 cookie，我就不关心会话是否在服务器上成功销毁。任何挥之不去的“幽灵”会话将不时在服务器上进行清理。

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#/mySubPageand the logout function does:

但是，我的应用程序无法删除 JSESSIONID cookie。假设 logout 函数被调用，https://test.myserver.com/myApp/app/index.html#/mySubPage并且 logout 函数执行：

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.

cookie 不会被删除。刷新 Chrome 开发者工具中“资源”选项卡中的 cookie 列表显示它仍然存在。重新加载登录页面并刷新“资源”选项卡中的 cookie 列表仍会显示 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.

当它不是 HTTPOnly cookie 时，为什么我不能从我的 Javascript 客户端中删除 cookie？是路径导致问题吗？不应该，因为脚本正在 cookie 路径中包含的页面上运行。通常情况下，Cookie 并没有那么难处理，所以我很清楚我在这里忽略了一些微不足道的东西 - 但任何帮助都将不胜感激。

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).

我在原来的帖子中给了我的应用程序错误的路径。现在编辑它以反映正确的路径（好吧，抽象地）。事实证明，这是该问题的关键信息。AngularJS 使用应用程序的完整相对路径作为它创建/删除的所有 cookie 的路径属性，因此由于我们的服务器设置了 cookie 的路径/myApp/并且应用程序在 的相对路径上运行/myApp/app，Angular 试图删除前者cookie，它不存在（为了覆盖或删除现有的 cookie，名称、域和路径都需要与创建 cookie 时使用的相同）。

回答by Valentyn Shybanov

I suppose you should check the responses from server - maybe they include a 'set cookie' header field that sets the cookie's value.

我想您应该检查来自服务器的响应 - 也许它们包含一个设置 cookie 值的“设置 cookie”标头字段。

Here is a Plunker examplethat illustrates how you can add/change/delete/watch for cookie's value (but without server-side responses that can change cookie values).

这是一个Plunker 示例，它说明了如何添加/更改/删除/监视 cookie 的值（但没有可以更改 cookie 值的服务器端响应）。

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.

但一般来说，$cookies 对象是一种“代理对象”，由 AngularJS ngCookies 模块双向跟踪，并且在浏览器的 cookie 更改时从一侧更改其字段（因此您可以 $watch 更改）但更改也会反映到浏览器的真实 cookie，因此您可以更改此对象。

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.

所以无法删除cookie的唯一原因是您在浏览器上删除了它们，服务器再次设置了cookie，并且在重新加载页面后它仍然存在。

回答by 2upmedia

Be aware of the cookie domain of the cookie you want to delete. If you're working with multiple subdomains (i.e. one for static resources, another for the api) your problem could be that you're trying to delete a cookie for the wrong domain.

请注意您要删除的 cookie 的 cookie 域。如果您使用多个子域（即一个用于静态资源，另一个用于 api），您的问题可能是您试图删除错误域的 cookie。

Have a look at your cookies with your browser's developer tool of choice. Whatever domain is set for the cookie you want to delete that you're having problems with, specify it in the options parameter to the remove method.

使用您选择的浏览器开发工具查看您的 cookie。无论为您要删除的 cookie 设置了哪个域，但您遇到了问题，请在 remove 方法的 options 参数中指定它。

$cookies.remove('JSESSIONID', {domain: 'domain.tld'});

SECURITY TIP:Deleting the session ID via Javascript doesn't delete the session on the server. If your session IDs leak you could suffer from session fixation. It would be better to delete the cookie via calling a logout endpoint in your API which would clear the session completely on the server so that it can't be re-used.

安全提示：通过 Javascript 删除会话 ID 不会删除服务器上的会话。如果您的会话 ID 泄漏，您可能会受到会话固定的影响。最好通过调用 API 中的注销端点来删除 cookie，这将完全清除服务器上的会话，使其无法重复使用。

回答by srlm

The answer that you gave in the update seems to be correct: Angular $cookieStorecan only work on cookies whose path value is the same as the current path.

您在更新中给出的答案似乎是正确的：Angular$cookieStore只能处理路径值与当前路径相同的 cookie。

The way to trick it is to use the solution given by ajspera on this issue:

欺骗它的方法是使用 ajspera 在这个问题上给出的解决方案：

<head>
  <base href="/">
</head>

Simply add <base href="/">to your head element of the HTML, and at that point it works.

只需添加<base href="/">到 HTML 的 head 元素，就可以工作了。

The alternative solution is to set the path of the cookie using the server that sent it. In Node.js Express that looks like

另一种解决方案是使用发送它的服务器设置 cookie 的路径。在 Node.js Express 中看起来像

res.cookie('specialCookie', 'special!', {path: '/myApp'});

Note that for me it seems like $cookieStore strips out the trailing slash, so you may need to try it both ways.

请注意，对我来说， $cookieStore 似乎去掉了尾部斜杠，因此您可能需要同时尝试两种方法。