Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cabeceras HTTP para Dummies

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by James Kolce (you can also view the original English article)

Ya seas un programador o no, lo has visto en todas partes de la web. En este momento la barra de dirección de tu navegador muestra algo que comienza con "https://". Incluso tu primer script de Hola Mundo envió cabeceras HTTP sin que te dieras cuenta. En este artículo vamos a aprender lo básico de cabeceras HTTP y cómo podemos usarlas en nuestras aplicaciones web.

¿Qué son las cabeceras HTTP?

Las iniciales HTTP significan "Protocolo de Transferencia de Hipertexto" (Hypertext Transfer Protocol). La World Wide Web completa usa este protocolo. Fue establecido en los primeros años de 1990. Casi todo lo que ves en tu navegador es transmitido a tu computadora por HTTP. Por ejemplo, cuando abres la página de este artículo, tu navegador probablemente ha enviado más de 40 solicitudes HTTP y ha recibido respuestas HTTP para cada una.

Las cabeceras HTTP son la parte central de esas solicitudes y respuestas HTTP, y transportan información sobre el navegador cliente, la página solicitada, el servidor y más.

Ejemplo

Cuando escribes una url en la barra de direcciones, tu navegador envía una solicitud HTTP y puede verse como esto:

La primer línea es la "Línea Solicitud" la cual contiene algo de información básica sobre la solicitud. Y el resto son cabeceras HTTP.

Luego de esa solicitud, el navegador recibe una respuesta HTTP que puede verse como lo siguiente:

La primer línea es la "Línea de Estado", seguida por "Cabeceras HTTP", hasta la línea blanca. Luego de eso, el "contenido" comienza (en este caso, una salida HTML).

Cuando ves el código fuente de una página web en tu navegador, solo verás la porción HTML y no las cabeceras HTTP, incluso aunque en realidad han sido transmitidas juntas como puedes ver anteriormente.

Esas solicitudes HTTP son también enviadas y recibidas para otras cosas, como imágenes, archivos CSS, archivos JavaScript, etc. Es por eso que dije anteriormente que tu navegador ha enviado al menos 40 o más solicitudes HTTP mientras cargabas solo la página de este artículo.

Ahora, vamos a revisar la estructura en más detalle.

Cómo Ver las Cabeceras HTTP

Yo uso la siguiente extensión para Firefox para analizar las cabeceras HTTP:

En PHP:

  • getallheaders() consigue todas las cabeceras de solicitud. También puedes usar el array $_SERVER.
  • headers_list() consigue las cabeceras de respuesta.

Más adelante en el artículo, vamos a ver algunos códigos de ejemplo en PHP.

Estructura de Solicitud HTTP

La primera línea de la solicitud HTTP es llamada línea solicitud y consiste de 3 partes:

  • El "método" indica que tipo de solicitud es esta. Los métodos más comunes son GET, POST y HEAD.
  • La "ruta" es generalmente la parte de la url que viene luego del huésped (dominio). Por ejemplo, cuando se solicita "https://net.tutsplus.com/tutorials/other/top-20-mysql-best-practices/" , la porción de la ruta es "/tutorials/other/top-20-mysql-best-practices/".
  • La parte de "protocolo" contiene "HTTP" y la versión, la cual es usualmente 1.1 en navegadores modernos.

El resto del a solicitud contiene cabeceras HTTP como pares "Nombre: Valor" en cada línea. Contienen información diversa sobre la solicitud HTTP y tu navegador. Por ejemplo, la línea "User-Agent" provee información sobre la versión del navegador y el sistema operativo que estás usando. "Accept-Encoding" le dice al servidor si tu navegador puede aceptar salida comprimida como gzip.

Puedes haber notado que los datos de la cookie es también transmitida dentro de una cabecera HTTP. Y si hubiera una url referida, estuviera en la cabecera también.

La mayoría de esas cabeceras son opcionales. Esta solicitud HTTP podría haber sido tan pequeña como esta:

Y aún así hubieras obtenido una respuesta válida del servidor web.

Métodos de Solicitud

Los tres métodos de solicitud más comunes son: GET, POST y HEAD. Probablemente ya eres familiar con los primeros dos, por escribir formularios HTML.

GET: Recupera un Documento

Este es el principal método usado para recuperar HTML, imágenes, JavaScript, CSS, etc. La mayor parte de la información que se carga en tu navegador ha sido solicitada usando este método.

Por ejemplo, cuando cargas un artículo de Nettus+, la primera línea de la solicitud HTTP se ve como lo siguiente:

Una vez que el HTML carga, el navegador comenzará enviando solicitudes GET para imágenes, lo que puede verse como esto:

Los formularios web pueden configurarse para usar el método GET. Aquí está un ejemplo.

Cuando el formulario es enviado, la solicitud HTTP comienza como esto:

Puedes ver que cada entrada del formulario fue agregada en la cadena de consulta.

POST: Envía datos al Servidor

Incluso aunque puedes enviar datos al servidor usando GET y la cadena de consulta, en muchos casos POST sería preferible. Enviando grandes montos de datos usando GET no es práctico y tiene sus limitaciones.

Las solicitudes POST son más comúnmente enviadas por formularios web. Vamos a cambiar el formulario de ejemplo anterior a un método POST.

Al enviar ese formulario se crea una solicitud HTTP como esta:

Hay 3 cosas importantes a notar aquí:

  • La ruta en la primera línea es simplemente /foo.php y ya no hay una cadena de consulta.
  • Las cabeceras Content-Type y Content-Length han sido agregadas, las cuales proveen información sobre los datos que están siendo enviados.
  • Todos los datos son ahora enviados luego de las cabeceras, con el mismo formato que la cadena de consulta.

Solicitudes de método POST pueden también hacerse vía AJAX, aplicaciones, cURL, etc. Y todos los formularios para subir archivos requieren que usen el método POST.

HEAD: Recupera Información de Cabecera

HEAD es idéntico a GET, excepto que el servidor no regresa el contenido en la respuesta HTTP. Cuando envías una solicitud HEAD, significa que estás solo interesado en el código de respuesta y en las cabeceras HTTP, no el documento mismo.

"Cuando envías una solicitud HEAD, significa que solo estás interesado en el código de respuesta y en las cabeceras HTTP, no en el documento mismo."

Con ese método el navegador puede revisar si un documento ha sido modificado, para propósitos de almacenamiento en caché. También puede revisar si el documento existe definitivamente.

Por ejemplo, si tienes un montón de enlaces en tu sitio web, puedes periódicamente enviar solicitudes HEAD a todos ellos para revisar enlaces rotos. Eso funcionará mucho más rápido que usando GET.

Estructura de Respuesta HTTP

Luego de que el navegador envía una solicitud HTTP, el servidor responde con una respuesta HTTP. Excluyendo el contenido, se ve como esto:

La primera pieza de datos es el protocolo. Esto es de nuevo usualmente HTTP/1.x o HTTP/1.1 en servidores modernos.

La siguiente parte es el código de estado seguido por un corto mensaje. Código 200 significa que nuestra solicitud GET fue exitosa y el servidor regresará los contenidos del documento solicitado, justo juego de las cabeceras.

Todos hemos visto páginas "404". Este número en realidad viene del código de estado parte de la respuesta HTTP. Si la solicitud GET fuera hecha por una ruta que el servidor no puede encontrar, respondería con un 404 en lugar de un 200.

El resto de la respuesta contiene cabeceras como la solicitud HTTP. Estos valores pueden contener información sobre el software del servidor, cuando la página/archivo fue últimamente modificado, el tipo mime, etc…

De nuevo, la mayoría de estas cabeceras son en realidad opcionales.

Códigos de Estado HTTP

  • 200 son usados para solicitudes exitosas.
  • 300 son para redirecciones.
  • 400 son usados si hubo algún problema con la solicitud.
  • 500 son usados si hubo algún problema con el servidor.

200 OK

Como se mencionó anteriormente, este código de estado es enviado en respuesta a una solicitud exitosa.

206 Contenido Parcial

Si una aplicación solicita solo un rango del archivo solicitado, el código 206 es devuelto.

Es más comúnmente usado con administradores de descargas que pueden detener y continuar una descarga, o dividir la descarga en piezas.

404 No Encontrado

Cuando la página solicitada o archivo no fue encontrado, una respuesta 404 es enviada por el servidor.

401 No Autorizado

Páginas web protegidas por contraseña envían este código. Si no introduces un inicio de sesión correcto, puedes ver lo siguiente en tu navegador.

Ten en cuenta que esto solo aplica a páginas protegidas por contraseña HTTP, que muestran ventanas pop up como la siguiente para iniciar sesión.

403 Prohibido

Si no estás permitido para acceder a la página, este código puede ser enviado a tu navegador. Esto a menudo pasa cuando intentas abrir la url de una carpeta, que no contiene una página índice. Si la configuración del servidor no permite mostrar los contenidos de la carpeta, obtendrás un error 403.

Por ejemplo, en mi servidor local creé una carpeta de imágenes. Dentro de esta carpeta puse un archivo .htaccess con esta línea: "Options - Indexes". Ahora cuando intento abrir http://localhost/images/ - veo esto:

Hay otras formas en las cuales el acceso puede estar bloqueado, y 403 puede ser enviado. Por ejemplo, puedes bloquear por dirección IP, con la ayuda de algunas directivas htaccess.

302 (o 307) Movido Temporalmente & 301 Movido Permanentemente

Estos dos códigos son usados para redirigir el navegador. Por ejemplo, cuando usas un servidor acortador de URLs, como bit.ly, así es exactamente como ellos redirigen a las personas que hacen clic en sus enlaces.

Ambos 302 y 301 son manejados muy similarmente por el navegador, pero pueden tener diferentes significados para las spiders de motores de búsqueda. Por ejemplo, si tu sitio web está caído por mantenimiento, puedes redireccionar a otra parte usando 302. La araña del motor de búsqueda continuará revisando tu página después en el futuro. Pero si redireccionas usando 301, le dirá al spider que tu sitio web ha sido movido a esa localización permanente. Para darte una mejor idea: http://www.nettuts.com redirecciona a https://net.tutsplus.com/ usando un código 301 en lugar de 302.

500 Error de Servidor Interno

Este código es usualmente visto cuando un script web se rompe. La mayoría de scripts CGI no muestran errores directamente al navegador, a diferencia de PHP. Si hay algunos errores fatales, simplemente se enviará un código de estado 500. Y el programador entonces necesita buscar los registros de errores del servidor para encontrar los mensajes de error.

Lista Completa

Puedes encontrar la lista completa de códigos de estado HTTP con sus explicaciones aquí.

Cabeceras HTTP en peticiones HTTP

Ahora, vamos a revisar algunas de las cabeceras HTTP más populares encontradas en peticiones HTTP.

Casi todas esas cabeceras pueden encontrarse en el array $_SERVER en PHP. Puedes también usar la función getallheaders() para recuperar todas las cabeceras al mismo tiempo.

Host

Una petición HTTP es enviada a direcciones IP especificas. Pero ya que la mayoría de servidores son capaces de almacenar multiples sitios web bajo la misma IP, deben de saber qué nombre de dominio está buscando el navegador.

Esto es básicamente el nombre de host, incluyendo el dominio y el subdominio.

En PHP, puede encontrarse como $_SERVER['HTTP_HOST'] o $_SERVER['SERVER_NAME'].

User-Agent

Esta cabecera pude transportar varias piezas de información como:

  • Nombre de navegador y versión.
  • Nombre de Sistema Operativo y versión.
  • Lenguaje predeterminado.

Así es como sitios web pueden recolectar cierta información general sobre los sistemas de sus navegadores. Por ejemplo, pueden detectar si el navegante está usando un navegador de teléfono celular y redireccionarlo a la versión móvil del sitio web el cual funciona mejor con bajas resoluciones.

En PHP, puede encontrarse con: $_SERVER['HTTP_USER_AGENT'].

Accept-Language

Esta cabecera muestra el lenguaje predeterminado por el usuario. Si un sitio web tiene diferentes versiones de lenguajes, puede redireccionar un nuevo navegante basado en esta información.

Puede transportar multiples lenguajes, separados por comas. El primero es el lenguaje preferido, y cada uno de los otros lenguajes listados pueden transportar un valor "q", el cual es un estimado de la preferencia de lenguaje del usuario (min. 0 max. 1).

En PHP, puede encontrarse como: $_SERVER["HTTP_ACCEPT_LANGUAGE"].

Accept-Encoding

La mayoría de navegadores modernos soportan gzip, y enviará esto en la cabecera. Entonces el servidor web puede enviar la salida de HTML en un formato comprimido. Esto puede reducir el tamaño hasta en un 80% para ahorrar ancho de banda y tiempo.

En PHP, puede encontrarse como: $_SERVER["HTTP_ACCEPT_ENCODING"]. Sin embargo, cuando usas la función callback ob_gzhandler(), revisará este valor automáticamente, así que no tienes que hacerlo tu.

If-Modified-Since

Si un documento web ya se encuentra cacheado en tu navegador, y lo visitas de nuevo, tu navegador pude revisar si el documento ha sido actualizado enviando esto:

Si no fue modificado desde esa fecha, el servidor enviará un código de respuesta "304 No Modificado" y no el contenido—el navegador cargará el contenido de la caché.

En PHP, puede encontrarse como: $_SERVER['HTTP_IF_MODIFIED_SINCE'].

Hay también una cabecera HTTP llamada Etag, la cual puede ser usada para asegurarse de que la caché es actual. Vamos a hablar de esto en un momento.

Cookie

Como el nombre sugiere, envía las cookies almacenadas en tu navegador para ese dominio.

Son pares de nombre=valor separados por punto y coma. Cookies pueden también contener el id de sesión.

En PHP, las cookies individuales se puede acceder con el array $_COOKIE. Puedes acceder directamente a las variables de sesión usando el array $_SESSION, y si necesitas el id de sesión, puedes usar la función session_id() en lugar de la cookie.

Referer

Como el nombre lo sugiere, esta cabecera HTTP contiene la URL de referencia.

Por ejemplo, si visito la página principal de Nettuts+, y hago clic en un enlace de artículo, esta cabecera es enviada a mi navegador:

En PHP, puede encontrarse como $_SERVER['HTTP_REFERER'].

Podrías haberte dado cuenta de que la palabra "referrer" ha sido mas escrita como "referer". Desafortunadamente llegó así a la especificación oficial de HTTP y se quedó.

Authorization

Cuando una página web pregunta por autorización, el navegador abre una ventana de login. Cuando ingresas un nombre de usuario y contraseña en esta ventana, el navegador envía otra solicitud HTTP, pero esta vez contiene esta cabecera.

La información dentro de esta cabecera está codificada en base64. Por ejemplo, base64_decode('bXl1c2VyOm15cGFzcw==') retornaría 'myuser:mypass'

En PHP, esos valores, pueden encontrarse como $_SERVER['PHP_AUTH_USER'] y $_SERVER['PHP_AUTH_PW'].

Más de esto cuando hablemos sobre la cabecera WWW-Authenticate.

Cabeceras HTTP en Respuestas HTTP

Ahora vamos a ver algunas de las cabeceras HTTP mas comunes encontradas en respuestas HTTP.

En PHP, puedes ajustar las cabeceras de respuesta usando la función header(). PHP ya envía ciertas cabeceras automáticamente, para cargar el contenido y configurar cookies, etc… Puedes ver las cabeceras que son enviadas, o serán enviadas, con la función header_list(). Puedes revisar si las cabeceras ya se han enviado, con la función headers_sent().

Cache-Control

Definición de w3.org: "El campo header general Cache-Control es usado para especificar directivas las cuales DEBEN de ser obedecidas por todos los mecanismos de cacheo junto a la cadena petición/respuesta". Estos "mecanismos de cacheo" incluyen gateways y proxies que tu ISP pueden estar usando.

Ejemplo:

"public" significa que la respuesta puede ser cacheada por quien sea. "max-age" indica por cuantos segundos la caché será valida. Permitir que tu sitio web sea cacheado puede reducir la carga del servidor y el ancho de banda, y también mejorar los tiempos de carga en el navegador.

El cacheo puede también ser prevenido usando la directiva "no-cache".

Para información mas detallada, vea w3.org.

Content-Type

Esta cabecera indica el "mime-type" del documento. El navegador entonces decide como interpretar los contenidos basado en esto. Por ejemplo, una página html (o un script PHP con salida html) puede devolver esto:

"text" es el tipo y "html" es el subtipo del documento. La cabecera puede también contener mas información como el charset.

Para una imagen gif, esto puede ser enviado.

El navegador puede decidir usar una aplicación externa o una extensión del navegador basándose en el mime-type. Por ejemplo, esto causará que Adobe Reader sea cargado:

Cuando se carga correctamente, Apache puede usualmente detectar el mime-type de un documento y enviar la cabecera apropiada. También, la mayoría de navegadores tienen un monto de tolerancia de ellos y auto-corrección de los mime-types, en caso de que las cabeceras estén mal o no estén presentes.

Puedes encontrar una lista de mime-types comunes aquí.

En PHP, puedes usar la función finfo_file() para detectar el mime-type de un archivo.

Content-Disposition

Este header da instrucciones al navegador de abrir la carga de descarga de archivo, en lugar de intentar analizar el contenido. Ejemplo:

Eso causará que el navegador haga esto:

Date cuenta de que la cabecera Content-Type apropiada debería también ser enviada junto con esto:

Content-Lenght

Cuando el contenido va a ser transmitido al navegador, el servidor puede indicar el tamaño (en bytes) usando esta cabecera.

Esto es especialmente útil para descargas de archivos. Esto es cómo el navegador puede determinar el progreso de la descarga.

Por ejemplo, aquí está un script de muestra que escribí, el cual simula una descarga lenta.

El resultado es:

Ahora voy a comentar la cabecera Content-Lenght

Ahora el resultado es:

El navegador solo puede decirte cuantos bytes han sido descargados, pero no sabe cuál es el monto total. Y la barra de progreso no está mostrando el progreso.

Etag

Esta es otra cabecera que es usada para propósito de cacheo. Se ve como esto:

El servidor web puede enviar esta cabecera con cada documento que sirve. El valor puede estar basado en la última fecha de modificación, tamaño de archivo o incluso en el valor checksum de un archivo. El navegador entonces guarda este valor al cachear el documento. La siguiente vez el navegador solicita el mismo archivo, envía esto en la solicitud HTTP:

Si el valor Etag del documento encaja, el servidor enviará código 304 en lugar de 200, y sin contenido. El navegador cargará los contenidos de su caché.

Last-Modified

Como el nombre sugiere, esta cabecera indica la ultima fecha de modificación de el documento, en formato GMT:

Ofrece otra forma para el navegador de cachear el documento. El navegador puede enviar esto en la solicitud HTTP:

Ya hemos hablado sobre esto antes en la sección "If-Modified-Since".

Location

Esta cabecera es usada para redirecciones. Si el código de respuesta es 301 o 302, el servidor debe también enviar esta cabecera. Por ejemplo, cuando vas a http://www.nettuts.com tu navegador recibe esto:

En PHP, puedes redirigir a un navegante de la siguiente forma:

Por defecto, eso enviará un código de respuesta 302. Si quieres enviar 302:

Set-Cookie

Cuando un sitio web quiere configurar o actualizar una cookie en tu navegador, usará esta cabecera.

Cada cookie es enviada como una cabecera separada. Date cuenta de que las cookies configuradas con JavaScript no van a través de cabeceras HTTP.

En PHP, puedes enviar cookies usando la función setcookie() y PHP envía las cabeceras HTTP apropiadas.

Lo cual causa que sea enviada esta cabecera:

Si la fecha de expiración no es especificada, la cookie es borrada cuando la ventana del navegador es cerrada.

WWW-Authenticate

Un sitio web puede enviar esta cabecera para autenticar un usuario a través de HTTP. Cuando el navegador ve esta cabecera, abrirá una ventana de dialogo para iniciar sesión.

Lo cual se ve como esto:

Hay una sección en el manual de PHP, que tiene muestras de código sobre cómo hacer esto en PHP.

Content-Encoding

La cabecera es usualmente configurada cuando el contenido regresa es comprimido.

En PHP, si tu usas la función callback ob_gzhandler(), será configurado automaticamente para ti.

Conclusión

Gracias por leer. Espero que este artículo haya sido un buen punto de comienzo para prender sobre Cabeceras HTTP. Por favor, deja tus comentarios y preguntas abajo e intentaré responder tanto como pueda.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.