Ustaw pliki cookie dla żądań z różnych źródeł

Jak udostępniać pliki cookie z różnych źródeł? Dokładniej, jak używać Set-Cookienagłówka w połączeniu z nagłówkiem Access-Control-Allow-Origin?

Oto wyjaśnienie mojej sytuacji:

Próbuję ustawić plik cookie dla interfejsu API, który działa localhost:4000w aplikacji sieci Web, która jest hostowana localhost:3000.

Wygląda na to, że otrzymuję odpowiednie nagłówki odpowiedzi w przeglądarce, ale niestety nie mają one znaczenia. Oto nagłówki odpowiedzi:

HTTP / 1.1 200 OK
Access-Control-Allow-Origin: http: // localhost: 3000
Różne: pochodzenie, akceptacja-kodowanie
Set-Cookie: token = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Max-Age = 86400; Domena = localhost: 4000; Ścieżka = /; Wygasa = wt., 19 września 2017 21:11:36 GMT; HttpOnly
Content-Type: application / json; charset = utf-8
Długość treści: 180
ETag: W / "b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
Data: pon., 18 września 2017 r., 21:11:36 czasu GMT
Połączenie: utrzymuj przy życiu

Co więcej, widzę plik cookie pod, Response Cookiesgdy sprawdzam ruch za pomocą karty Sieć w narzędziach programistycznych Chrome. Jednak nie widzę, aby plik cookie został ustawiony na karcie Aplikacja poniżej Storage/Cookies. Nie widzę żadnych błędów CORS, więc zakładam, że brakuje mi czegoś innego.

Jakieś sugestie?

Aktualizacja I:

Używam modułu żądania w aplikacji React-Redux do wysyłania żądania do /signinpunktu końcowego na serwerze. Do serwera używam express.

Serwer ekspresowy:

res.cookie ('token', 'xxx-xxx-xxx', {maxAge: 86400000, httpOnly: true, domain: 'localhost: 3000'})

Żądanie w przeglądarce:

request.post ({uri: '/ signin', json: {nazwa_użytkownika: 'userOne', hasło: '123456'}}, (err, response, body) => {
    // Robi coś
})

Aktualizacja II:

Ustawiam teraz nagłówki żądań i odpowiedzi jak szalone, upewniając się, że są one obecne zarówno w żądaniu, jak i odpowiedzi. Poniżej zrzut ekranu. Zauważ, nagłówki Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methodsi Access-Control-Allow-Origin. Patrząc na problem, który znalazłem na githubie Axiosa , mam wrażenie, że wszystkie wymagane nagłówki są już ustawione. Jednak nadal nie ma szczęścia ...

Co musisz zrobić

Aby umożliwić pomyślne odbieranie i wysyłanie plików cookie przez żądanie CORS, wykonaj następujące czynności.

Back-end (serwer): ustaw Access-Control-Allow-Credentialswartość nagłówka HTTP na true. Upewnij się również, że nagłówki HTTP Access-Control-Allow-Origini Access-Control-Allow-Headerssą ustawione, a nie z symbolem wieloznacznym* .

Aby uzyskać więcej informacji na temat ustawiania CORS w express js, przeczytaj dokumentację tutaj

Front-end (klient): ustaw XMLHttpRequest.withCredentialsflagę na true, można to osiągnąć na różne sposoby w zależności od używanej biblioteki żądanie-odpowiedź:

• jQuery 1.5.1 xhrFields: {withCredentials: true}

• Pobieranie ES6 () credentials: 'include'

• axios :withCredentials: true

Lub

Unikaj używania CORS w połączeniu z plikami cookie. Możesz to osiągnąć za pomocą proxy.

Jeśli z jakiegoś powodu nie unikaj tego. Rozwiązanie jest powyżej.

Okazało się, że Chrome nie ustawi ciasteczka, jeśli domena zawiera port. Ustawienie go na localhost(bez portu) nie stanowi problemu. Wielkie dzięki dla Erwina za tę wskazówkę!

Uwaga dotycząca przeglądarki Chrome wydana w 2020 roku.

Przyszła wersja przeglądarki Chrome będzie dostarczać pliki cookie z żądaniami między witrynami tylko wtedy, gdy są ustawione za pomocą SameSite=Nonei Secure.

Jeśli więc Twój serwer zaplecza nie ustawi SameSite = None, Chrome użyje domyślnie SameSite = Lax i nie będzie używać tego pliku cookie z żądaniami {withCredentials: true}.

Więcej informacji https://www.chromium.org/updates/same-site .

Programiści Firefox i Edge również chcą udostępnić tę funkcję w przyszłości.

Specyfikację można znaleźć tutaj: https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8

Aby klient mógł odczytywać pliki cookie z żądań między źródłami, musisz mieć:

1. Wszystkie odpowiedzi z serwera muszą mieć w nagłówku:

   Access-Control-Allow-Credentials: true

2. Klient musi wysłać wszystkie żądania z withCredentials: trueopcją

W mojej implementacji z Angular 7 i Spring Boot osiągnąłem to dzięki następującym rozwiązaniom:

Po stronie serwera:

@CrossOrigin(origins = "http://my-cross-origin-url.com", allowCredentials = "true")
@Controller
@RequestMapping(path = "/something")
public class SomethingController {
  ...
}

origins = "http://my-cross-origin-url.com"Część będzie dodać Access-Control-Allow-Origin: http://my-cross-origin-url.comdo nagłówka odpowiedzi każdego serwera

allowCredentials = "true"Część będzie dodać Access-Control-Allow-Credentials: truedo nagłówka odpowiedzi każdy serwer, który jest to, czego potrzebujemy, aby klient odczytywanie plików cookie

Strona klienta:

import { HttpInterceptor, HttpXsrfTokenExtractor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from 'rxjs';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

    constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // send request with credential options in order to be able to read cross-origin cookies
        req = req.clone({ withCredentials: true });

        // return XSRF-TOKEN in each request's header (anti-CSRF security)
        const headerName = 'X-XSRF-TOKEN';
        let token = this.tokenExtractor.getToken() as string;
        if (token !== null && !req.headers.has(headerName)) {
            req = req.clone({ headers: req.headers.set(headerName, token) });
        }
        return next.handle(req);
    }
}

Dzięki tej klasie faktycznie dodajesz dodatkowe elementy do wszystkich swoich żądań.

Pierwsza część req = req.clone({ withCredentials: true });dotyczy tego, czego potrzebujesz, aby wysłać każde zapytanie z withCredentials: trueopcją. W praktyce oznacza to, że najpierw zostanie wysłane żądanie OPCJI, aby uzyskać między nimi pliki cookie i token autoryzacyjny, przed wysłaniem rzeczywistych żądań POST / PUT / DELETE, które wymagają dołączenia do nich tego tokena (w nagłówku), w zlecić serwerowi weryfikację i wykonanie żądania.

Druga część to ta, która w szczególności obsługuje token anty-CSRF dla wszystkich żądań. W razie potrzeby odczytuje je z pliku cookie i zapisuje w nagłówku każdego żądania.

Pożądany wynik jest mniej więcej taki:

W przypadku wersji ekspresowej zaktualizuj bibliotekę Express do 4.17.1najnowszej stabilnej wersji. Następnie;

W CorsOption: Zestaw origindo adresu URL lub adresu URL localhost produkcji frontend i credentialsna true przykład

  const corsOptions = {
    origin: config.get("origin"),
    credentials: true,
  };

Moje pochodzenie ustawiam dynamicznie za pomocą modułu config npm .

Następnie w res.cookie:

Dla localhost: nie musisz w ogóle ustawiać tej samej witryny i bezpiecznej opcji, możesz ustawić httpOnly , aby truena http cookies do ataku Zapobieganie XSS i innych przydatnych opcji , w zależności od przypadku użycia.

W środowisku produkcyjnym należy ustawić sameSitena noneżądanie między źródłami i securenatrue . Pamiętaj, że sameSitedziała z ekspresową najnowszą wersją tylko teraz, a najnowsza wersja Chrome ustawia tylko pliki cookie https, co wymaga bezpiecznej opcji.

Oto jak uczyniłem mój dynamiczny

 res
    .cookie("access_token", token, {
      httpOnly: true,
      sameSite: app.get("env") === "development" ? true : "none",
      secure: app.get("env") === "development" ? false : true,
    })

Odpowiedź Pima jest bardzo pomocna. W moim przypadku muszę użyć

Expires / Max-Age: "Session"

Jeśli jest to data i godzina, nawet jeśli nie wygasła, nadal nie wyśle ​​pliku cookie do zaplecza:

Expires / Max-Age: "Thu, 21 May 2020 09:00:34 GMT"

Mam nadzieję, że będzie to pomocne dla przyszłych osób, które mogą napotkać ten sam problem.