Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle.
Continúa leyendo para averiguar cómo implementarlas y administrarlas - ¡si estás buscando código!

Entendiendo los COOKIES HTTP - ¿Qué son?

Se inventaron las cookies y otros tipos como el almacenamiento local y el almacenamiento de sesiones para facilitar su experiencia en línea guardando la información de navegación. Dado que los navegadores y servidores web utilizan el protocolo HTTP, que no tiene estado, eso era necesario para que el sitio web "recordará" información de estado como el inicio de sesión, los botones pulsados por el usuario, las preferencias del sitio, los artículos añadidos al carro de la compra, los campos de formulario previamente introducidos, etc.

La cookie HTTP, también llamada web cookie, cookie de internet, cookie de navegador o simplemente cookie es un dato almacenado en el ordenador del usuario por el navegador. Hacen la mayoría de las funciones esenciales en los sitios web modernos, todas las funciones estaban acostumbradas, como la autenticación automática - el servidor solicitará ese estado de la cookie. No es necesario exigir al usuario que se registre cada vez, esta es quizás la función más común y útil de las cookies.

¿Cómo funcionan las cookies?

Las cookies son archivos creados por los sitios web, el servidor envía algunos datos al navegador del visitante, entonces el navegador puede aceptar la cookie. Si lo hace, se almacena como un registro de texto plano en el ordenador del visitante en una carpeta como esta por ejemplo (en windows) C:UsersYourUsernameDirectoryAppDataRoamingMicrosoftWindowsCookies, pero también puede ser otro directorio.
Más tarde, si un visitante llega al mismo servidor (digamos otra página del sitio), el navegador devuelve la cookie y el servidor recupera los valores de la misma.
Normalmente contienen dos bits de datos. Un ID único y un nombre de sitio.
Las cookies están relacionadas con el navegador, lo que significa que son almacenadas por el navegador utilizado y no están disponibles en otro navegador. Si un usuario está navegando en Google Chrome, y de repente cambia a Firefox, no será utilizado por este último, ya que cualquier otro navegador almacenará sus propias cookies. Además, las cookies pueden ser percibidas como temporales (cookies de sesión) o persistentes (cookies virtualmente permanentes).
Podría decirse que las cookies temporales están programadas para caducar cuando el usuario cierra el navegador o abandona el sitio, a diferencia de las cookies persistentes, que permanecen almacenadas en el disco duro del usuario, hasta que son eliminadas.

¿Son las cookies peligrosas?

Si estás preocupado o dices a menudo "No digo que sean extraterrestres, pero..", la mejor manera de resolver tus miedos es aprender más sobre el tema.
Bueno, las cookies no pueden recuperar ningún otro dato que no hayan almacenado en tu ordenador, no pueden acceder a ningún otro archivo.
Las cookies son archivos que puedes borrar. También puedes rechazar las cookies en tu navegador, pero probablemente no quieras hacerlo, porque eso limitaría realmente la calidad de tu experiencia en Internet. Sin embargo, puede configurar su navegador para que le pida permiso antes de aceptar una cookie y sólo las acepte de sitios web en los que confíe. Como los datos de las cookies no cambian, las cookies solas no son dañinas. No pueden infectar los ordenadores con virus u otro tipo de malware. Sin embargo, algunos ciberataques pueden secuestrar las cookies y permitir el acceso a tus sesiones de navegación. El peligro radica en su capacidad de rastrear los historiales de navegación de los individuos.

Debido a que las cookies persistentes pueden registrar sus movimientos identificables únicos en línea durante un largo período, a veces se llaman tracking cookies.

El seguimiento de terceros es utilizado frecuentemente por los anunciantes para saber qué sitios web visita y el contenido que ve, así como otra información. Se establecen cuando visita un sitio que contiene un anuncio incrustado de otro sitio web (de terceros). Los anunciantes pueden incrustar anuncios en un gran número de sitios, recopilar la información que sus cookies recogen y utilizarla para enviarle anuncios adaptados a sus intereses.
Por ejemplo, la legislación europea exige que todos los sitios web dirigidos a los estados miembros de la Unión Europea obtengan el "consentimiento informado" de los usuarios antes de almacenar cookies no esenciales en su dispositivo. Por eso se le ocurre que casi no puede ver ningún contenido en su primera visita a los sitios web.

El robo de cookies también es un riesgo que hay que tener en cuenta. Si te conectas a un sitio mientras navegas en una WiFi pública, como las cookies de sesión no están encriptadas. Un hacker podría copiar los datos de la cookie y utilizarlos para hacerse pasar por usted y entrar en su cuenta.

Ventajas y desventajas

Las cookies se envían con cada solicitud, por lo que pueden empeorar el rendimiento (especialmente para las conexiones de datos móviles), por lo que si tienes muchas cookies que son realmente grandes, ralentizará tu solicitud hacia y desde el servidor. Las API modernas para el almacenamiento de clientes son la API de almacenamiento web (localStorage y sessionStorage) y la IndexedDB, que no se envían con cada solicitud.

Las cookies pueden almacenar sólo una cantidad mucho menor de información que las otras dos - la capacidad es de 4kB, pero por ejemplo para fines de autenticación para transportar fichas(tokens) es suficiente.

El almacenamiento local y el almacenamiento de sesiones pueden contener 10 megabytes y 5 megabytes respectivamente.
Las cookies y el almacenamiento local están disponibles para cualquier ventana dentro del navegador, es decir, desde diferentes pestañas, mientras que el almacenamiento de sesiones es sólo para una sola pestaña.
Otra ventaja de las cookies es que tienes un control total sobre la fecha de caducidad de las mismas.
La desventaja de las cookies es que se almacenan en texto plano, por lo que pueden ser leídas y manipuladas fácilmente, lo que no es muy adecuado para almacenar datos sensibles.
Debido a que, en particular, las cookies de seguimiento de terceros pueden utilizarse sin su conocimiento o permiso para elaborar un perfil detallado de usted, puede considerar este seguimiento como una invasión de la privacidad. También puede objetar que se le envíen anuncios dirigidos. Otras personas podrían encontrar estos anuncios encantadores. En la actualidad, el usuario o visitante del sitio suele ser informado de tales procedimientos.

Gestión de cookies en el navegador

La mayoría de los navegadores le permiten controlar la configuración de las cookies, activar o desactivar las cookies, ver lo que ha almacenado y por cuánto tiempo.
Esto, por supuesto, de acuerdo con el navegador utilizado.
En primer lugar, cómo ver las cookies almacenadas existentes (y otro tipo de almacenamiento que puede utilizar una página web) en su navegador: puede habilitar el Inspector de almacenamiento en Herramientas para desarrolladores y seleccionar Cookies en el árbol de almacenamiento.
Puedes abrir el Inspector de almacenamiento seleccionando "Inspector de almacenamiento" en el submenú del desarrollador web en el panel de menús de Firefox /alternativamente presiona F12 y localiza la "pestaña de almacenamiento" o presionando su atajo de teclado Shift + F9 (o el menú de herramientas si muestras la barra de menú o estás en macOS).

Hagámoslo y creemos algunas cookies (Domesticando al monstruo de las cookies)

Las cookies se guardan y se recuperan en pares de nombre-valor como:

• name(nombre) = "usuario" (se requiere al menos 1 parámetro - el nombre de la cookie, tiene sentido, ¿verdad? -El nombre de tu cookie. Usarás este nombre para recuperarlo más tarde.
• value(valor) = "John Smith" El valor que se almacena en tu cookie. Los valores comunes son nombre de usuario(cadena) y última visita(fecha).

Puede haber más campos o banderas:

• Expiration(Expiración): la fecha en que la cookie expirará. Si está en blanco, ocurrirá cuando el visitante salga del navegador (cookie de sesión).
• Domain(Dominio) - el nombre de dominio del sitio
• Path(Ruta) - la ruta al directorio o página web que estableció la cookie. Puede estar en blanco si quieres recuperar la cookie de cualquier directorio o página.
• Secure(Seguro): si este campo contiene la palabra "seguro", la cookie sólo podrá ser recuperada con un servidor seguro; no puede ser transmitida a través de conexiones no cifradas. Se hace añadiendo el indicador de seguridad.
• HttpOnly - con este indicador, no se puede acceder a él desde las API del lado del cliente.

Cookies PHP del lado del servidor

Para crear una cookie, usa la función - setcookie() con sólo el parámetro de nombre requerido. Todos los demás parámetros son opcionales.
Php.net tiene una descripción más detallada.
Sólo podemos almacenar información primitiva en una cookie, no objetos o arreglos.
Nota importante: la función setcookie debe aparecer antes de la etiqueta <html>.

Crear una cookie

setcookie(name, value, expiration, path, domain, security, httponly);

<?php
$cookie_name = "usuario";
$cookie_value = "John Smith";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 día  
?>

Con esto hemos creado una cookie con el nombre "usuario" que tiene el valor "John Smith", expirará después de 30 días y está disponible en todo el sitio web. Si el dominio se establece en '/foo/', la cookie sólo estará disponible en el directorio /foo/ y en todos los subdirectorios como el /foo/bar/ del dominio.

El valor de la cookie se codifica automáticamente con la URL cuando se envía la cookie, y se descodifica automáticamente cuando se recibe (para evitar la codificación de la URL, utilice setrawcookie() en su lugar. Esto no aceptará el valor.)

<?php
$cookie_raw_name = "raw_user";
setrawcookie($cookie_raw_name, time() + (86400 * 30), "/");
?>

Para ver una cookie de datos reales almacenados por el navegador Firefox, están en cookie.sqlite, ubicado en el directorio de su Perfil de Usuario de Mozilla, cómo abrir el formato está por encima del alcance de este artículo.

Recuperar una cookie

Para saber si la cookie está establecida o no, utilice la función isset().
Para recuperar la cookie, use la variable global $_COOKIE

<html><body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
  echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
  echo "Cookie '" . $cookie_name . "' is set!<br>";
  echo "Value is: " . $_COOKIE[$cookie_name];
  echo "<br>";
  echo "Raw cookie value is " . $_COOKIE[$cookie_raw_name];
}
?>
</body></html>

Por primera vez cuando abrimos este simple código html en un navegador, veríamos "Cookie nombrada 'usuario' no está configurada! "Eso es porque la primera vez que este código se ejecuta, hubo una respuesta de su navegador que no contenía nuestra cookie, sólo después de refrescar (pulse F5), la recuperará y el código será diferente, aparecerá "Cookie 'user' is set! El valor es: John Smith ".
También podemos ver la otra cookie - "El valor de la cookie cruda es 1604657135".

Modificar el valor de una cookie

Para modificarlo, vuelva a establecer el valor de la cookie. Es así de fácil.

<?php
$cookie_value = "Luigi";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
?>

Borrar una cookie

Para borrar una cookie, usa la función setcookie() con una fecha de caducidad en el pasado. Un consejo: si has establecido la ruta, también tienes que establecerla cuando elimines la cookie, de lo contrario no funcionará.

//DELETE COOKIE set the expiration date to one hour ago
$cookie_name = "user";
$cookie_value = "";
setcookie($cookie_name, "", 1, "/");

Cookie con JavaScript

JS puede manipular las cookies usando la propiedad cookie del objeto del documento.
En primer lugar, digamos que usamos el código superior para establecer las cookies, en el DOM HTML podemos obtener cookies asociadas al documento actual obteniendo document.cookie, que devolverá todas las cookies en una cadena muy parecida a: cookie1=valor; cookie2=valor; cookie3=valor; así:

<?php
$cookie_name = "user";
$cookie_value = "Luigi";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
?>
<html><body>
<div id="cookies">here will appear cookie data</div>
</body></html>
 
<script>
var getCookies = document.cookie;
document.getElementById("cookies").innerHTML = getCookies;
</script>

Obtendremos "user=Luigi".
Como vimos, si la nueva cookie se añade a document.cookie, las cookies antiguas no se sobrescriben, sino que la nueva cookie se añade al final, así que si lees document.cookie, obtienes una cadena de cadenas como "username=John Doe; username=Santa".
Si quieres encontrar el valor de una cookie especificada, debes escribir una función de JavaScript que busque el valor de la cookie en la cadena de cookies. No hay una forma fácil de mostrar sólo una cookie específica, sino todas a la vez.

Crear una cookie con Javascript

La forma más sencilla de crear una cookie es asignar un valor de cadena al objeto document.cookie. Los múltiples parámetros están separados por un punto y coma (;)

<html><body>
<div id="cookies">here will appear cookie data</div>
</body></html>
 
<script>
document.cookie = "site = Ma-no.org"
var getCookies = document.cookie;
document.getElementById("cookies").innerHTML = getCookies;
</script>

We will get “site=Ma-no.org;”

Ahora añadimos el tiempo de caducidad porque no queremos que la cookie se borre al cerrar el navegador. Tiene que estar en formato UTC.
Y con el parámetro path, podemos establecer la ruta en la que funcionará la cookie. Al establecer "/" le diremos que la cookie estará disponible para todo el sitio.

document.cookie = "username = Santa; expires=Thu, 24 Dec 2020 12:00:00 UTC; path=/";

Las fechas de caducidad se pueden establecer directamente o podemos usar la función de fecha JS con métodos de cadena UTC en ellas.

var date=new Date()
date.setFullYear(2021,0,1)
date.setHours(0 +1) //since we are in GMT+1 zone
date.setMinutes(0)
date.setSeconds(0)
document.cookie = "site = Ma-no.org; expires=" + date.toUTCString();

Esta galleta expira ahora en Fri Jan 01 2021 01:00:00 GMT+0100 (Hora Central Europea).
Si queremos una galleta que nunca expire, debemos fijar la fecha en el futuro, digamos en 200 años.
Cuando se establece una fecha de caducidad, la hora y la fecha son relativas al cliente en el que se establece la cookie, no al servidor.
Aquí hay un ejemplo de una cookie que expirará en 2 días.

var cookieDate = new Date()
var expiration_days = 2
cookieDate.setTime(cookieDate.getTime() + (expiration_days*24*60*60*1000))
document.cookie = "username = John Doe; expires=" + cookieDate.toUTCString()

El valor de una cookie no puede contener comas, punto y coma o espacios en blanco. Si por algún motivo necesita agregar esos caracteres, puede utilizar el método encodeURIComponent() , que codificará esos caracteres en un formato de escritura.
Esta función codifica caracteres especiales. Además, codifica los siguientes caracteres: , / ? : @ & = + $ #

document.cookie = "obľúbení = Čert, Vločka a Pán prsteňov"

Esto puede hacer que las cosas sean impredecibles como puedes ver aquí, esta galleta se maneja como un objeto:

Y ahora obtendremos la cookie específica con la ayuda de esta función, que decodifica la cadena de cookies, para manejar cookies con caracteres especiales. Aquí pueden ver la diferencia en la codificación.

<div id="cookies">here will appear cookie data</div>
<div id="decodedCookie">decoded data</div>
 
</body></html>
<script>
document.cookie = "obľúbení = " + encodeURIComponent("Čert, Vločka a Pán prsteňov")
 
var getAllCookies = document.cookie
document.getElementById("cookies").innerHTML = getAllCookies
document.getElementById("decodedCookie").innerHTML = getCookie('obľúbení');
 
//returns the value of a specified cookie
function getCookie(cookieName) {
  var nameString = cookieName + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var cookieArray = decodedCookie.split(';'); //Split document.cookie on semicolons into an array
  for(var i = 0; i <cookieArray.length; i++) { //Loop through the array
    var cookie = cookieArray[i];
    while (cookie.charAt(0) == ' ') {   
        cookie = cookie.substring(1);  //Read out each value
    }
    if (cookie.indexOf(nameString) == 0) { //If the cookie is found, return the value of the cookie
      return cookie.substring(nameString.length, cookie.length);
    }
  }
  return ""; //If the cookie is not found, return nothing.
}
</script>

Borrar una cookie con Javascript

Para borrar una cookie, configure el parámetro expires a una fecha pasada:

document.cookie = "username = Santa; expires=Tue, 6 Oct 2020 12:00:00 UTC; path=/"

Algunos navegadores no te permiten eliminar una cookie si no especificas la ruta.

Conclusión

Las cookies sirven principalmente para tres propósitos: gestión de la sesión, personalización y seguimiento del comportamiento del usuario.
Hay algunas alternativas a las cookies ya desde hace algún tiempo, pero parece que las cookies están aquí para quedarse. Si quieres saber más sobre las cookies, hay muchas fuentes por ahí.
Con las cookies, los sitios pueden:

• Mantenerte conectado.
• Recordar las preferencias de tu sitio.
• Ofrecerte contenido relevante a nivel local.

Y seamos sinceros. Tienen un nombre genial.

Fuentes de imágenes:

Difference img from teacher Beau Carnes from freecodecamp
Royalty-Free photo: Broken white ceramic bowl with brown cookies | PickPik
Sally makes her own cookie monster cupcakes | Food | Jose Martinez | Flickr