Angulars nie wysyła cookies

Question

Cześć.

Mam problem w sowim projekcie z wysyłanie nagłówków cookies przez Angulara 9.

Klasa dodająca do nagłówek authenticaation i cookies: 

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

  constructor(
    private authenticationService: AuthenticationServiceService,
    private cookiesService: CookieService,
    ) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const cookies = this.cookiesService.get('2fa_auth');
    const currentUser = this.authenticationService.currentUserValue;

    if (currentUser && currentUser.token) {

      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
          Cookie: `2fa_auth=${cookies};`,
        }
      });
    }
    
    return next.handle(req);
  }

}

i mój module odpowiedzialny za podpięcie tej klasy:

providers: [
    {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
    {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
    CookieService
  ],

Problem jest taki, że po wysłaniu zapytania nie ma w nagłówku w ogóle cookies.

Przyznam, że nie wiem gdzie robię błąd. Z góry dziękuje za wskazówkę.

Comments

Co znajduje się w zmiennej req po sklonowaniu (linia 17) - czy tam jest ciastko? Czy w wysłanym zapytaniu jest nagłówek Authorization? Czy w konsoli są błędy?

---

W lini 17 jest Ciastko i Authorization(dla JWT api).

 

 

---

Odpaliłem na szybko jeszcze firefoxa i wywalił mi taki błąd :

Próba ustawienia zabronionego nagłówka „Cookie” została zablokowana.

Trochę tego nie kumam gdyż teraz patrzę po różnych apkach to wszystkie maja nagłówek Cookies. Więc nie wiem czemu zabroniony ?

---

Chrome nie rzuca podobnego błędu?

 

---

Dopiero jak od nowa odpaliłem chrome to też coś takiego wywaliło :

Refused to set unsafe header "Cookie"

 

---

Czy to zapytanie nie jest CORS'owe? Poza tym, Angular zdaje się domyślnie nie przesyłać ciastek, co można wymusić propertisem withCredentials (metoda clone, której używasz przyjmuje ten parametr w obiekcie).

---

I czy to zapytanie nie jest CORS'owe? 

Zgadza się.

  Angular zdaje się domyślnie nie przesyłać ciastek, co można wymusić

Czy to ze względu na bezpieczeństwo ? 

ustawiłem tą wartość:

 if (currentUser && currentUser.token) {

      req = req.clone({
        withCredentials: true,
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
          Cookie: `auth=${cookies};`,
        }
      });
    }

    return next.handle(req);

ale dalej mi wywala ten błąd i nie chce podpiąć cookie.

---

Zgadza się.

Sądząc po dodatkowym nagłówku Authorization, nie jest to tzw. zapytanie proste, które wysyłane jest z preflight'em, więc przeglądarka może nie chcieć wysłać ciastek, jeśli serwer nie zwróci nagłówka Access-Control-Allow-Credentials - sprawdź czy taki jest ustawiany.

Czy to ze względu na bezpieczeństwo ? 

Nie jestem pewien (trzeba by poszukać w kodzie źródłowym), ale jeśli Angular swój serwis do HTTP opiera o natywne XHR lub Fetch, to w tych API opcje withCredentials/credentials są domyślnie włączone dla zapytań same-origin.

---

nagłówki w sytuacji Creditionali nie mogą być symbolem wieloznacznym w kwestii  Access-Control-Allow-Origini Access-Control-Allow-Headers 

---

Znalazłem swój błąd. Problemem było źle ustawiony nagłówek.

@michal_php, z ciekawości: który nagłówek był źle ustawiony?

---

Problem dokładnie leżał na back-enddzie. Brakowało dodanie Cookies do allow_headers Nie wiem czemu na postmanie działo bez tego a na angularze nie.

---

no to jest tpo co pisałem ze problem bedzie po stronie konfiguracji bo parametr Authorization 

withCredentials: true

juz z automatu powinien dodawac cookie 

---

Zgadza się problem był na bac-endzie. Tylko dziwne, że postman bez problemu wysyłał a cookie a angular już nie.

---

Możliwe że dlatego, że Postman nie ma mechanizmu Same-Origin-Policy (albo jest domyślnie wyłączony) w przeciwieństwie do przeglądarki. Dlatego Postmanowi nie przeszkadza brak nagłówków Access-Control-* z serwera.

---

W sumie racja to miało by sens.

Chciałbym wam podziękować za pomoc i poświęcony czas w rozwiązaniu tego problemu.

Answer 1

Pytanie takie czy w lini nie przypadkiem, nie powinno usunąc się średnika ? 

    Cookie: `2fa_auth=${cookies};`,

 

Comments

withCredentials, Set-Cookiew odpowiedzi zostanie ustawiona przez klienta, ale klient nadal nie wyśle Cookie w żądaniu (które zostało ustawione przy poprzednim żądaniu)
https://angular.io/guide/deprecations#http

withCredentials: true. -> to Ci praktycznie nie działa, lub konfiguracja Credentionali jest błędna bo wystarczy to dodać  :) żeby uzyskać cookie.
Nie wiem jak wygląda konfiguracja Interceptora. Błąd wynika z konfiguracji creditionali w takim razie, skoro przy użyciu  opcji true nie ma cookie domyślnie.

---

withCredentials, Set-Cookiew odpowiedzi zostanie ustawiona przez klienta, ale klient nadal nie wyśle Cookie w żądaniu (które zostało ustawione przy poprzednim żądaniu)

Nie bardzo rozumiem co masz na myśli mówiąc w poprzednim  żądaniu ? 

withCredentials: true. -> to Ci praktycznie nie działa, lub konfiguracja Credentionali jest błędna bo wystarczy to dodać  :)

Ale co wystarczy dodać ? 

---

  withCredentials: true

jeśli napisałbyś poprawną konfiguracje, automatycznie cookies były by dodawane.  jeśli zastosoujesz Credentials na true. 

---

withCredentials: true

 Przecież mam w kodzie już  withCredentials: true :

req = req.clone({
        withCredentials: true,
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
        }
      });
    }

Czy to jest w takim razie nie poprawne ?

jeśli zastosoujesz Credentials na true

Rozumiem, że Ci chodzi o  withCredentials ? 

jeśli napisałbyś poprawną konfiguracje

Co jest nie poprawnego w mojej konfiguracji bo nie kumam  

---

mówiłem, że niepoprawnie ustawiłeś konfiguracje dla zapisywania dla listy uwierzytelnienia [withCredentials ] przez co  nie bylo cookie