Luego de buscar en diferentes repositorios y sitios al concluir nos encontramos con la solución que te enseñamos a continuación.
Solución:
Supongo que tienes
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://localhost
El riesgo es que cualquier servicio que se ejecute en la máquina de un usuario pueda pasar por alto la Política del mismo origen para su sitio.
Entonces, si tiene una URL REST como
https://example.com/User/GetUserDetails
Un servicio malicioso o comprometido que se ejecuta en la computadora del usuario podría realizar esa solicitud a través del navegador del usuario y luego obtener detalles sobre el usuario, porque su cookie de autenticación se pasará con la solicitud.
Ahora, podría argumentar que un servicio malicioso que se ejecuta en la computadora del usuario podría simplemente tomar la cookie de autenticación de su navegador directamente y luego realizar la solicitud. Sin embargo, si el servicio tiene algunos defectos propios (por ejemplo, XSS), esto podría permitir que otro sitio comprometa al usuario a través de su servicio REST (evil.example.org --XSS-> localhost -CORS-> example.com/User/GetUserDetails).
Otro escenario que podría ponerlo en riesgo si el usuario está ejecutando un proxy inverso local para acceder a algo. Esto permitiría que el sitio de destino comprometiera al usuario a través del suyo, en caso de que el sitio de destino sea malicioso o esté comprometido. Esto se debe a que el usuario estaría accediendo al sitio de destino con un dominio de localhost.
Si realmente necesita hacer esto, le sugiero que tenga una cuenta de desarrollador especial para su servicio REST que cuando se accede agrega el Access-Control-Allow-Origin: https://localhost encabezado a sus solicitudes solamente. De esa manera, no pone en riesgo a otros usuarios porque sabe que solo está ejecutando el servidor front-end solo en https://localhost por lo que no puede verse comprometido por su configuración CORS abierta.
Otra forma puede ser usar algo como noonewouldusethis2859282.localhost para su copia local del front-end. Entonces puede agregar con seguridad el Access-Control-Allow-Origin: https://noonewouldusethis2859282.localhost header porque nadie más usaría esto y estaría a salvo de los ataques CORS.
No hay ningún problema de seguridad al agregar localhost a su configuración de CORS en producción.
Añadiendo algo como:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
El navegador ahora puede realizar llamadas desde localhost: 3000 a su servicio, sin pasar por la Política de Mismo Origen. Cualquier desarrollador web ahora puede crear una página web que se ejecute desde su máquina local para realizar una llamada a su API, lo cual es útil para su equipo. Sin embargo, localhost no es una dirección enrutable públicamente: no puede compartir un enlace a http: // localhost: 3000. Recuerde, CORS es solo una medida de seguridad para los navegadores web que realizan llamadas a su sitio. Cualquiera puede seguir llamando a su punto final a través de llamadas de servidor a servidor (o un script). Sin embargo, deberías evitar:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Esto hará que su sitio esté disponible para todos los sitios web. En cambio, bloquee su Access-Control-Allow-Origin a los sitios que lo necesiten. Desafortunadamente, Access-Control-Allow-Origin solo toma un valor único, por lo que debe procesar la solicitud HOST del lado del servidor y devolver los válidos (más información).
Autenticación al llamar a un punto final CORS
Cuando realiza una solicitud CORS que requiere autenticación, debe agregar un Authorization encabezado a la llamada, y no pasar cookies – fetch hace esto de forma predeterminada. Por lo tanto, cualquier llamada realizada a un punto final de COR se haría a través de javascript agregando un token al encabezado que solo tiene para esa sesión. Si almacena el token a través de una cookie o almacenamiento local, tenga en cuenta que solo se puede acceder desde ese dominio (más información). Su punto final de producción y localhost no tendrán las mismas cookies y almacenamiento local compartido.
Deshabilitar CORS en Chrome
Por último, puede realizar una solicitud CORS desde Chrome a cualquier sitio iniciando Chrome con --disable-web-security (más información).
Por último, Google Chrome solo permite que los trabajadores del servicio se ejecuten en sitios web seguros y http: // localhost. Si elige crear un local.example.com para el desarrollo, deberá crear un certificado SSL y realizar toda la configuración en su máquina local para que funcione. Recomiendo usar http: // localhost: XXXX.