Establecer cookies para solicitudes de origen cruzado

¿Cómo compartir cookies de origen cruzado? Más específicamente, ¿cómo usar el Set-Cookieencabezado en combinación con el encabezado Access-Control-Allow-Origin?

Aquí hay una explicación de mi situación:

Estoy intentando configurar una cookie para una API que se ejecuta localhost:4000en una aplicación web alojada en localhost:3000.

Parece que recibo los encabezados de respuesta correctos en el navegador, pero desafortunadamente no tienen ningún efecto. Estos son los encabezados de respuesta:

HTTP / 1.1 200 OK
Acceso-Control-Permitir-Origen: http: // localhost: 3000
Variar: Origen, Aceptar codificación
Set-Cookie: token = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Edad máxima = 86400; Dominio = localhost: 4000; Ruta = /; Caduca = Martes, 19 de septiembre de 2017 21:11:36 GMT; HttpOnly
Tipo de contenido: aplicación / json; juego de caracteres = utf-8
Longitud del contenido: 180
ETag: W / "b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
Fecha: lun, 18 de septiembre de 2017 21:11:36 GMT
Conexión: mantener vivo

Además, puedo ver la cookie debajo Response Cookiescuando inspecciono el tráfico usando la pestaña Red de las herramientas de desarrollo de Chrome. Sin embargo, no puedo ver que se establezca una cookie en la pestaña Aplicación debajo Storage/Cookies. No veo ningún error de CORS, así que supongo que me falta algo más.

¿Alguna sugerencia?

Actualización I:

Estoy usando el módulo de solicitud en una aplicación React-Redux para emitir una solicitud a un /signinpunto final en el servidor. Para el servidor utilizo express.

Servidor expreso:

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

Solicitud en navegador:

request.post ({uri: '/ signin', json: {userName: 'userOne', contraseña: '123456'}}, (err, response, body) => {
    // haciendo cosas
})

Actualización II:

Estoy configurando encabezados de solicitud y respuesta ahora como loco, asegurándome de que estén presentes tanto en la solicitud como en la respuesta. A continuación se muestra una captura de pantalla. Fíjese en las cabeceras Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methodsy Access-Control-Allow-Origin. Al observar el problema que encontré en el github de Axios , tengo la impresión de que todos los encabezados obligatorios ya están configurados. Sin embargo, todavía no hay suerte ...

Qué necesitas hacer

Para permitir recibir y enviar cookies mediante una solicitud CORS con éxito, haga lo siguiente.

Back-end (servidor): establezca el Access-Control-Allow-Credentialsvalor del encabezado HTTP en true. Además, asegúrese de que los encabezados HTTP Access-Control-Allow-Originy Access-Control-Allow-Headersestén configurados y no con un comodín* .

Para obtener más información sobre cómo configurar CORS en express js, lea los documentos aquí

Front-end (cliente): establezca la XMLHttpRequest.withCredentialsmarca en true, esto se puede lograr de diferentes maneras según la biblioteca de solicitud-respuesta utilizada:

• jQuery 1.5.1 xhrFields: {withCredentials: true}

• ES6 buscar () credentials: 'include'

• axios :withCredentials: true

O

Evite tener que usar CORS en combinación con cookies. Puede lograr esto con un proxy.

Si por alguna razón no lo evites. La solución está arriba.

Resultó que Chrome no configurará la cookie si el dominio contiene un puerto. Configurarlo para localhost(sin puerto) no es un problema. ¡Muchas gracias a Erwin por este consejo!

Nota para el navegador Chrome lanzado en 2020.

Una versión futura de Chrome solo entregará cookies con solicitudes entre sitios si están configuradas con SameSite=Noney Secure.

Entonces, si su servidor backend no configura SameSite = None, Chrome usará SameSite = Lax de manera predeterminada y no usará esta cookie con solicitudes {withCredentials: true}.

Más información https://www.chromium.org/updates/same-site .

Los desarrolladores de Firefox y Edge también quieren lanzar esta función en el futuro.

Especificaciones encontradas aquí: https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8

Para que el cliente pueda leer cookies de solicitudes de origen cruzado, debe tener:

1. Todas las respuestas del servidor deben tener lo siguiente en su encabezado:

   Access-Control-Allow-Credentials: true

2. El cliente debe enviar todas las solicitudes con la withCredentials: trueopción

En mi implementación con Angular 7 y Spring Boot, lo logré con lo siguiente:

Lado del servidor:

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

La origins = "http://my-cross-origin-url.com"parte se agregará Access-Control-Allow-Origin: http://my-cross-origin-url.comal encabezado de respuesta de cada servidor

La allowCredentials = "true"parte se agregará Access-Control-Allow-Credentials: trueal encabezado de respuesta de cada servidor, que es lo que necesitamos para que el cliente lea las cookies.

Lado del cliente:

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

Con esta clase, en realidad, inyecta cosas adicionales a todas sus solicitudes.

La primera parte req = req.clone({ withCredentials: true });, es lo que necesita para poder enviar cada solicitud con withCredentials: trueopción. Esto prácticamente significa que primero se enviará una solicitud de OPCIÓN, para que usted obtenga sus cookies y el token de autorización entre ellas, antes de enviar las solicitudes POST / PUT / DELETE reales, que necesitan este token adjunto (en el encabezado), en orden para que el servidor verifique y ejecute la solicitud.

La segunda parte es la que maneja específicamente un token anti-CSRF para todas las solicitudes. Lo lee de la cookie cuando es necesario y lo escribe en el encabezado de cada solicitud.

El resultado deseado es algo como esto:

La respuesta de Pim es muy útil. En mi caso, tengo que usar

Expires / Max-Age: "Session"

Si es una fecha y hora, incluso si no está vencida, no enviará la cookie al backend:

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

Espero que sea útil para las personas futuras que puedan tener el mismo problema.

Para express, actualice su biblioteca express a 4.17.1la última versión estable. Entonces;

En CorsOption: establezca originsu URL de host local o su URL de producción de frontend y, credentialspor true ejemplo,

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

Establecí mi origen dinámicamente usando el módulo config npm .

Luego, en res.cookie:

Para localhost: no es necesario para establecer y sameSite opción segura del todo, se puede establecer httpOnlyque truepara http cookie para Prevenir XSS ataque y otras útiles opciones dependiendo de su caso de uso.

Para el entorno de producción, debe establecer sameSiteen nonepara la solicitud de origen cruzado y secureen true. Recuerde que sameSitefunciona con la última versión express solo como ahora y la última versión de Chrome solo configura las cookies https, por lo tanto, la necesidad de una opción segura.

Así es como hice el mío dinámico

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