Cookies: Lectura y Escritura en JavaScript

Estructura de una Cookie

Una cookie tiene un nombre, un valor, y varios atributos opcionales. El formato básico es nombre=valor, seguido opcionalmente por atributos separados por punto y coma.

Los atributos de una cookie controlan su comportamiento y seguridad. Expires define cuándo expira la cookie, Max-Age define cuántos segundos vive la cookie, Domain y Path limitan el alcance de la cookie, Secure indica que solo se envíe por HTTPS, y HttpOnly previene el acceso desde JavaScript.

Tipos de Cookies

Hay diferentes tipos de cookies según su propósito y atributos. Las cookies de sesión expiran cuando se cierra el navegador, mientras que las cookies persistentes tienen una fecha de expiración específica. Las cookies de terceros son creadas por dominios diferentes al que visita el usuario.

Las cookies de sesión son útiles para datos temporales como el carrito de compras, mientras que las cookies persistentes son ideales para recordar preferencias del usuario a largo plazo. Las cookies de terceros se usan comúnmente para rastreo y publicidad. Nota importante: las cookies se envían automáticamente con cada solicitud HTTP, lo que puede afectar el rendimiento. localStorage es una alternativa más eficiente para datos que no necesitan ser enviados al servidor.

Leer Todas las Cookies

La forma más simple de leer cookies es acceder directamente a document.cookie. Esto devuelve todas las cookies como una cadena que puedes mostrar al usuario o procesar de alguna forma.

Este método devuelve todas las cookies como una cadena. Para acceder a cookies individuales, necesitas parsear esta cadena y extraer el valor de la cookie específica que buscas.

Leer una Cookie Específica

Para leer una cookie específica, necesitas parsear la cadena de cookies y buscar el nombre de la cookie que deseas. Puedes usar expresiones regulares o métodos de string para extraer el valor.

Esta función busca una cookie específica por su nombre y devuelve su valor. Si la cookie no existe, la función devuelve null. Es importante manejar este caso para evitar errores: siempre verifica si la cookie existe antes de usar su valor. Las cookies pueden ser eliminadas por el usuario o el navegador, por lo que no puedes asumir que siempre estarán disponibles.

Crear una Cookie Básica

La forma más simple de crear una cookie es asignar nombre=valor a document.cookie. Esto crea una cookie de sesión que expirará cuando se cierre el navegador.

Esta cookie se enviará con cada solicitud al mismo dominio y path. Como no tiene atributo Expires o Max-Age, es una cookie de sesión que expirará cuando el usuario cierre el navegador.

Cookie con Expiración

Para crear una cookie persistente, debes especificar cuándo debe expirar usando el atributo Expires o Max-Age. Expires define una fecha específica, mientras que Max-Age define cuántos segundos debe vivir la cookie.

El atributo Max-Age es más flexible que Expires porque define la duración en segundos en lugar de una fecha específica. Esto es útil cuando quieres que la cookie expire después de un cierto período de tiempo, como 7 días o 30 días.

Cookie con Atributos de Seguridad

Los atributos de seguridad como Secure, HttpOnly y SameSite son fundamentales para proteger las cookies contra ataques como XSS y CSRF. Secure indica que la cookie solo se envíe por HTTPS, HttpOnly previene el acceso desde JavaScript, y SameSite controla si la cookie se envía con solicitudes de sitios de terceros.

El atributo SameSite tiene tres valores: Strict (más seguro, solo mismo sitio), Lax (permite navegaciones de nivel superior), y None (cualquier sitio, requiere Secure). Importante: las cookies con HttpOnly no pueden ser leídas desde JavaScript usando document.cookie - esto previene ataques XSS, pero significa que no puedes acceder a estas cookies desde el lado del cliente.

• <strong>Secure:</strong> Solo enviar por HTTPS, nunca por HTTP
• <strong>HttpOnly:</strong> No accesible desde JavaScript (previene XSS)
• <strong>SameSite=Strict:</strong> Solo solicitudes del mismo sitio
• <strong>SameSite=Lax:</strong> Permite navegaciones de nivel superior
• <strong>SameSite=None:</strong> Cualquier sitio (requiere Secure)

Eliminar una Cookie Específica

Para eliminar una cookie específica, asignas una cookie con el mismo nombre, dominio y path, pero con el atributo Expires establecido a una fecha en el pasado.

Es importante incluir el mismo dominio y path que la cookie original. Si la cookie fue creada con un dominio o path específico, debes especificar los mismos atributos para eliminarla correctamente.

Eliminar Todas las Cookies

Para eliminar todas las cookies del dominio actual, puedes iterar sobre todas las cookies y eliminarlas una por una. Esto es útil cuando quieres limpiar todas las cookies del usuario, por ejemplo, al cerrar sesión.

Este método obtiene todas las cookies, las divide en pares nombre=valor, y elimina cada cookie asignando una fecha de expiración en el pasado. Es una forma efectiva de limpiar todas las cookies del dominio actual. Como buena práctica, siempre elimina las cookies cuando el usuario cierre sesión o cuando ya no sean necesarias: las cookies antiguas pueden ser vulnerables a ataques y ocupan espacio innecesario.

Uso Básico de Cookie Store

La Cookie Store API proporciona los métodos get(), set() y delete() para gestionar cookies. Estos métodos son asíncronos y devuelven promesas, lo que los hace más fáciles de usar en código moderno.

La Cookie Store API es más segura que document.cookie porque proporciona un control más granular sobre los atributos de las cookies. Además, al ser asíncrona, no bloquea el hilo principal del navegador.

Uso Avanzado de Cookie Store

La Cookie Store API permite escuchar cambios en las cookies usando el evento onchange. Esto es útil para aplicaciones que necesitan reaccionar a cambios en las cookies en tiempo real.

El evento onchange se dispara cuando se crea, modifica o elimina una cookie. Esto permite que tu aplicación reaccione a cambios en las cookies sin tener que verificar periódicamente si han cambiado.

Protección contra XSS

El atributo HttpOnly previene que las cookies sean accesibles desde JavaScript en el lado del cliente. Esto protege contra ataques XSS donde un atacante intenta leer las cookies del usuario usando JavaScript malicioso.

Las cookies con HttpOnly no pueden ser leídas desde document.cookie, lo que significa que no puedes acceder a ellas desde JavaScript en el lado del cliente. Sin embargo, el servidor aún puede leerlas y usarlas para autenticación.

Protección contra CSRF

El atributo SameSite controla si las cookies se envían con solicitudes de sitios de terceros. Esto protege contra ataques CSRF donde un atacante engaña al usuario para hacer solicitudes maliciosas a tu sitio.

SameSite=Strict es el valor más seguro y solo envía la cookie con solicitudes del mismo sitio. SameSite=Lax es más permisivo y permite la cookie con navegaciones de nivel superior. SameSite=None permite la cookie con solicitudes de cualquier sitio, pero requiere Secure.

Cookie No Existe

Un error común es intentar leer una cookie que no existe. Esto puede causar que tu aplicación falle o muestre valores incorrectos. Siempre verifica si la cookie existe antes de usar su valor.

Este error ocurre comúnmente cuando el usuario ha eliminado las cookies manualmente o cuando el navegador ha limpiado las cookies. Siempre maneja este caso gracefully proporcionando un valor predeterminado o mostrando un mensaje apropiado.

Problemas de Encoding

Los valores de las cookies deben estar correctamente codificados para evitar errores. Los caracteres especiales como espacios, punto y coma pueden causar problemas si no se codifican correctamente.

La función encodeURIComponent() codifica caracteres especiales en formato URL, lo que es necesario para los valores de las cookies. Al leer las cookies, debes decodificar los valores usando decodeURIComponent().