> 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/tecnologias-de-aplicaciones-web.md).

# Tecnologías de aplicaciones web

## 📋 Introducción

* Comprender las **tecnologías web** es esencial para cualquier persona involucrada en el **desarrollo web**, la **seguridad de aplicaciones web** o el **pentesting de aplicaciones web**.
* Como **pentester de aplicaciones web**, interactuarás constantemente, evaluarás y explotarás las tecnologías subyacentes que conforman una aplicación web.
* Por ello, necesitas tener un **conocimiento fundamental** sobre las tecnologías del **lado servidor** y **lado cliente**, su **funcionalidad**, **cuándo** y **por qué** se despliegan.

***

## 🖥️ Tecnologías del Lado Cliente

* **HTML (Hypertext Markup Language)**:
  * Es el **lenguaje de marcado** utilizado para estructurar y definir el contenido de las páginas web.
  * Proporciona la base para crear el diseño y la estructura de la interfaz de usuario (UI).
* **CSS (Cascading Style Sheets)**:
  * Se utiliza para definir la **presentación y estilo** de las páginas web.
  * Permite controlar colores, fuentes, diseño y otros aspectos visuales de la UI.
* **JavaScript**:
  * Es un lenguaje de **scripting** que permite la **interactividad** en las aplicaciones web.
  * Se usa para crear elementos dinámicos y responsivos, manejar interacciones de usuario y realizar validaciones en el cliente.
* **Cookies y Almacenamiento Local**:
  * Son mecanismos del lado cliente para almacenar pequeñas cantidades de datos en el navegador del usuario.
  * Se usan comúnmente para la **gestión de sesiones** y para **recordar preferencias del usuario**.

***

## 🖥️ Tecnologías del Lado Servidor

* **Servidor Web**:
  * Recibe y responde a las solicitudes HTTP de los clientes (navegadores web).
  * Aloja los archivos de la aplicación web, procesa solicitudes y envía respuestas a los clientes.
  * Ejemplos: **Apache2**, **Nginx**, **Microsoft IIS**, etc.
* **Servidor de Aplicaciones**:
  * Ejecuta la **lógica de negocio** de la aplicación web.
  * Procesa solicitudes de usuario, accede a bases de datos y realiza cálculos para generar contenido dinámico que el servidor web sirve a los clientes.
* **Servidor de Base de Datos**:
  * Almacena y gestiona los datos de la aplicación web.
  * Guarda información de usuarios, contenido, configuraciones, y otros datos esenciales.
  * Ejemplos: **MySQL**, **PostgreSQL**, **MSSQL**, **Oracle**, etc.
* **Lenguajes de Scripting del Lado Servidor**:
  * Lenguajes como **PHP**, **Python**, **Java**, **Ruby**, entre otros.
  * Se utilizan para el procesamiento en el servidor: interactúan con bases de datos, realizan validaciones y generan contenido dinámico que luego se envía al cliente.

***

## 🔗 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 (clics, formularios, 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 y **renderiza** el contenido para presentarlo al usuario.

***

## 🔄 Intercambio de Datos

* El **intercambio de datos** es el proceso mediante el cual diferentes sistemas o aplicaciones comparten información.
* Es un aspecto fundamental de la informática moderna, permitiendo la **interoperabilidad** entre sistemas, plataformas y tecnologías.
* Implica convertir los datos a formatos compatibles para que puedan ser correctamente interpretados por el receptor, independientemente de diferencias de estructuras de datos, lenguajes de programación o sistemas operativos.

***

## 🛠️ Tecnologías de Intercambio de Datos

* **APIs (Application Programming Interfaces)**:
  * Permiten que distintos sistemas de software interactúen e intercambien datos.
  * Las aplicaciones web usan APIs para integrarse con servicios externos, compartir datos y ofrecer funcionalidades a otras aplicaciones.

***

## 📄 Protocolos de Intercambio de Datos

* **JSON (JavaScript Object Notation)**:
  * Formato ligero de intercambio de datos.
  * Fácil de leer y escribir tanto para humanos como para máquinas.
  * Basado en sintaxis de JavaScript, muy usado para transmitir datos entre servidor y aplicación web (como alternativa a XML).
* **XML (eXtensible Markup Language)**:
  * Formato de intercambio de datos versátil que usa etiquetas para definir la estructura de los datos.
  * Permite definir etiquetas personalizadas y estructuras de datos complejas.
  * Usado en archivos de configuración, servicios web y para el intercambio de datos entre diferentes sistemas.
* **REST (Representational State Transfer)**:
  * Estilo arquitectónico que utiliza métodos HTTP estándar (GET, POST, PUT, DELETE) para el intercambio de datos.
  * Comúnmente usado para crear APIs web que permiten que aplicaciones interactúen y compartan datos en internet.
* **SOAP (Simple Object Access Protocol)**:
  * Protocolo para intercambiar información estructurada en la implementación de servicios web.
  * Utiliza XML como formato de datos e implementa un método estandarizado de comunicación entre sistemas diferentes.

***

## 🔒 Tecnologías de Seguridad

* **Mecanismos de Autenticación y Autorización**:
  * **Autenticación**: Verifica la identidad del usuario.
  * **Autorización**: Controla el acceso a diferentes partes de la aplicación según roles y permisos.
* **Cifrado (SSL/TLS)**:
  * **SSL** (Secure Socket Layer) o **TLS** (Transport Layer Security) cifran los datos transmitidos entre el cliente y el servidor, asegurando la comunicación y protección de los datos.

***

## 🌍 Tecnologías Externas

* **Redes de Distribución de Contenido (CDNs)**:
  * Distribuyen contenido estático (imágenes, archivos CSS, librerías JavaScript) a múltiples servidores alrededor del mundo.
  * Mejoran el rendimiento y la fiabilidad de la aplicación web.
* **Librerías y Frameworks de Terceros**:
  * Muchas aplicaciones web utilizan librerías y frameworks de terceros para **acelerar el desarrollo** y **acceder a funcionalidades avanzadas**.

***

## 🗃️ Arquitectura páginas web

<figure><img src="/files/7HAskAJcjGEOIAiiq3dp" alt=""><figcaption></figcaption></figure>

***

## 🗳️ Renderizado páginas web

<figure><img src="/files/o79lXVXF07KDNKRFr2IV" alt=""><figcaption></figcaption></figure>

***

## 🩺 Cómo analizan las respuestas los navegadores web

<figure><img src="/files/gT5qszKyKuJJBCqnMLgh" alt=""><figcaption></figcaption></figure>