> For the complete documentation index, see [llms.txt](https://4lec4st.gitbook.io/4lec4st/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://4lec4st.gitbook.io/4lec4st/ejpt-notes/pruebas-de-penetracion-de-aplicaciones-web/aplicaciones-web/arquitectura-y-componentes-de-aplicaciones-web/arquitectura-de-las-aplicaciones-web.md).

# Arquitectura de las aplicaciones web

### 📋 Introducción

* La **arquitectura de una aplicación web** se refiere a la **estructura y organización** de los componentes y tecnologías usados para construir una aplicación web.
* Define cómo interactúan las distintas partes de la aplicación para entregar funcionalidades, **manejar solicitudes de usuarios** y **gestionar datos**.
* Una arquitectura bien diseñada es esencial para garantizar la **escalabilidad**, **mantenibilidad** y **seguridad**.
* Antes de realizar una **evaluación de seguridad** en una aplicación web, es **vital** comprender cómo funcionan las aplicaciones web en cuanto a su arquitectura subyacente.

> Este conocimiento permite **identificar y explotar vulnerabilidades o malas configuraciones** de forma más efectiva.

***

### 🖥️ Modelo Cliente-Servidor

* Las aplicaciones web normalmente están basadas en el **modelo cliente-servidor**. Esta arquitectura divide la aplicación en dos componentes principales:

#### Componentes:

* **Cliente**:
  * Representa la **interfaz de usuario** y la interacción del usuario con la aplicación.
  * Es el **front-end**, accesible a través del navegador web.
  * Se encarga de mostrar las páginas web, **manejar entradas del usuario** y **enviar solicitudes** al servidor.
* **Servidor**:
  * Representa el **back-end** de la aplicación.
  * Procesa las solicitudes del cliente, ejecuta la **lógica de negocio**, se comunica con bases de datos y genera respuestas que se envían de vuelta al cliente.

***

### 🧩 Componentes de una Aplicación Web

| Componente                        | Función                                                                                                                                                                                 |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Interfaz de Usuario (UI)**      | Es la presentación visual con la que interactúan los usuarios. Incluye páginas web, formularios, menús, botones y otros elementos interactivos.                                         |
| **Tecnologías del lado cliente**  | Tecnologías como **HTML**, **CSS** y **JavaScript** que crean la interfaz de usuario y manejan las interacciones directamente en el navegador.                                          |
| **Tecnologías del lado servidor** | Tecnologías y lenguajes como **PHP**, **Python**, **Java**, **Ruby** que implementan la lógica de negocio, procesan solicitudes, acceden a bases de datos y generan contenido dinámico. |
| **Bases de Datos**                | Almacenan y gestionan la información de la aplicación, como datos de usuarios, contenido y configuraciones.                                                                             |
| **Lógica de Aplicación**          | Son las reglas y procedimientos que gobiernan cómo funciona la aplicación: autenticación de usuarios, validación de datos, chequeos de seguridad, etc.                                  |
| **Servidores Web**                | Gestionan las solicitudes iniciales del cliente y sirven archivos estáticos como HTML, CSS y JavaScript.                                                                                |
| **Servidores de Aplicaciones**    | Ejecutan el código del servidor y manejan el procesamiento dinámico de las solicitudes del cliente, comunicándose con bases de datos y generando contenido dinámico.                    |

***

### ⚙️ Procesamiento en el Lado del Cliente

* El procesamiento del lado cliente implica ejecutar tareas directamente en el **dispositivo del usuario**, dentro de su navegador web.

#### Características principales:

* **Interacción con el usuario**:
  * Ideal para tareas que requieren **respuesta inmediata** sin necesidad de comunicarse con el servidor.
* **Experiencia de usuario responsiva**:
  * Al procesar localmente, ofrece una experiencia **más fluida** y **rápida**.
* **Uso de JavaScript**:
  * JavaScript es el lenguaje principal para manipular contenido web, manejar interacciones y validar datos en el cliente.
* **Validación de datos**:
  * La validación previa en el cliente evita solicitudes innecesarias al servidor, aunque **no reemplaza** la validación del lado servidor por razones de seguridad.

#### Limitaciones:

* **No es adecuado para operaciones sensibles o críticas**, ya que puede ser manipulado por usuarios o atacantes maliciosos.

***

### 🖥️ Procesamiento en el Lado del Servidor

* El procesamiento del lado servidor implica realizar tareas en el **servidor remoto** donde está alojada la aplicación.

#### Características principales:

* **Procesamiento de datos**:
  * Ideal para manejar datos sensibles, realizar cálculos complejos o interactuar con bases de datos y servicios externos.
* **Seguridad**:
  * El código del servidor es más seguro ya que **no está expuesto al usuario final**.
* **Lenguajes de servidor**:
  * Se utilizan lenguajes como **PHP**, **Python**, **Java**, **Ruby**, entre otros.
* **Almacenamiento de datos**:
  * Permite gestionar de forma segura los datos almacenados en bases de datos o sistemas de almacenamiento.

***

### 🔗 Comunicación y Flujo de Datos

* Las aplicaciones web se comunican a través de **HTTP** (Protocolo de Transferencia de Hipertexto).
* Cuando un usuario interactúa (hace clic en un enlace, envía un formulario, etc.):
  1. El **cliente** envía una **solicitud HTTP** al **servidor**.
  2. El **servidor** procesa la solicitud, interactúa con la base de datos si es necesario, realiza las acciones requeridas y **genera una respuesta HTTP**.
  3. El **cliente** recibe esta respuesta y **renderiza el contenido** para mostrarlo al usuario.