Protocolo HTTP — Comprendiendo las tecnologías Web
Tags: http, curl, api, web
Published: 2023-09-09 17:00:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mq0rxq3ppfg1s3pkdd4g.png)

# Que es el protocolo HTTP?

El protocolo **HTTP** (_Hypertext Transfer Protocol_) es un conjunto de reglas que permite la comunicación y el intercambio de información entre computadoras en la **World Wide Web** (_la red de Internet_).

El protocolo **HTTP** utiliza **TCP** (_Protocolo de Control de Transmisión_) porque **TCP** proporciona una comunicación confiable y orientada a la **conexión**. Esto significa que **TCP** garantiza la entrega de datos en el orden correcto y sin errores, lo cual es esencial para asegurar que las páginas web y otros recursos se carguen correctamente y sin problemas en los **navegadores**.

## Diferencia entre HTTP y HTTPS

La principal distinción entre **HTTP** y **HTTPS** radica en la protección de la comunicación. Mientras **HTTPS** encripta y asegura la información transmitida, **HTTP** no lo hace, exponiendo los datos a riesgos y espionaje. Por ello, se aconseja emplear **HTTPS** en la medida de lo posible, sobre todo en páginas web que gestionan información delicada o privada.

# Modelo de comunicación HTTP

El protocolo **HTTP** es un modelo de comunicación _cliente — servidor_ utilizado en la web. El **cliente**, como un navegador web, envía **solicitudes** (_Requests_) a un servidor que aloja y administra recursos. El **servidor** procesa las **solicitudes** (_Requests_) y **responde** (_Response_) con la información o acciones solicitadas. Este modelo facilita el intercambio de información en la web, permitiendo una separación clara de responsabilidades entre **clientes** y **servidores**.

## Esquema de conexión Cliente — Servidor

```lua
+-----------+                               +------------+
|           |        172.16.18.2:80         |            |
|           |  +------------------------->  |            |
|           |            Request            |            |
|  Cliente  |                               |  Servidor  |
|  Firefox  |                               |    Web     |
|           |      172.16.20.34:36894       |            |
|           |  <-------------------------+  |            |
|           |            Response           |            |
+-----------+                               +------------+
*172.16.20.34*                              *172.16.18.2*
```

Los puertos comunes usados en servidores web son los siguientes **80/81/443/8000/8080/8443/8888**

## Que servidores y clientes existen?
En el contexto de la web y el protocolo **HTTP**, hay varios servidores y clientes disponibles. Estos son algunos ejemplos de cada tipo:

### Servidores web:

1. **Apache HTTP Server**: Un servidor web de código abierto muy popular y ampliamente utilizado.

2. **Nginx**: Un servidor web de alto rendimiento, también utilizado como proxy inverso y balanceador de carga.

3. **Microsoft Internet Information Services** (_IIS_): Un servidor web desarrollado por Microsoft, integrado en sus sistemas operativos Windows Server.

4. **Caddy**: Un servidor web moderno, escrito en Go, que se centra en la facilidad de uso y la seguridad. Incluye soporte automático para **HTTPS** utilizando Let’s Encrypt.
* **Tomcat**: Un servidor web y contenedor de servlets Java desarrollado por la **Apache Software Foundation**. **Tomcat** se utiliza principalmente para desplegar aplicaciones web basadas en Java.

6. **Gunicorn**: Un servidor web **WSGI** para _Python_, utilizado para servir aplicaciones web basadas en _Python_, como aquellas creadas con _Django_ o _Flask_.

### Clientes web
1. **Navegadores web**: Como por ejemplo Google Chrome, _Mozilla Firefox_, _Apple Safari_, _Microsoft Edge_, _Opera_ que permiten a los usuarios navegar por la web y acceder a recursos en línea.

2. **Aplicaciones móviles**: Muchas aplicaciones móviles actúan como clientes **HTTP** al solicitar y recibir información de servidores web. Algunos son _Instagram_, _GMail_, _Whatsapp_, _Telegram_, _Uber_, _Netflix_, y un sin fin…

3. **Herramientas de línea de comandos**: Programas como _curl_ o _wget_ que permiten enviar solicitudes **HTTP** desde la línea de comandos en un sistema operativo.

4. **Bibliotecas y frameworks**: Lenguajes de programación como _Python_, _Java_, _JavaScript_, entre otros, cuentan con **bibliotecas** y **frameworks** que permiten a los desarrolladores crear aplicaciones que funcionen como clientes **HTTP**.

# Que es una URL?
Una **URL** (_Uniform Resource Locator_) es una dirección única que identifica un recurso en la web, como una _página web_, una _imagen_ o un _archivo_. La **URL** especifica la ubicación del recurso y cómo acceder a él mediante protocolos como **HTTP**.

## Estructura de una URL
Si descomponemos la estructura de una URL podríamos ordenarlo de la siguiente forma:

```
<protocolo>://<dominio>:<puerto><path><parametros>

http://vay3t.org:81/hello?name=nch&message=wspmdf

- protocolo = http
- dominio = vay3t.org
- puerto = 81
- path = /hello
- parametros = ?name=nch&message=wspmdf
  - variables = name,message
  - valores = nch,wspmdf
```

## Estructura del protocolo



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v84zjg3gzfq2b864ou3t.png)



### Ya, pero que significa todo esto?
Los headers, _verbos/métodos_, códigos de estados y _MIME types_ son componentes importantes en la comunicación basada en el protocolo **HTTP**.

#### Request

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5eigly6v36vxml6xax9.png)

1. _Verbo/Método_
2. _Path_
3. _Versión del estándar HTTP_
4. _Navegador Web Cliente_
5. _Idioma cliente_
6. _Headers_

#### Response


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26eeubfummouoi2hlyk1.png)


1. _Versión del estándar HTTP_
2. _Status code_
3. _Versión del servidor (ahí podría ir Apache/1.1 o cosas así)_
4. _Largo del contenido del response_
5. _Cuerpo del response_

### Un poco de detalle… (Modo: DEBUG)
A continuación, se explica brevemente cada uno de estos componentes:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6afnvixuqmbfenkumlvr.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvh5yg7uwxwlz0zh0s2m.png)

# Webs modernas, las APIs

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf20r7eoribqj62wwti6.png)

## Backend y frontend
El **backend** y el **frontend** son dos componentes principales en el desarrollo de aplicaciones web y móviles. Ambos trabajan juntos para ofrecer una experiencia completa al usuario.

- **Frontend**: Es la parte visible e interactiva de la aplicación, con la que el usuario interactúa directamente. El frontend se encarga de la presentación y la interacción, utilizando tecnologías como **HTML**, **CSS** y **JavaScript**. Su principal objetivo es proporcionar una interfaz atractiva y fácil de usar.

- **Backend**: Es la parte oculta que gestiona la lógica de negocio, el procesamiento de datos y la comunicación con bases de datos o servicios externos. El backend suele estar compuesto por servidores, bases de datos y **APIs**. Los lenguajes de programación comunes para el **backend** incluyen _Python_, _Java_, _Ruby_, _PHP_ y _Node.js_.


## REST / SOAP
**REST** y **SOAP** son dos protocolos ampliamente utilizados en la comunicación entre sistemas, particularmente en el desarrollo de servicios web, específicamente a nivel de **backend**.

**REST** (_Representational State Transfer_) es un estilo arquitectónico basado en **HTTP** que utiliza verbos comunes como _GET_, _POST_, _PUT_ y _DELETE_ para realizar operaciones en recursos identificados por _URLs_. Utiliza una estructura **JSON** (presentado en la imagen anterior a la izquierda).

**SOAP** (_Simple Object Access Protocol_) es un protocolo basado en **XML** (presentado en la imagen anterior a la derecha) diseñado para mejorar la comunicación y la interoperabilidad entre sistemas, puede ser usado en servicios web. Permite a las aplicaciones intercambiar información de manera estandarizada.

Los dos cumplen el mismo objetivo que es estandarizar las comunicaciones para interactuar con el backend web, con la diferencia que actualmente es más usado **REST** por ser más ligero, simple y fácil de implementar que **SOAP**.

### Estilos arquitectónicos existentes

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdoeq9qsg4sfv0g4gses.png)


### Conceptos a entender

Un **endpoint** es una dirección **URL** en un servicio web o _API_ que permite enviar solicitudes y recibir respuestas. Actúa como punto de entrada para interactuar con funciones o recursos específicos y se identifica mediante un método **HTTP** y una **URL** única.

La **documentación** de una _API_ es un conjunto de recursos e información que explica cómo utilizar e interactuar con la API, incluyendo detalles sobre autenticación, endpoints, ejemplos de código y manejo de errores (presentado en la imagen anterior al medio). Es esencial para que los desarrolladores puedan integrarla eficientemente en sus aplicaciones.

# Usando la terminal
[HTTPBin](https://httpbin.org/) es un proyecto de código abierto que proporciona un conjunto de **endpoints** para realizar pruebas y depurar clientes **HTTP**. Es una **API** _RESTful_ que ofrece varios endpoints para realizar diferentes tipos de solicitudes **HTTP** y analizar sus respuestas.

{% embed https://github.com/postmanlabs/httpbin %}

## cURL
**cURL** es una herramienta de línea de comandos y biblioteca que permite transferir datos a través de diversos protocolos. Se utiliza principalmente para realizar solicitudes **HTTP**, acceder a APIs, depurar y automatizar procesos en aplicaciones web. Es compatible con múltiples plataformas y sistemas operativos, y su biblioteca está disponible en varios lenguajes de programación.

_**Comando** (request)_

```bash
curl -i https://httpbin.org/post -X POST -d "name=nch&message=wspmdf"
```

_**Response**_

```
HTTP/2 200
date: Wed, 12 Apr 2023 05:34:40 GMT
content-type: application/json
content-length: 454
server: gunicorn/19.9.0
access-control-allow-origin: *
access-control-allow-credentials: true

{
  "args": {},
  "data": "",
  "files": {},
  "form": {
    "message": "wspmdf",
    "name": "nch"
  },
  "headers": {
    "Accept": "*/*",
    "Content-Length": "23",
    "Content-Type": "application/x-www-form-urlencoded",
    "Host": "httpbin.org",
    "User-Agent": "curl/7.81.0",
    "X-Amzn-Trace-Id": "Root=1-643642f0-1ac9239a66e04bc20b27036a"
  },
  "json": null,
  "origin": "x.x.x.x",
  "url": "https://httpbin.org/post"
}
```


Con un poco de **Bash** se pueden hacer muchas cosas como lo que escribí en un post anterior:


{% embed https://dev.to/vay3t/creando-un-notificador-en-telegram-con-bash-3l9h %}


# Conclusión

## Objetivo en la seguridad ofensiva
La importancia de entender el protocolo **HTTP** desde una perspectiva del atacante te permitirá identificar y explotar con mayor facilidad y efectividad proyectos web, realizando ataques sofisticados y personalizados, logrando de esta forma un mayor impacto.

**Mucho texto, a mimir**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxd7mjkxz9odvg9trjz5.png)


# Autores

[NCH](https://github.com/nchgroup) & [OpenAI](https://chat.openai.com/)