web-dev-qa-db-ja.com

リダイレクト後にCookieが消える

私が持っています：

1）独自のドメインを持つクライアント側アプリ： http://client.com

2）別のドメインを持つサーバー側アプリ： http://server.com

さて、

シナリオは次のとおりです。

1）ブラウザで http://client.com/home を開くと、HTMLページが表示されます。

2） http://client.com/home リダイレクト先 http://server.com/login

3） http://server.com/login Cookie'auth 'を保存し、リダイレクト命令を http://client.com/welcome に送信します

応答：

Access-Control-Allow-Origin：*

接続：キープアライブ

コンテンツの長さ：104

コンテンツタイプ：text/html; charset = utf-8

日付：2019年1月16日水曜日10:47:11 GMT

場所： http://client.com/welcome

Set-Cookie：auth = 1479da80-197c-11e9-ba74-59606594e2fb;パス= /

変更：受け入れる

X-Powered-By：Express

4）ブラウザはCookie'auth 'を含む応答を受信します

5）ブラウザは自分自身を http://client.com/welcome にリダイレクトします

6）「auth」Cookieが送信されます http://client.com/welcome

リクエスト：

クッキー：auth = 1479da80-197c-11e9-ba74-59606594e2fb

7） http://client.com/welcome HTMLを返しますが、Cookie'auth 'は返しません

enter image description here

enter image description here

8） http://client.com/welcome AJAXリクエストを http://server.com/data （CORS有効）、ただしCookie'auth 'は送信されません

9） http://server.com/data Cookieがないため、ユーザーを認識しません

クライアント側は、Node.jsによってホストされるangular app

編集：

提案されているように、server.comの応答に次のように追加しました。

Access-Control-Allow-Credentials：true

しかし、何も変更されていません。

関連するクライアント側のコード：

const headerOptions = new HttpHeaders({
      'Content-Type': 'application/json', 'withCredentials': 'true', 'Access-Control-Allow-Origin': 'true', 'Access-Control-Allow-Credentials': 'true'
    });

this.httpClient.get<any>(this.baseUrl + "data", { headers: headerOptions }).subscribe((res) => {
node.jsangularhttpredirectcookies
5
Alon

何が起こっているかについてのあなたの説明は正しくないようです。

それは起こっていることではありません（または少なくともそうあるべきではありません）。ブラウザが http://server.com/login を要求し、応答にSet-Cookieヘッダーが返されると、応答がリダイレクトであっても、Cookieが設定され、server.comドメインに制限されます。 client.comに送信された「auth」Cookieが表示されている場合、それはclient.comが以前に設定したCookieです。

とにかく、あなたが本当に気にかけているのは

これが発生する理由はたくさんあります。

  • [〜＃〜] cors [〜＃〜] 。 CORSが有効になっているとおっしゃいましたが、他の人がこれを読むために、次のCORSヘッダーをserver.com [.____に設定する必要があります。]
    • Access-Control-Allow-Origin: http://client.com
    • Access-Control-Allow-Credentials: true
  • 資格情報を送信するときは、Access-Control-Allow-Originにワイルドカードを使用することはできません。また、オリジンはスキーム（httpまたはhttps）を含めて完全に一致する必要があることに注意してください。実際には、サーバーが一般的に行うことは、リクエストのOriginヘッダーを読み取り、ホワイトリストと照合し、許可されている場合は、リクエストからAccess-Control-Allow-OriginヘッダーにOriginヘッダー値をコピーすることです。応答で。
  • XHRリクエストでxhr.withCredentials = trueを設定する必要があります。 （詳細については、 [〜＃〜] mdn [〜＃〜] を参照してください。）

それをすべて行った後、もう1つのハードルがあります。 client.comを使用していて、Cookieをserver.comに送信しようとしているため、server.comCookieは「サードパーティ」Cookieと見なされます。 AFAIKのすべての主要なブラウザには、プライバシーのためにサードパーティのCookieをブロックする設定があります。これは、トラッカーが広告用のマーケティングデータを収集するために最も頻繁に使用されるためです。それらのほとんどはデフォルトでサードパーティのCookieをブロックすると思いますが、それはわかりません。確かに、多くの人がサードパーティのCookieをブロックするようにブラウザを設定しています。

したがって、訪問者にserver.comからのサードパーティCookieを許可するようにブラウザを設定するように指示する必要があります。

ところで、別のドメインへのリダイレクトにCookieを設定することは安全ではありません。 AFAIK仕様では許可されていますが、ブラウザのサポートに問題があります。たとえば、これを参照してください Chromeのバグ 。

1
Old Pro

Access-Control-Allow-Origin仕様から：資格情報のないリクエストの場合、リテラル値 ""をワイルドカードとして指定できます; *

Access-Control-Allow-Originフィールドに特定のドメインを追加してみてください。

angular angular appでプロキシを使用する必要があると思います。詳細については、次のリンクを確認してください： https://github.com/angular/ angle-cli/blob/master/docs/documentation/stories/proxy.md

0
tdev