{"id":10726,"date":"2021-07-16T11:16:57","date_gmt":"2021-07-16T09:16:57","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=10726"},"modified":"2021-07-16T11:16:57","modified_gmt":"2021-07-16T09:16:57","slug":"que-es-http-y-como-funciona","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/que-es-http-y-como-funciona\/","title":{"rendered":"Qu\u00e9 es HTTP y c\u00f3mo funciona"},"content":{"rendered":"<p>Antes de meternos en harina y explicar lo que son y c\u00f3mo funcionan las cabeceras HTTP, vamos a dar una breve introducci\u00f3n de lo que es el protocolo HTTP en s\u00ed, y c\u00f3mo funciona.<\/p>\n<p>&nbsp;<\/p>\n<h2>Qu\u00e9 es el protocolo HTTP y c\u00f3mo funciona<\/h2>\n<p>Seguramente, alguna vez te has fijado en la barra del navegador y te has preguntado por qu\u00e9 todas direcciones empiezan por \u201chttps:\/\/\u201d o \u201chttp:\/\/\u201d. Esto es porque todo \u201cInternet\u201d o mejor dicho la World Wide Web funciona bajo el protocolo HTTP o \u201cHyper Text Transfer Protocol\u201d.<\/p>\n<p>Este protocolo es el que se utiliza al pedir la mayor\u00eda de recursos utilizados por las p\u00e1ginas web. Por lo que la comunicaci\u00f3n entre el cliente y el servidor a la hora de pedir por ejemplo una imagen, se realiza a trav\u00e9s de HTTP. Cada\u00a0 una de estas peticiones son enviadas a un servidor, el cual recibir\u00e1, tratar\u00e1 y devolver\u00e1 de nuevo al cliente.<\/p>\n<p>Fue dise\u00f1ado a principios de la d\u00e9cada de 1990. Aunque la base de lo que tenemos ahora sigue siendo la misma, ha sufrido numerosas modificaciones y mejoras a lo largo del tiempo.\u00a0 La RFC de HTTP\/1.1 se recoge en la\u00a0<a href=\"https:\/\/tools.ietf.org\/html\/rfc2616\" target=\"_blank\" rel=\"noopener\">rfc2616<\/a>.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-10735\" src=\"https:\/\/www.makingscience.com\/wp-content\/uploads\/2021\/09\/c867f560-captura-de-pantalla-2021-07-16-a-las-10.54.33-1024x265-1.png\" alt=\"\" width=\"1024\" height=\"265\" \/><\/p>\n<h2><strong>Qu\u00e9 son las cabeceras HTTP<\/strong><\/h2>\n<p>Una vez \u201cexplicado\u201d c\u00f3mo funciona el protocolo HTTP, vamos a pasar a explicar qu\u00e9 son y c\u00f3mo funcionan las cabeceras.<\/p>\n<p>Cuando realizamos una petici\u00f3n a un servidor (para hacerlo bastar\u00e1 simplemente con acceder a una url desde nuestro navegador), dicha petici\u00f3n (tanto la petici\u00f3n del cliente como la respuesta del servidor), son enviadas con una serie de \u201cmetadatos\u201d. Estos metadatos son las llamadas cabeceras HTTP.\u00a0<strong>Las cabeceras HTTP son un elemento imprescindible en la comunicaci\u00f3n HTTP ya que nos van a proporcionar informaci\u00f3n acerca del cliente que env\u00eda la petici\u00f3n, el servidor, la web solicitada, etc.<\/strong><\/p>\n<p>Pero,<strong>\u00a0\u00bfpor qu\u00e9 nosotros no vemos toda esa informaci\u00f3n?<\/strong>\u00a0Cuando entramos en una web a trav\u00e9s del navegador y nos movemos por ella, no vemos este tipo de informaci\u00f3n ya que para visitar una web, leer una noticia o ver un video esta informaci\u00f3n nos es irrelevante. Pero por debajo se est\u00e1 estableciendo una comunicaci\u00f3n entre nuestro cliente y el servidor en la que se est\u00e1n enviando y recibiendo estos metadatos. Esto lo podemos ver echando un vistazo a las peticiones que hemos realizado al servidor.<\/p>\n<p>(No te preocupes si no sabes ver las cabeceras desde el navegador. M\u00e1s adelante se explica c\u00f3mo sacar las cabeceras desde consola y el navegador).<\/p>\n<p>Muchas cabeceras son compartidas, es decir, se utilizan tanto en la solicitud que se haga del recurso como en la respuesta de petici\u00f3n que nos de el servidor. Es necesario puntualizar y tener en cuenta que no siempre es as\u00ed, y habr\u00e1 cabeceras como por ejemplo la cabecera \u201cLocation\u201d que solo se utiliza la respuesta del servidor.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-10739\" src=\"https:\/\/www.makingscience.com\/wp-content\/uploads\/2021\/09\/36636d60-captura-de-pantalla-2021-07-16-a-las-10.54.39-1024x435-1.png\" alt=\"\" width=\"1024\" height=\"435\" \/><br \/>\nNo te preocupes si ahora mismo no entiendes nada de lo que indican las cabeceras, a continuaci\u00f3n te explicamos algunas de las cabeceras m\u00e1s comunes y la informaci\u00f3n que contienen.<\/p>\n<p>&nbsp;<\/p>\n<h2>Tipos principales de cabeceras<\/h2>\n<p>Hay multitud de cabeceras con informaci\u00f3n diferente. A continuaci\u00f3n se van detallar algunas de las m\u00e1s comunes y que nos pueden proporcionar informaci\u00f3n \u00fatil:<\/p>\n<p>AlgunaS de las cabeceras HTTP m\u00e1s comunes:<\/p>\n<ul>\n<li>\n<ul>\n<li aria-level=\"1\"><b>Host<\/b>: indica el nombre del dominio.<\/li>\n<li aria-level=\"1\"><b>Age<\/b>: indica cuantos segundos lleva cacheado el objeto\/recurso en un servidor proxy intermedio.<\/li>\n<li aria-level=\"1\"><b>Cache-control<\/b>: Cu\u00e1nto tiempo puede estar un objeto en cach\u00e9. El tiempo viene expresado en segundos.<\/li>\n<li aria-level=\"1\"><b>Content-Encoding<\/b>: indica qu\u00e9 codificaci\u00f3n de contenido se aplica en el recurso.<\/li>\n<li aria-level=\"1\"><b>Location<\/b>: Indica la url destino en caso de redirecci\u00f3n.<\/li>\n<li aria-level=\"1\"><b>Set-Cookie:\u00a0<\/b>Indica la cookie establecida en el cliente.<\/li>\n<li aria-level=\"1\"><b>Server:\u00a0<\/b>Informaci\u00f3n sobre el servidor que responde nuestra petici\u00f3n.<\/li>\n<li aria-level=\"1\"><b>Status:\u00a0<\/b>C\u00f3digo de respuesta de la petici\u00f3n.<\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/developer.cdn.mozilla.net\/docs\/Web\/HTTP\/Headers\/User-Agent\" target=\"_blank\" rel=\"noopener\"><b>User-Agent<\/b><\/a><b>:\u00a0<\/b>Indica la herramienta desde la cual se ha realizado la petici\u00f3n.<\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/developer.cdn.mozilla.net\/docs\/Web\/HTTP\/Headers\/Vary\" target=\"_blank\" rel=\"noopener\"><b>Vary<\/b><\/a>: Indica los valores y cabeceras que han de tenerse en cuenta a la hora de generar\/solicitar un archivo desde la cach\u00e9.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><strong>Cabeceras personalizadas<\/strong><\/h2>\n<p>Hasta ahora hemos visto algunas de las cabeceras m\u00e1s comunes pero \u00bfy si quiero a\u00f1adir una cabeceras personalizada?. Las cabeceras personalizadas son una herramienta muy \u00fatil a la hora de transmitir informaci\u00f3n, detectar problemas o a\u00f1adir nuevas funcionalidades. Por ejemplo, estas cabeceras son un recurso muy utilizado por las CDN, ah \u00bfque todav\u00eda no sabes lo que es una CDN? Te lo explicamos en una de nuestras\u00a0<a href=\"https:\/\/www.makingscience.com\/blog\/que-es-un-cnd-y-por-que-tus-activos-digitales-tienen-que-tenerlo\/\">\u00faltimas entradas<\/a>.<\/p>\n<p>Hasta hace poco, el \u201cest\u00e1ndar\u201d era nombrar las cabeceras personalizadas con el prefijo \u201cX-\u201d pero desde Junio de 2012, esta nomenclatura ha quedado obsoleta, este cambio lo podemos encontrar en la\u00a0<a href=\"https:\/\/tools.ietf.org\/html\/rfc6648\" target=\"_blank\" rel=\"noopener\">rfc6648<\/a>. La raz\u00f3n de dicho cambio fue porque muchas de las cabeceras personalizadas se empezaron a estandarizar. Esto dio lugar a un problema y es que al estandarizar estas cabeceras los navegadores deb\u00edan de soportar tanto la cabecera estandarizada (sin prefijo) como la que utilizaba el prefijo, o los sistemas que utilizaban dichas cabeceras con prefijo deb\u00edan de actualizarse.<\/p>\n<p>Aunque las cabeceras que utilizan el prefijo se siguen utilizando. A la hora de implementar nuevas cabeceras personalizadas deber\u00edamos de elegir un nombre representativo, que no utilice el prefijo.<\/p>\n<p>Os dejamos por aqu\u00ed algunas de las cabeceras personalizadas que se utilizan:<\/p>\n<ul>\n<li aria-level=\"1\"><b>X-Powered-By:<\/b>\u00a0Identifica el software o servidor. Muy com\u00fan en instalaciones de WordPress.<\/li>\n<li aria-level=\"1\"><b>X-Forwarded-For:<\/b>\u00a0Identifica la IP de un cliente, cuya conexi\u00f3n se ha realizado a trav\u00e9s de un proxy.<\/li>\n<li aria-level=\"1\"><b>X-Forwarded-Proto:<\/b>\u00a0Identifica el protocolo de conexi\u00f3n de un cliente, cuya conexi\u00f3n se ha realizado a trav\u00e9s de un proxy.<\/li>\n<li aria-level=\"1\"><b>X-Forwarded-Host:<\/b>\u00a0Identifica la cabecera Host original de una petici\u00f3n, cuya conexi\u00f3n se ha realizado a trav\u00e9s de un proxy.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><strong>C\u00f3mo ver las cabeceras\u00a0<\/strong><\/h2>\n<p>Vamos a explicar c\u00f3mo ver las cabeceras HTTP desde dos herramientas distintas:<\/p>\n<p><b>Consola<\/b>: Para listar las cabeceras HTTP de una url por consola podemos utilizar la herramienta\u00a0<b>curl<\/b>. Simplemente habr\u00e1 que lanzar desde consola el siguiente comando:<\/p>\n<ul>\n<li aria-level=\"1\"><i>curl -I\u00a0<\/i><a href=\"https:\/\/www.makingscience.com\/blog\/estrategias-devsecops-en-google-cloud-platform\/\"><i>https:\/\/www.makingscience.com\/blog\/estrategias-devsecops-en-google-cloud-platform\/<\/i><\/a><\/li>\n<\/ul>\n<p>Lo que estamos haciendo es pasarle el par\u00e1metro \u201c-I\u201d a la herramienta curl. Esto lo que indica, es que \u00fanicamente nos muestre las cabeceras.<\/p>\n<p><i>HTTP\/2 200<\/i><\/p>\n<p><i>server: nginx<\/i><\/p>\n<p><i>date: Mon, 12 Apr 2021 11:33:34 GMT<\/i><\/p>\n<p><i>content-type: text\/html; charset=UTF-8<\/i><\/p>\n<p><i>vary: Accept-Encoding<\/i><\/p>\n<p><i>set-cookie: qtrans_front_language=es; expires=Tue, 12-Apr-2022 11:33:34 GMT; Max-Age=31536000; path=\/blog\/<\/i><\/p>\n<p><i>link: &lt;https:\/\/www.makingscience.com\/blog\/wp-json\/&gt;; rel=\u00bbhttps:\/\/api.w.org\/\u00bb<\/i><\/p>\n<p><i>link: &lt;https:\/\/www.makingscience.com\/blog\/wp-json\/wp\/v2\/posts\/4307&gt;; rel=\u00bbalternate\u00bb; type=\u00bbapplication\/json\u00bb<\/i><\/p>\n<p><i>link: &lt;https:\/\/www.makingscience.com\/blog\/?p=4307&gt;; rel=shortlink<\/i><\/p>\n<p><i>access-control-allow-origin: *<\/i><\/p>\n<p><i>access-control-allow-headers: *<\/i><\/p>\n<p><i>via: 1.1 google<\/i><\/p>\n<p><i>alt-svc: clear<\/i><\/p>\n<p>&nbsp;<\/p>\n<p><b>Navegador<\/b>: Para ver las peticiones desde el navegador, vamos a darle a click derecho encima de la web y pinchamos en la opci\u00f3n \u201cInspeccionar elemento\u201d. Esto nos abrir\u00e1 un nuevo apartado en la web donde encontramos una pesta\u00f1a que indica \u201cRed\u201d, es ah\u00ed donde veremos todas nuestras peticiones realizadas.\u00a0 Al entrar en cualquiera de las peticiones realizadas podremos ver las cabeceras.<\/p>\n<p><img decoding=\"async\" class=\"alignnone  wp-image-10743\" src=\"https:\/\/www.makingscience.com\/wp-content\/uploads\/2021\/09\/a4bab717-captura-de-pantalla-2021-07-16-a-las-10.54.46-1536x635-1.png\" alt=\"\" width=\"970\" height=\"401\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes de meternos en harina y explicar lo que son y c\u00f3mo funcionan las cabeceras HTTP, vamos a dar una breve introducci\u00f3n de lo que es el protocolo HTTP en s\u00ed, y c\u00f3mo funciona. &nbsp; Qu\u00e9 es el protocolo HTTP y c\u00f3mo funciona Seguramente, alguna vez te has fijado en la barra del navegador y [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":10731,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[125],"class_list":["post-10726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology-ai","tag-systems-2"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/10726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=10726"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/10726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/10731"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=10726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=10726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=10726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}