Credentials y Cookies en Fetch API
Aprende a controlar el envío de credenciales y cookies en solicitudes Fetch, configurando la opción credentials para autenticación segura y manejo de sesiones.
TL;DR - Resumen rápido
- La opción credentials en fetch controla si se envían cookies y headers de autenticación
- Por defecto, fetch NO envía cookies en solicitudes cross-origin (credentials: 'same-origin')
- Usa credentials: 'include' para enviar cookies en solicitudes cross-origin
- Las cookies con SameSite=Strict no se envían en navegaciones cross-site
- Nunca uses credentials: 'include' con orígenes no confiables por seguridad
Introducción a Credentials y Cookies
Cuando trabajas con autenticación en aplicaciones web, es fundamental entender cómo Fetch API maneja el envío de cookies y credenciales. Por defecto, las solicitudes fetch tienen un comportamiento de seguridad que puede sorprenderte: NO envían cookies automáticamente en solicitudes cross-origin. Este diseño protege contra ataques CSRF (Cross-Site Request Forgery) y fugas de datos.
La opción credentials en fetch te permite controlar este comportamiento. Es especialmente importante cuando trabajas con APIs que requieren autenticación basada en cookies, tokens en headers, o cuando necesitas mantener sesiones de usuario entre el frontend y el backend.
- <strong>same-origin</strong>: Solo envía cookies en solicitudes al mismo origen (default)
- <strong>include</strong>: Envía cookies en solicitudes cross-origin
- <strong>omit</strong>: Nunca envía cookies, ni siquiera same-origin
¿Qué es un origen?
Un origen se define por el protocolo, dominio y puerto. Por ejemplo, https://api.ejemplo.com:443 y https://api.ejemplo.com son el mismo origen, pero http://api.ejemplo.com y https://api.ejemplo.com son orígenes diferentes.
Opción credentials en Fetch
La opción credentials se configura en el objeto de opciones de fetch. Esta opción determina si el navegador envía cookies y headers de autenticación (como Authorization) junto con la solicitud. El comportamiento varía según el tipo de solicitud y el valor que configures.
Tipos de credenciales: same-origin
El valor same-origin es el comportamiento por defecto de fetch. Con este valor, las cookies solo se envían cuando la solicitud es al mismo origen. Es la opción más segura para la mayoría de los casos, ya que evita que tus cookies sean enviadas a sitios externos sin tu conocimiento.
En este ejemplo, la primera solicitud al mismo origen envía las cookies de sesión, mientras que la segunda solicitud cross-origin no las incluye. Este comportamiento protege contra ataques donde sitios maliciosos podrían intentar usar tus cookies para acceder a tu cuenta en otros sitios. Aunque same-origin es el valor por defecto, es una buena práctica especificarlo explícitamente en tu código para mayor claridad y mantenibilidad.
Tipo include: envío cross-origin
El valor include hace que fetch envíe cookies y credenciales en todas las solicitudes, incluso cross-origin. Esto es necesario cuando tu frontend y backend están en dominios diferentes pero necesitan compartir la sesión del usuario. Sin embargo, requiere configuración adicional en el servidor (CORS).
Cuando usas credentials: 'include', el servidor debe responder con el header Access-Control-Allow-Credentials: true y especificar el origen exacto en Access-Control-Allow-Origin (no usar wildcard *). Sin esta configuración, el navegador bloqueará la respuesta por seguridad.
Requisito CORS crítico
Si usas credentials: 'include' con Access-Control-Allow-Origin: *, el navegador bloqueará la solicitud. Debes especificar el origen exacto comoAccess-Control-Allow-Origin: https://tu-frontend.com.
Tipo omit: sin credenciales
El valor omit hace que fetch nunca envíe cookies ni credenciales, incluso en solicitudes same-origin. Esto es útil cuando quieres hacer solicitudes anónimas o cuando estás trabajando con APIs que no requieren autenticación.
Este patrón es especialmente útil para solicitudes públicas donde no necesitas mantener la sesión del usuario, como cargar recursos estáticos, hacer pings de analítica, o consultar APIs públicas que no requieren autenticación.
Seguridad y Mejores Prácticas
El manejo de credenciales y cookies requiere atención especial a la seguridad. Un mal uso puede exponer tus usuarios a ataques CSRF, XSS, y otros vectores de ataque. Aquí exploramos las mejores prácticas y casos edge que debes conocer.
Este ejemplo muestra cómo verificar que la respuesta sea exitosa antes de usar los datos, cómo manejar errores de autenticación (401), y cómo limpiar credenciales cuando la sesión expira. El uso de credentials: 'same-origin' por defecto es la opción más segura, ya que evita enviar cookies a orígenes no confiables.
Verificación de origen
Antes de usar credentials: 'include', verifica que el origen del servidor sea confiable. Nunca uses credenciales con orígenes HTTP (no HTTPS) o con dominios que no controlas completamente.
Riesgo de CSRF
El uso de credentials: 'include' aumenta el riesgo de ataques CSRF. Mitiga esto usando tokens CSRF, verificando el origen de las solicitudes, o usando SameSite=Strict en cookies sensibles.
Resumen: Credentials y Cookies en Fetch
Conceptos principales:
- •La opción credentials controla el envío de cookies y headers de autenticación
- •same-origin (default): solo envía cookies en solicitudes al mismo origen
- •include: envía cookies en todas las solicitudes, incluso cross-origin
- •omit: nunca envía cookies, ni siquiera en same-origin
- •SameSite en cookies controla el envío cross-site (Strict/Lax/None)
Mejores prácticas:
- •Usa credentials: 'same-origin' por defecto para máxima seguridad
- •Configura Access-Control-Allow-Credentials: true en el servidor al usar include
- •Especifica el origen exacto en Access-Control-Allow-Origin (no wildcard)
- •Usa SameSite=Strict o Lax en cookies sensibles para mitigar CSRF
- •Verifica respuestas 401 y maneja expiración de sesión apropiadamente