Todo sitio web modernos implementa alguna forma de almacenar información en el navegador. Algo para guardar el estado, el usuario que tiene iniciada sesión en el sitio web, etc. Hay diferentes formas de hacerlo, pero definitivamente las Cookies son la forma más usada. Aquí aprenderás los detalles de qué son exactamente y cómo puedes usarlas, así como los riesgos que giran al rededor de este tema.
¿Qué son las Cookies HTTP?
Para empezar vamos a definir exactamente qué son las Cookies HTTP, también conocidas como Cookies de Sesión o simplemente como Cookies. Básicamente son archivos de texto que son creados y leídos por el navegador para guardar información sobre el estado de la página web.
Estos archivos son guardados en el disco duro del computador y normalmente los podemos encontrar en C:/Users/YourUsernameDirectory/AppData/Roaming/Microsoft/Windows/Cookies, pero puede variar dependiendo de la versión de Windows o si estás usando un MAC. También debes de tener en cuenta que esto depende del navegador que estas usando. Así que te recomiendo que investigues la ubicación de las cookies en internet, especificando tu sistema operativo y el navegador que usas.
Advertencia de seguridad respecto a las Cookies
Algo importante que debes tener en cuenta ese que estos archivos no son encriptados, lo que significa que si alguien tiene acceso a ellos puede leerlos. Esto es principalmente peligroso si obtienen cookies de inicio de sesión que contengan tokens o datos de acceso.
Podría interesarte: Las contraseñas más usadas de este 2020
Como desarrollador debes tener esto en cuento y en la medida de lo posible encriptar la información en código e interpretarla de la misma forma después de recuperarla. Lo sé, es más trabajo, pero tus usuarios te lo agradecerán (o talvez no).
¿Cuándo implementar Cookies en mis sitios web?
Los desarrolladores utilizan utilizamos cookies por diferentes razones, pero todas giran al rededor del mismo propósito: Recordar algo en nuestro sitio. Por ejemplo, imagina que alguien inicia sesión en tu aplicación web, después que esta persona se registre y se cargue la página del home, el sitio web debe recordar al usuario a pesar de estar en otra página.
Definitivamente la principal razón por lo que se utilizan Cookies es la autenticación de usuarios y el almacenamiento de los ID de estos. También pueden usarse para guarda estado de aplicaciones como los productos del carrito en caso de ser una tienda en línea, pero para esta tarea suele usarse otra forma de almacenamiento interno como el localStorage ya qué permite guardar más información.
¿Cómo implementar Cookies en mi sitio web?
Las Cookies funcionan como un conjunto de clave:valor. Similar a un campo de un archivo JSON. El navegador usara el valor «clave» para acceder al «valor» almacenado en esa Cookie específica.
La forma de implementarlo depende mucho del lenguaje que estes utilizando para programar tu sitio web. En este artículo usaremos dos ejemplo, aprenderemos a usarlo en PHP y también en Javascript, ya que son los lenguajes más usados para crear aplicaciones o páginas web. ¿Te parece si empezamos con PHP?
Cookies en PHP
Este lenguaje de programación es utilizado en millones de sitios web, algunos dicen que está muriendo, pero yo personalmente no lo creo. En cambio sigue creciendo y mejorando constantemente. Se mantiene en la batalla y cada vez recupera más mercado antes sus contrincantes que lo habían dejado obsoleto.
Podría interesarte: PHP: debería aprenderlo este 2021
Crear una Cookie en PHP
Para crear una Cookie en PHP puro es muy sencillo (luego cada Framework de programación puede tener su forma interna de hacerlo) solo tienes que hacer referencia a una función que ya existe en el entorno de PHP: setcookie( ). Un ejemplo de uso sería:
<?php $cookie_name = "usuario"; $cookie_value = "John Smith"; setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 día ?>
En este código estamos creando una cookie que tiene como clave la palabra «usuario» y el valor al que dicha clave hace referencia es «John Smith». Los demás valores son:
1) time( ) que hace referencia a la fecha actual y le sumamos 30 días (este tiempo debe ser proporcionado en segundos). Puedes solo agregar 3600 * 2 para agregar una cookie que caduque en 2 horas por ejemplo.
2) «/» esto hace referencia a el lugar donde será usada la Cookie, o una forma más clara de explicarlo sería decir que define en qué ruta puede ser usada la Cookie. El valor proporcionado en este caso, permite usarla en cualquier lugar del sitio web. Pero si se manda un «/admin/» solo podrá usarse en paginas que estén bajo esa ruta o sean hijas de ella.
Al ejecutarse este código se creará la Cookie, pero no sirve de mucho si no podemos recuperar esta información de alguna manera, así que:
Recuperar el valor de una Cookie
Para recuperar el valor de una Cookie, necesitas saber la clave de dicha Cookie, en nuestro ejemplo usamos la variable $cookie_name que contiene el valor «usuario». Quiere decir que la clave es «usuario», podemos enviar esta clave en texto plano, pero suelen usarse variables para facilitar futuras modificaciones en el código.
Sabiendo esto, solo tienes que hacer referencia a dicha Cookie, invocando una variable de entorno global de PHP que se llama $_COOKIE y que contiene todas las Cookies que creemos. Solo tenemos que llamar esta variable y entre corchetes [ ] colocamos la clave de la Cookie que queremos leer. Así:
<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>
En el código primero verificamos si existe la Cookie que necesitamos. Esto es necesario para evitar error que pueden llegar a afectar, por ejemplo, si es la primera vez que un usuario visita nuestro sitio web, la cookie no va a existir, entonces no tiene sentido intentar leerla.
Si existe basta con llamarla y representarla como si fuera una variable común y corriente. En el ejemplo la estoy usando directamente en lo que se va a mostrar, pero también puedes asignar el valor a una variable para no tener que estar escribiendo todo el llamado, claro que también depende del funcionamiento que estás buscando obtener.
Modificar una Cookie en PHP
En algunas ocaciones tendrás que modificar le valor de una Cookie, por ejemplo, si alguien quieres ampliar la fecha de caducidad. Por estos motivos tenemos que aprender a modificar Cookies.
Para hacer esto no es tan complicado, simplemente se trata de sobreescribir una cookie existente. Usamos la misma función que se usa para crearlas, simplemente tenemos que enviar la misma clave de la Cookie que queremos modificar. Veamos un ejemplo:
<?php $cookie_value = "Luigi"; setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day ?>
Es exactamente como si estuvieras creando una Cookie nuevo, pero enviando una clave de la cookie que quieres modificar.
Eliminar una Cookie en PHP
Entes que nada hay que aclarar que las Cookies no se eliminan, las Cookies caducan. Así que para «eliminar» una Cookie solo tienes que modificarla enviando un tiempo de caducidad en el pasado. Por ejemplo:
$cookie_name = "usuario"; $cookie_value = ""; setcookie($cookie_name, "", 1, "/");
Al enviar un valor 1 en el tiempo de caducidad, la Cookie pasará de estar activa a estar caduca. Es decir que la Cookie ya no existirá. Esto es importante hacerlo cuando se cierra sesión o cuando ya no necesitamos los valores.
Cookies en Javascript
Cuando estamos usando Javascript para construir nuestro sitio web, podemos acceder a las cookies usando un objeto que ya viene incluido en la variable document. Manipulando este objeto ya podemos tener acceso a las cookies la que vendrán en una cadena de texto con cada cookie separada por un punto y coma ; pero es un solo valor. Vamos a tenerlo más claro cuando veamos el código.
Creando una cookie con Javascript
Para crear una Cookie con javascript tenemos que enviar una cadena de texto con toda la información requerida para crearla. También puedes enviar solo la clave y el valor, pero no lo recomiendo porque cuestiones de seguridad.
document.cookie = "username = Santa; expires=Thu, 24 Dec 2020 12:00:00 UTC; path=/";
Algo importante a tener en cuenta (por cuestiones obvias) es la fecha de expiración de la cookie, puedes escribir la fecha, pero también puedes usarla una variable con un formato de fecha adecuado para tener más control. Por ejemplo:
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();
Otra cosa importante que debes tener en mente es que no puedes guardar valores que contengan comas, puntos, espacios en blanco u otros elementos extraños. Si necesitas guardar este tipo de valores puedes usar una función de Javascript que convierte los valores en un formato que si puede interpretarse. Esta función es: encodeURIComponent( ) aquí un ejemplo de uso:
<html><body>
<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>
Como puede ver, este ejemplo es un poco más complejo, pero lo importante está en la línea 6 y en la línea 15. Todo lo demás es código Javascript que tienes que usar siempre que quieras leer una cookie. Te explico:
En la línea 15 estamos recuperando el objeto document.cookie, pero este objeto contiene las cookies como una cadena de texto, así que tenemos que convertirla en un en un Array usando la función split y separando por ; esto nos va a devolver un Array de strings, cada elemento del array debería contener algo parecido a «username=John». Luego solo tenemos que buscar coincidencias buscando el nombre de la Cookie que necesitamos.
En conclusión
El uso de Cookies es una herramienta poderosa y sabiendo usarla puede mejorar muchísimo la experiencia de uso para nuestros usuarios en la web, sin embargo debes tener en cuenta los factores necesarios para asegurar la seguridad de la información. Por ejemplo, sería un gran error guardar datos de una tarjeta de crédito en una Cookie y mucho más si luego se te olvida eliminar esa Cookie.
Bueno, eso es todo lo que tengo que decir de las Cookies por el momento, espero que les haya gustado el artículo pero sobretodo, espero que les haya servido. Si tienes alguna duda puedes dejarlo en los comentarios y con gusto estaré contestando. Un abrazo y hasta la próxima.