6
votes

Les cookies disparaissent après la redirection

J'ai:

1) Une application côté client qui a son propre domaine: http://client.com a>

2) Une application côté serveur qui a un domaine distinct: http://server.com a>

Maintenant,

le scénario est:

1) Ouverture de http://client.com/home dans le navigateur, qui affiche une page HTML.

2) http://client.com/home redirige vers http: // serveur .com / login

3) http://server.com/login a> stocke un cookie 'auth' et envoie une instruction de redirection à http://client.com/welcome

Réponse:

Contrôle d'accès-Autoriser-Origine: *

Connexion: keep-alive

Longueur du contenu: 104

Type de contenu: text / html; charset = utf-8

Date: mer.16 janvier 2019 10:47:11 GMT

Emplacement: http://client.com/welcome

Set-Cookie: auth = 1479da80-197c-11e9-ba74-59606594e2fb; Chemin = /

Varier: Accepter

X-Powered-By: Express

4) Le navigateur reçoit la réponse, qui contient le cookie 'auth'

5) Le navigateur se redirige vers http://client.com/welcome

6) Le cookie 'auth' est envoyé à http://client.com/welcome

Request:

Cookie: auth = 1479da80-197c-11e9-ba74-59606594e2fb

7) http://client.com/welcome renvoie du HTML mais ne renvoie pas le cookie 'auth'

 entrez la description de l'image ici

 entrez la description de l'image ici

8) http://client.com/welcome envoie une requête AJAX à http://server.com/data (CORS activé), mais le cookie 'auth' n'est pas envoyé

9) http://server.com/data ne reconnaît pas l'utilisateur car il n'y a pas de cookie

Le côté client est une application angulaire hébergée par Node.js

Modifier:

Comme s uggested, j'ai ajouté à la réponse de server.com:

Access-Control-Allow-Credentials: true

mais rien n'a été changé.

Code côté client pertinent:

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) => {


4 commentaires

6) Le cookie 'auth' est envoyé à http://client.com/welcome il doit être Set-Cookie: ... pour qu'il soit renvoyé dans réponse en tant que Cookie . Pouvez-vous publier les en-têtes de demande / réponse du flux complet?


@marekful - terminé


Élaborez l'étape 3, s'il vous plaît. Comment exactement server.com définit les cookies. Afficher les en-têtes complets.


@Styx - J'ai mis à jour la question


3 Réponses :


4
votes

Vous devez utiliser l'option withCredentials lors de l'envoi de votre requête ajax à votre http://server.com et votre serveur.com doit avoir le Access-Control-Allow-Credentials défini sur true.

Example code in Angular.JS client
import {RequestOptions, Request, RequestMethod} from '@angular/http';

const options = new RequestOptions({
  method: RequestMethod.Post,
  url: 'https://google.com',
  withCredentials: true
});

Plus d'informations ici: https://developer.mozilla.org/en- US / docs / Web / HTTP / Headers / Access-Control-Allow-Credentials

Example code in Node.JS server:

var cors = require('cors');
var corsOptions = {
    origin: '*',
    credentials: true };

app.use(cors(corsOptions));

Plus d'informations ici: https://angular.io/api/http/RequestOptions

Vérifiez également ceci strong>: https://github.com/angular/angular/issues/24283 - il semble qu'une version particulière d'Angular ait eu des problèmes avec cet indicateur, donc à moins que vous n'utilisiez une version plus à jour, vous peut avoir besoin de définir l'en-tête explicitement.

Le raisonnement est que, à moins que le serveur ne dise explicitement au client "J'accepterai les cookies (définis précédemment sur mon domaine) transmis par un autre domaine " - accepter les cookies serait un problème de sécurité. Plus d'informations ici: https://en.wikipedia.org/wiki/Cross-site_request_forgery


5 commentaires

J'ai mis à jour la question. J'utilise la version 7.1 d'angular. Est-ce une bonne version?


Votre cookie est-il configuré pour être sécurisé? Utilisez-vous https?


Non, j'utilise http


Votre code mis à jour inclut le withCredentials comme en-tête. C'est une option de demande qui ajoute l'en-tête. Pouvez-vous s'il vous plaît l'utiliser correctement? (Consultez l'exemple de code que j'ai fourni)


Assurez-vous également que votre navigateur est configuré pour définir des cookies tiers



0
votes

De la spécification Access-Control-Allow-Origin: Pour les demandes sans informations d'identification, la valeur littérale "" peut être spécifiée, sous forme de caractère générique; *

Essayez d'ajouter un domaine spécifique au champ Access-Control-Allow-Origin .

Je pense que vous devriez utiliser un proxy dans une application angulaire angulaire. Pour plus d'informations, consultez ce lien: https: / /github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md


0 commentaires

2
votes

Votre description de ce qui se passe ne semble pas correcte.

Ce n'est pas (ou du moins ne devrait pas être) ce qui se passe. Lorsque le navigateur demande http://server.com/login et récupère dans la réponse un Set -Cookie , le cookie est défini et limité au domaine server.com , même si la réponse est une redirection. Si vous voyez le cookie 'auth' envoyé à client.com , c'est un cookie que client.com a précédemment défini.

Quoi qu'il en soit, il semble que ce qui vous tient vraiment à cœur est

Il y a plusieurs raisons pour lesquelles cela peut arriver.

  • CORS . Vous avez mentionné que CORS était activé, mais pour le bien des autres lisant ceci, vous devez avoir les en-têtes CORS suivants définis sur server.com
    • Contrôle d'accès-Autoriser-Origine: http://client.com
    • Access-Control-Allow-Credentials: true
  • Notez que vous ne pouvez pas vous en passer en utilisant un caractère générique pour Access-Control-Allow-Origin lorsque vous envoyez des informations d'identification. Notez également que l'origine doit être une correspondance exacte, y compris le schéma (http ou https). En pratique, ce que font généralement les serveurs est de lire l'en-tête Origin de la requête, de le comparer à une liste blanche et, si cela est autorisé, de copier la valeur d'en-tête Origin de la requête à l'en-tête Access-Control-Allow-Origin dans la réponse.
  • Vous devez définir xhr.withCredentials = true dans votre requête XHR. (Voir MDN pour plus de détails.)

Ensuite, après avoir fait tout cela, vous avez un autre obstacle sur votre chemin. Parce que vous êtes sur client.com et que vous essayez d'envoyer un cookie à server.com , le cookie server.com est considéré comme un "troisième- cookie de fête. AFAIK tous les principaux navigateurs ont un paramètre qui bloque les cookies tiers pour la confidentialité, car ils sont le plus souvent utilisés par les trackers pour collecter des données marketing à des fins publicitaires. Je pense que la plupart d'entre eux bloquent les cookies tiers par défaut, mais je n'en suis pas sûr. Bien sûr, de nombreuses personnes ont configuré leur navigateur pour bloquer les cookies tiers.

Vous devez donc dire à vos visiteurs de configurer leur navigateur pour autoriser les cookies tiers de server.com .

BTW, il n'est pas sûr de définir un cookie sur une redirection vers un domaine différent. Bien que cela soit autorisé selon la spécification AFAIK, il y a eu des problèmes avec la prise en charge du navigateur. Voir, par exemple, ce bug Chrome .


1 commentaires

Merci. En fait, j'ai réussi à résoudre ce problème avec un indice de Mavi Domates et d'autres recherches que j'ai faites par moi-même, avant de voir votre réponse. J'ai donc décidé d'accorder la prime à Mavi, mais j'ai accepté votre réponse car elle est plus précise.