web-dev-qa-db-ja.com

AngularJSの$ cookiesではcookieを削除できません

私のWebアプリは、ユーザーがサーバーにログインしたときに、次のようにSet-Cookieヘッダーを応答に追加するように作成されています。

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

ログアウト時に、クライアント（ブラウザー）でこのCookieを削除しようとします。Cookieが削除されている限り、サーバーでセッションが正常に破棄されたかどうかは気にしません。残っている「ゴースト」セッションは、サーバー上で随時クリーンアップされます。

しかし、私のアプリはJSESSIONID Cookieを削除できません。ログアウト関数がhttps://test.myserver.com/myApp/app/index.html#/mySubPageから呼び出され、ログアウト関数が実行するとします。

delete $cookies["JSESSIONID"];
$location.path("/login");

Cookieは削除されません。 Chromeデベロッパーツールの[リソース]タブにあるCookieリストを更新すると、まだそこにあることが示されます。ログインページを再読み込みして、[リソース]タブにあるCookieリストを更新すると、Cookieが表示されます。

HTTPOnly Cookieではないのに、JavaScriptクライアントからCookieを削除できないのはなぜですか？問題の原因となっているのはパスですか？ Cookieのパスに含まれているページでスクリプトが実行されているため、そうするべきではありません。 Cookieは通常、それほど扱いにくいものではないので、ここで見落としがちな些細なことがあるかもしれないことは承知しています。

更新：

元の投稿でアプリに間違ったパスを指定していた。これで、正しいパスを反映するように編集されました（まあ、抽象的に）。これは質問にとって重要な情報であることがわかりました。 AngularJSは、作成/削除するすべてのCookieのパス属性としてアプリの完全な相対パスを使用します。これは、サーバーが/myApp/のパスでCookieを設定し、アプリが/myApp/app、Angularは、存在しない以前のCookieを削除しようとしました（既存のCookieを上書きまたは削除するには、名前、ドメイン、パスがすべて同じである必要があります） Cookieの作成時に使用されます）。

javascriptcookiesangularjssession-cookies
15
Joe Dyndale

サーバーからの応答を確認する必要があると思います。おそらく、Cookieの値を設定する 'set cookie'ヘッダーフィールドが含まれています。

以下は Plunkerの例 で、Cookieの値を追加/変更/削除/監視する方法を示しています（ただし、Cookieの値を変更できるサーバー側の応答はありません）。

しかし一般的に、$ cookiesオブジェクトは一種の「プロキシオブジェクト」であり、AngularJS ngCookiesモジュールによって双方向で追跡され、ブラウザーのCookieが変更されると（片方から変更を$ watchできるように）、フィールドも変更されますが、変更はブラウザの実際のCookieなので、このオブジェクトを変更できます。

したがって、Cookieを削除できない唯一の理由は、ブラウザでCookieを削除したことであり、サーバーがCookieを再設定し、ページを再ロードした後もCookieが残っています。

11
Valentyn Shybanov

削除するCookieのCookieドメインに注意してください。複数のサブドメイン（静的リソース用、API用など）を使用している場合、問題は、間違ったドメインのCookieを削除しようとしていることである可能性があります。

選択したブラウザの開発者ツールでCookieを確認してください。問題のある、削除するCookieに設定されているドメインが何であれ、removeメソッドのoptionsパラメーターでそれを指定します。

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

セキュリティのヒント： JavaScriptを介してセッションIDを削除しても、サーバー上のセッションは削除されません。セッションIDがリークすると、セッションが固定される可能性があります。 APIのログアウトエンドポイントを呼び出してCookieを削除し、サーバーでセッションを完全にクリアして、再利用できないようにすることをお勧めします。

5
2upmedia

更新での回答は正しいようです：Angular $cookieStoreは、パスの値が現在のパスと同じであるCookieでのみ機能します。

それをだます方法は この問題 でajsperaによって与えられたソリューションを使用することです：

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

HTMLのヘッド要素に<base href="/">を追加するだけで、その時点で機能します。

代替ソリューションは、Cookieを送信したサーバーを使用してCookieのパスを設定することです。 Node.js Expressでは次のようになります

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

私にとっては、$ cookieStoreが末尾のスラッシュを取り除くように見えるので、両方の方法を試す必要があるかもしれません。

3
srlm