Un elemento que esta presente en todo momento cuando utilizamos la web, ya seamos desarrolladores o usuarios, es el User-Agent. Y el Header que se crea del mismo también.
Este es un concepto interesante porque se utiliza para 2 conceptos diferentes pero lo suficientemente relacionados: un programa y un header.
Vamos paso a paso.
¿Qué es un User-Agent?
Siendo breves, un User-Agent es un programa de computadora que esta representando a una persona o usuario. El ejemplo más común es el navegador cuando esta conectandose a la web.
Y si bien ese es el más común hay otros ejemplos de user-agents:
- Bots de scrapping
- Gestor de descargas
- Aplicaciones que accesen a la web
*Un bot de scrapping es un programa automatizado que navega por sitios web y extrae información específica de los mismos. Se usa comúnmente para recopilar datos.
*Postman es una plataforma de API, que sirve para construir APIs, administrarlas y hacer testing. Si no la concoes, te recomiendo que le heches un vistazo: https://www.postman.com/
¿Qué es el Header: User-Agent?
Un Header puede ser muchas cosas. Pero nosotros estamos hablando del que es simplemente un dato que se coloca en una petición HTTP.
Por defecto un navegador coloca ciertos headers por default al momento de hacer una petición. Esto con la intención de que el servidor cuente con cierta información adicional acerca de quién esta realizando la petición y como responder a la misma.
De entre todos los headers que se envían hay uno con la llave: User-Agent.
Este header contiene la información del User-Agent que realizó la petición mas información adicional del dispositivo del usuario.
Pero como en todo. Mejor veámoslo en un ejemplo.
Ejemplo de la asignación del valor del header: User-Agent
Si un User-Agent representa una persona o usuario entonces podemos deducir que su uso precisamente es darnos mas información acerca del mismo
Esto lo podemos ver al momento de hacer una petición a un servidor. Hagamos una prueba con la api de Pokemon. PokéAPI
Abre tu navegador y navega a la siguiente url: https://pokeapi.co/api/v2/pokemon/ditto
El contenido no es importante pero deberías ver una página con un montón de texto amontonado como la de la imagen.
Después abre las herramientas de desarrollo.
Hay 2 formas de hacer esto (Si ya sabes cómo, saltáte a la siguiente sección)
- Utilizando el menu de opciones de tu navegador
- Ve a las opciones de tu navegador y busca una opción que diga “Herramientas de Desarrollo” o “Developer Tools”
- Por lo general se encuentra dentro de otro menú llamado “Más Herramientas”, “More Tools”, etc. Cada navegador usa el nombre que prefiere así que dependerá del que uses.
- Utilizando el shortcut
- Ctrl+Shift+I (i maysúcula)
Si te sale una ventana similar a la siguiente, lo hiciste bien.
Dirigeté a las tabs en las opciones de arriba y selecciona la opción de Network. (Red)
Ahora sin cerrar nada vuelve a cargar la URL.
Verás que aparece un objeto en la ventana y si le das click se despliega aún mas información.
Este es el log de requests (peticiones).
Dentro del log podrás ver otras opciones: Headers, Preview, Response, Initatior, Timing.
No es necesario movernos porque ya estamos en la que necesitamos: Headers.
Dentro de la sección de Headers hay 3 grupos de información: General, Response Headers y Request Headers.
Vamos a centrarnos en el contenido de la sección de Request Headers.
*En caso de que no lo sepas los Request Headers son básicamente valores que le enviamos a un servidor para darle más información acerca de la petición que le estamos haciendo y que el servidor sepa como devolvernos la información.
Busca el valor que corresponde a User-Agent
¿Qué valor tiene en tu caso?
Como puedes ver en mi ejemplo el valor asignado es:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Y es bastante probable que el tuyo sea algo diferente. (Y si no les, te invitó a que hagas la misma prueba pero con otro navegador)
El valor asignado a User-Agent será diferente dependiendo del dispositivo o aplicativo que estés utilizando para hacer la petición.
¿Cómo interpretar el valor del User-Agent?
La cadena de texto que se le asigno al User-Agent representa el sistema operativo y el navegador que se utilizó para hacer la petición a PokéApi.
Esto se envió a los servidores de PokéApi con la intención de que ellos determinarán como responder a nuestra petición de la mejor manera en base al dispositivo que estamos usando.
¿Esto quiere decir que la respuesta es diferente dependiendo del dispositivo que uses?
No.
Quiere decir que puede ser diferente. Al final cada aplicación y servicio decide si vale la pena cambiar algo en su respuests en base al dispositivo. Puede ser que decidan que sí o puede ser que decidan que no.
Estructura de la cadena de User-Agent
El formato estándar de un User-Agent es el siguiente:
<producto> / <version-del-producto> <comentario>
- <producto>
- Un identificador del producto. Su nombre or nombre clave de desarrollo
- <versión-del-producto>
- Número de versión del producto
- <comentario>
- Cero o mas comentarios que contienen mas detalles.
Sin embargo los navegadores (que son los User-Agents mas comúnes) usan este otro formato:
Mozilla/5.0 (<información del sistema>) <plataforma> (<detalles-de-la-plataforma>) <extensiones>
*Mozilla/5 es el token general que dice que el navegador es compatible con Mozilla. Casi todo los navegadores de hoy en día lo envían por razones históricas.
Aqui algunos ejemplos de otros User-Agents de otros dispositivos y navegadores
Windows + Brave
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Windows + Firefox
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0
Android + Chrome
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36
Android + Opera GX
Mozilla/5.0 (Linux; Android 13; SM-G781B Build/TP1A.220624.014) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.133 Mobile Safari/537.36 OPX/2.5
Postman
PostmanRuntime/7.29.0
¡Eso es todo!
A pesar de que no se usa frecuentemente ahora ya sabes que quiere decir ese header que se envía en todos tus requests.
Esta información puede utilizarse de varias formas en el servidor. Es muy útil en caso de que necesites manipular la información de manera diferente dependiendo del sistema operativo o el dispositivo que te haya hecho la petición.