Setzen Sie Cookies für Cross-Origin-Anfragen

Wie kann man Cookies über den Ursprung hinweg teilen? Genauer gesagt, wie wird der Set-CookieHeader in Kombination mit dem Header verwendet Access-Control-Allow-Origin?

Hier ist eine Erklärung meiner Situation:

Ich versuche, ein Cookie für eine API zu setzen, die localhost:4000in einer Web-App ausgeführt wird, auf der gehostet wird localhost:3000.

Es scheint, dass ich die richtigen Antwortheader im Browser erhalte, aber leider haben sie keine Auswirkung. Dies sind die Antwortheader:

HTTP / 1.1 200 OK
Zugriffskontrolle-Zulassen-Ursprung: http: // localhost: 3000
Variieren: Ursprung, Akzeptieren-Codierung
Set-Cookie: token = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Maximales Alter = 86400; Domain = localhost: 4000; Pfad = /; Läuft ab = Di, 19. September 2017 21:11:36 GMT; HttpOnly
Inhaltstyp: application / json; Zeichensatz = utf-8
Inhaltslänge: 180
ETag: W / "b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
Datum: Montag, 18. September 2017, 21:11:36 Uhr GMT
Verbindung: am Leben bleiben

Außerdem kann ich das Cookie unter sehen, Response Cookieswenn ich den Datenverkehr mithilfe der Registerkarte "Netzwerk" der Chrome-Entwicklertools überprüfe. Ich kann jedoch nicht sehen, dass auf der Registerkarte Anwendung unter ein Cookie gesetzt wird Storage/Cookies. Ich sehe keine CORS-Fehler, daher gehe ich davon aus, dass mir etwas anderes fehlt.

Irgendwelche Vorschläge?

Update I:

Ich verwende das Anforderungsmodul in einer React-Redux-App, um eine Anforderung an einen /signinEndpunkt auf dem Server zu senden. Für den Server benutze ich Express.

Express-Server:

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

Anfrage im Browser:

request.post ({uri: '/ signin', json: {userName: 'userOne', Passwort: '123456'}}, (err, response, body) => {
    // Sachen tun
})

Update II:

Ich setze Anforderungs- und Antwortheader jetzt wie verrückt und stelle sicher, dass sie sowohl in der Anforderung als auch in der Antwort vorhanden sind. Unten ist ein Screenshot. Beachten Sie die Header Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methodsund Access-Control-Allow-Origin. Wenn ich mir das Problem ansehe , das ich bei Axios 'Github gefunden habe , habe ich den Eindruck, dass jetzt alle erforderlichen Header gesetzt sind. Trotzdem gibt es kein Glück ...

Was musst du machen

Gehen Sie wie folgt vor, um das erfolgreiche Empfangen und Senden von Cookies durch eine CORS-Anfrage zu ermöglichen.

Back-End (Server): Setzen Sie den HTTP-Header- Access-Control-Allow-CredentialsWert auf true. Stellen Sie außerdem sicher , dass die HTTP - Header Access-Control-Allow-Originund Access-Control-Allow-Headerseingestellt sind und nicht mit einem Platzhalter* .

Weitere Informationen zum Einstellen von CORS in Express Js finden Sie in den Dokumenten hier

Front-End (Client): Setzen Sie das XMLHttpRequest.withCredentialsFlag auf true. Dies kann je nach verwendeter Request-Response-Bibliothek auf unterschiedliche Weise erreicht werden:

• jQuery 1.5.1 xhrFields: {withCredentials: true}

• ES6 fetch () credentials: 'include'

• Axios :withCredentials: true

Oder

Vermeiden Sie die Verwendung von CORS in Kombination mit Cookies. Sie können dies mit einem Proxy erreichen.

Wenn Sie aus irgendeinem Grund nicht vermeiden. Die Lösung ist oben.

Es stellte sich heraus, dass Chrome das Cookie nicht setzt, wenn die Domain einen Port enthält. Das Einstellen für localhost(ohne Port) ist kein Problem. Vielen Dank an Erwin für diesen Tipp!

Hinweis für Chrome Browser im Jahr 2020 veröffentlicht.

Eine zukünftige Version von Chrome liefert Cookies mit standortübergreifenden Anfragen nur, wenn sie mit SameSite=Noneund gesetzt sind Secure.

Wenn Ihr Backend-Server SameSite = None nicht festlegt, verwendet Chrome standardmäßig SameSite = Lax und verwendet dieses Cookie nicht mit {withCredentials: true} -Anforderungen.

Weitere Informationen unter https://www.chromium.org/updates/same-site .

Firefox- und Edge-Entwickler möchten diese Funktion auch in Zukunft veröffentlichen.

Spezifikation hier zu finden: https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8

Damit der Client Cookies aus Cross-Origin-Anfragen lesen kann, müssen Sie über Folgendes verfügen:

1. Alle Antworten vom Server müssen Folgendes in ihrem Header haben:

   Access-Control-Allow-Credentials: true

2. Der Client muss alle Anfragen mit withCredentials: trueOption senden

Bei meiner Implementierung mit Angular 7 und Spring Boot habe ich Folgendes erreicht:

Serverseitig:

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

Der origins = "http://my-cross-origin-url.com"Teil wird dem Antwortheader Access-Control-Allow-Origin: http://my-cross-origin-url.comjedes Servers hinzugefügt

Der allowCredentials = "true"Teil wird zum Antwortheader Access-Control-Allow-Credentials: truejedes Servers hinzugefügt. Dies ist erforderlich, damit der Client die Cookies lesen kann

Client-Seite:

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);
    }
}

Mit dieser Klasse fügen Sie Ihrer gesamten Anfrage zusätzliches Material hinzu.

Der erste Teil req = req.clone({ withCredentials: true });ist das, was Sie benötigen, um jede Anfrage mit withCredentials: trueOption zu senden . Dies bedeutet praktisch, dass zuerst eine OPTION-Anforderung gesendet wird, sodass Sie Ihre Cookies und das Autorisierungstoken unter ihnen erhalten, bevor Sie die tatsächlichen POST / PUT / DELETE-Anforderungen senden, an die dieses Token angehängt werden muss (im Header) Befehl an den Server, die Anforderung zu überprüfen und auszuführen.

Der zweite Teil behandelt speziell ein Anti-CSRF-Token für alle Anforderungen. Liest es bei Bedarf aus dem Cookie und schreibt es in den Header jeder Anfrage.

Das gewünschte Ergebnis ist ungefähr so:

Pims Antwort ist sehr hilfreich. In meinem Fall muss ich verwenden

Expires / Max-Age: "Session"

Wenn es sich um eine dateTime handelt, wird der Cookie auch dann nicht an das Backend gesendet, wenn er nicht abgelaufen ist:

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

Ich hoffe, es ist hilfreich für zukünftige Menschen, die möglicherweise das gleiche Problem haben.

Aktualisieren Sie für Express Ihre Express-Bibliothek auf 4.17.1die neueste stabile Version. Dann;

In CorsOption: Stellen Sie originzu Ihrer lokalen Host - URL oder Frontend Produktion URL und credentialszum true Beispiel

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

Ich setze meinen Ursprung dynamisch mit dem Modul config npm .

Dann in res.cookie:

Für localhost: Sie überhaupt nicht einstellen sameSite und sichere Option benötigen, können Sie festlegen können , httpOnlyum truefür HTTP - Cookie zu Verhindern , dass XSS - Angriff und andere nützliche Optionen je nach Anwendungsfall.

Für Produktionsumgebung, müssen Sie festlegen , sameSiteum nonefür Cross-Origin - Anfrage und securenach true. Denken Sie daran, sameSitefunktioniert nur mit der neuesten Express-Version, da die neueste Chrome-Version nur Cookies setzt https, sodass eine sichere Option erforderlich ist.

So habe ich meine dynamisch gemacht

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