Funcionamiento de las webs

informatics

Un sitio web es una colección de páginas web interconectadas, accesibles a través de Internet, que contienen información, imágenes, videos, y otros elementos multimedia. Estas páginas se organizan bajo un nombre de dominio común y se almacenan en servidores web. Los sitios web pueden tener diversos propósitos, como proporcionar información, vender productos, ofrecer servicios, o simplemente entretener.

Paginas y Dominios

Página web:

es diferente, un subconjunto del sitio web : Una página web es un documento electrónico con información accesible a través de internet, generalmente en formato HTML, que puede contener texto, imágenes, videos y otros elementos multimedia. en cambio recordemos que un sitio web es un conjunto de páginas web relacionadas, que comparten un mismo dominio.

Subpágina web:

una subpágina es una página que se encuentra dentro de otra página principal, formando una estructura jerárquica dentro de un sitio web : Las subpáginas tienen URLs que derivan de la URL de la página principal, indicando su relación jerárquica. Por ejemplo, si la página principal es zp.com, una subpágina podría ser zp.com/libros/hackingdesde0

dominio:

Un dominio en internet es el nombre único y fácil de recordar que se usa para acceder a un sitio web. En lugar de utilizar una dirección IP numérica (como 1.2.3.4), que es difícil de recordar, se usa un nombre de dominio como "ejemplo.com". Este nombre permite a los usuarios encontrar y visitar sitios web de manera sencilla.

DNS (domain name system):

lo que hace el proceso anteriormente visto en dominio de convertir la IP de la web a dominio es el DNS (incluso se hace en viceversa), el Sistema de Nombres de Dominio, es como la guía telefónica de internet. Traduce nombres de dominio a direcciones IP numéricas que las computadoras pueden entender para acceder a sitios web y otros recursos en línea.

Subdominio:

Un subdominio es una extensión de un nombre de dominio principal que se utiliza para organizar diferentes secciones de un sitio web, creando direcciones web únicas dentro del mismo dominio. Funciona como una especie de prefijo que se añade al dominio principal, separado por un punto, y permite a los usuarios acceder a secciones específicas del sitio de forma más organizada, por ejemplo :

zp.com # dominio original
subdominio.zp.com
subdominio2.zp.com

Función en lado del cliente (usuarios)

Cuando un usuario ingresa una URL en su navegador, este envía una solicitud al servidor que aloja el sitio web. El servidor, a su vez, responde enviando los archivos necesarios (como HTML, CSS y JavaScript) que componen la página web, los cuales son interpretados y renderizados por el navegador para mostrar el contenido al usuario.

Función del lado de la web:

Frontend

El frontend, también conocido como la parte visible o la interfaz de usuario, es la parte de una aplicación web o sitio web con la que los usuarios interactúan directamente. Se refiere a todo lo que ven y experimentan los usuarios al navegar por un sitio web, incluyendo el diseño, la disposición de los elementos, los gráficos, los botones, los menús, los textos y las imágenes.

se centra en:

  • La presentación visual: Diseño, disposición de elementos, colores, tipografías, imágenes, etc.

  • La interacción del usuario: Botones, formularios, menús desplegables, etc., que permiten a los usuarios interactuar con la aplicación.

  • La experiencia del usuario (UX o User Experience): Diseño pensando en la facilidad de uso, la navegación intuitiva y la satisfacción del usuario.

Tecnologías y lenguajes comunes utilizadas en el desarrollo frontend:

  • HTML (HyperText Markup Language): este lenguaje de marcado crea la estructura del contenido de la página.

  • CSS: Estilo visual y presentación de la página.

  • JavaScript: Agrega interactividad y funcionalidad a la página.

  • Frameworks y librerías: React, Angular, Vue.js, etc., facilitan el desarrollo frontend.

Un lenguaje de marcado es un sistema para codificar documentos que incluye texto y etiquetas adicionales para definir la estructura o el formato del texto. Estas etiquetas o marcas indican cómo debe interpretarse o mostrarse el contenido. A diferencia de los lenguajes de programación, los lenguajes de marcado no realizan cálculos ni ejecutan acciones, sino que se centran en la organización y presentación de la información.

Backend

El backend se refiere a la parte de una aplicación web o sistema que no es visible para el usuario final y que se encarga de la lógica, el procesamiento de datos, la gestión de bases de datos y la comunicación con el servidor. En esencia, es la infraestructura que permite que la aplicación funcione correctamente y de forma segura.

El frontend y el backend se comunican principalmente a través de APIs (Interfaces de Programación de Aplicaciones). El frontend realiza solicitudes a la API, que a su vez interactúa con el backend y la base de datos. Luego, el backend devuelve una respuesta al frontend para mostrar la información al usuario.

se centra en:

  • Lógica del servidor: El backend maneja la lógica de la aplicación, procesando las solicitudes del usuario y realizando las acciones necesarias.

  • Bases de datos: Almacena y gestiona los datos de la aplicación, permitiendo que la información se guarde y se recupere de manera eficiente.

  • APIs: Permite la comunicación entre el backend y otras aplicaciones o servicios, facilitando el intercambio de datos.

  • Seguridad: Implementa mecanismos de seguridad para proteger los datos y la aplicación, como la autenticación y autorización de usuarios.

  • Infraestructura: Gestiona los servidores y otros elementos de la infraestructura tecnológica que hacen posible el funcionamiento de la aplicación.

Tecnologías y lenguajes comunes utilizadas en el desarrollo frontend (comunmente):

Lenguajes de programacion:

  • Python: Conocido por su legibilidad y versatilidad, Python es popular en el desarrollo web, machine learning y análisis de datos. Frameworks como Django y Flask facilitan el desarrollo backend con Python.

  • JavaScript: Aunque principalmente conocido por el frontend, Node.js permite ejecutar JavaScript en el backend, lo que facilita el desarrollo full-stack.

  • Java: Ampliamente utilizado en aplicaciones empresariales y sistemas complejos, Java ofrece frameworks robustos como Spring.

  • PHP: Un lenguaje clásico para el desarrollo web, PHP sigue siendo relevante con frameworks como Laravel y Symfony.

  • Go: Destaca por su eficiencia y rendimiento, especialmente en aplicaciones de alto tráfico.

  • Ruby: Ruby on Rails es un framework popular para el desarrollo rápido de aplicaciones web.

  • C#: Utilizado con ASP.NET Core, C# es una opción sólida para el desarrollo backend en entornos .NET.

  • Kotlin: Se ha convertido en una alternativa a Java, especialmente para el desarrollo backend con frameworks como Ktor.

  • Rust: Conocido por su enfoque en la seguridad y eficiencia, Rust está ganando terreno en el backend.

Bases de datos:

  • SQL:Sistemas de bases de datos relacionales como MySQL, PostgreSQL y SQL Server son ampliamente utilizados para almacenar y gestionar datos estructurados.

  • NoSQL:Bases de datos NoSQL como MongoDB son útiles para datos no estructurados y aplicaciones que requieren alta escalabilidad.

Servidores:

  • Apache: Un servidor web popular para alojar aplicaciones web.

  • Nginx: Otro servidor web conocido por su rendimiento y eficiencia.

  • IIS: El servidor web de Microsoft, utilizado principalmente en entornos Windows.

Frameworks:

  • Django (Python):Un framework de alto nivel que facilita el desarrollo rápido de aplicaciones web complejas.

  • Flask (Python):Un framework ligero y flexible que permite un mayor control sobre la aplicación.

  • Express.js (JavaScript):Un framework minimalista para Node.js que permite construir APIs y aplicaciones web rápidamente.

  • Spring (Java):Un framework popular para el desarrollo de aplicaciones Java robustas y escalables.

En resumen, el backend es el "cerebro" de la aplicación, y el frontend la "piel" o "cuerpo"


APIs y comunicación

Una API (Application Programming Interfaces), o Interfaz de Programación de Aplicaciones, es un conjunto de reglas y protocolos que permiten que diferentes aplicaciones de software se comuniquen entre sí. Básicamente, actúa como un intermediario, permitiendo que un programa acceda a las funciones o datos de otro programa sin necesidad de conocer los detalles internos de su funcionamiento.

Como es una API?

En términos más sencillos, imagina que una API es como un menú en un restaurante. El menú (la API) te muestra las opciones disponibles (las funciones y datos) y cómo pedirlas (los protocolos). Tú no necesitas saber cómo se cocina cada plato (la implementación interna de la aplicación), solo cómo hacer tu pedido (usar la API) para obtener lo que quieres.

otro ejemplo: Imagina que estás utilizando una aplicación móvil para reservar un vuelo. Cuando seleccionas la fecha y destino, la aplicación envía una solicitud a la API del proveedor de vuelos. La API consulta la base de datos del proveedor, encuentra los vuelos disponibles y devuelve la información a la aplicación. La aplicación luego muestra esta información al usuario.

Las APIs web suelen utilizar el protocolo HTTP para la comunicación entre el servidor y el cliente (la página web). Las solicitudes se realizan a través de URLs específicas, y las respuestas se devuelven en formatos como JSON o XML, Los tipos de APIs son:

  • API REST: Es una interfaz que sigue el estilo arquitectónico REST (Representational State Transfer), utilizando los métodos del protocolo HTTP para realizar operaciones sobre recursos. Las REST APIs son muy comunes en aplicaciones web modernas debido a su simplicidad, escalabilidad y uso de convenciones estándar, como URLs para acceder a recursos y métodos como GET, POST, PUT y DELETE.

  • API SOAP: Es una interfaz que utiliza el protocolo SOAP (Simple Object Access Protocol), basado en XML, para intercambiar mensajes estructurados entre aplicaciones. SOAP es común en entornos empresariales por su rigidez, robustez, soporte para estándares de seguridad y capacidad para operar sobre múltiples protocolos como HTTP, SMTP y más.

  • API GraphQL: Es una interfaz que permite a los clientes definir exactamente qué datos necesitan, optimizando la eficiencia de las respuestas. A diferencia de REST, GraphQL funciona mediante una única URL y permite estructurar consultas que reducen el sobreflujo o falta de datos. Es ideal para aplicaciones modernas con necesidades dinámicas de datos.

  • API WebSocket: Permite la comunicación bidireccional en tiempo real entre el cliente y el servidor mediante una conexión persistente. A diferencia de las peticiones HTTP tradicionales, WebSocket mantiene una conexión abierta, lo cual es ideal para aplicaciones que requieren actualizaciones en vivo como chats, videojuegos o notificaciones en tiempo real.

  • API de base de datos: Es una interfaz que permite a las aplicaciones conectarse, consultar, insertar y manipular datos almacenados en sistemas de gestión de bases de datos. Estas APIs pueden estar basadas en SQL (como PostgreSQL, MySQL) o en sistemas NoSQL (como MongoDB, Firebase), y facilitan el acceso estructurado a la información persistente.

  • API del sistema operativo: Es una interfaz que proporciona acceso a funciones y servicios del sistema operativo, permitiendo que los programas interactúen con recursos como archivos, procesos, red y hardware. Ejemplos incluyen WinAPI en Windows, POSIX en sistemas Unix/Linux o el SDK de Android, que permiten desarrollar software que se integra profundamente con el sistema subyacente.

las APIs usan endpoints, un endpoint de API es la ubicación específica en un servidor donde un cliente puede solicitar recursos o realizar acciones a través de una API. Es la "dirección" dentro de la API a la que se envían las solicitudes para acceder a datos o funcionalidades específicas:

  • Punto de contacto: Un endpoint actúa como el punto de contacto entre un cliente (como una aplicación móvil o un navegador web) y el servidor que aloja la API.

  • Recursos y acciones: Cada endpoint está asociado a un recurso específico (por ejemplo, un usuario, un producto, una publicación) o a una acción (por ejemplo, crear, leer, actualizar, eliminar) que puede realizarse sobre ese recurso.

  • URL específica: Los endpoints suelen representarse como URLs únicas que indican la ubicación del recurso o acción en el servidor.

  • Métodos HTTP: Las solicitudes a los endpoints se realizan a través de métodos HTTP como GET (para obtener datos), POST (para crear datos), PUT/PATCH (para actualizar datos) y DELETE (para eliminar datos).

  • Ejemplo: Si una API proporciona acceso a datos de usuarios, un endpoint podría ser /users para obtener todos los usuarios, o /users/{id} para obtener un usuario específico por su ID.

Request & Request methods

En informática, una petición, solicitud o request es una comunicación que un cliente envía a un servidor para solicitar un recurso o realizar una acción. Es una parte fundamental del modelo cliente-servidor, donde el cliente envía la petición y el servidor responde con la información o resultado solicitado,

los métodos de petición (o métodos HTTP) son las instrucciones que un cliente (como un navegador web) envía a un servidor para indicarle la acción que se desea realizar sobre un recurso específico. En otras palabras, definen la forma en que un cliente solicita o interactúa con un recurso en el servidor.

El modelo cliente-servidor es una arquitectura de red en la que los clientes solicitan recursos o servicios de un servidor centralizado. El servidor proporciona esos recursos o servicios a los clientes que los solicitan. Es un patrón fundamental en el diseño de sistemas distribuidos y es la base de muchas aplicaciones de Internet.

Los métodos HTTP más comunes son GET, POST, PUT, DELETE, PATCH, HEAD, DELETE, CONNECT y OPTIONS. Estos métodos definen las acciones que se pueden realizar en un recurso en un servidor.

Método
Idempotente
Descripción
Uso principal

GET

✔ Sí

Solicita datos de un recurso. No debe modificar el estado del servidor.

Obtener datos (páginas, APIs)

HEAD

✔ Sí

Igual que GET pero solo devuelve los encabezados, sin cuerpo de respuesta.

Verificar recursos sin descargar

POST

✘ No

Envía datos al servidor. Puede crear o modificar recursos.

Formularios, APIs, subir archivos

PUT

✔ Sí

Reemplaza por completo un recurso en el servidor.

Actualizar o crear recursos

PATCH

✘ No

Modifica parcialmente un recurso.

Actualizaciones parciales

DELETE

✔ Sí

Elimina un recurso del servidor.

Eliminar datos

OPTIONS

✔ Sí

Devuelve los métodos HTTP soportados por un recurso.

CORS, detección de capacidades

TRACE

✔ Sí

Devuelve lo enviado al servidor (eco).

Depuración HTTP (no recomendado por seguridad)

CONNECT

✘ No

Establece un túnel para comunicaciones seguras como HTTPS.

Túneles TCP (proxy HTTPS)

Idempotente: Hacer la misma petición varias veces tiene el mismo efecto


Cookies y Tokens

Las cookies y los tokens son mecanismos utilizados para la autenticación y el seguimiento de sesiones en aplicaciones web, pero difieren en cómo almacenan y gestionan la información. Las cookies son pequeños archivos de texto que los sitios web almacenan en el navegador del usuario y se envían de vuelta al servidor con cada solicitud, mientras que los tokens son cadenas de caracteres que representan la autenticación del usuario y se envían en las cabeceras de las solicitudes.

Cookies:

  • Son pequeños archivos de texto que los sitios web guardan en el navegador del usuario.

  • Se utilizan para recordar información del usuario, como inicio de sesión, preferencias, o elementos del carrito de compras.

  • Son enviadas al servidor con cada solicitud, permitiendo al servidor identificar al usuario.

  • Pueden ser configuradas con diferentes propiedades, como expiración, seguridad, y accesibilidad.

  • Pueden ser almacenadas en el navegador del usuario de forma persistente o para la duración de la sesión.

Cuando visitas un sitio web, este puede enviar una cookie de sesión a tu navegador. Esta cookie contiene un identificador único que permite al sitio web reconocer que eres el mismo usuario que ha estado navegando anteriormente en la misma sesión.

Tokens:

  • Son cadenas de caracteres que representan la autenticación del usuario.

  • Comúnmente se utilizan tokens JSON Web Tokens (JWT).

  • Se utilizan principalmente para autenticación y autorización en aplicaciones web y APIs.

  • Son enviados al servidor en las cabeceras de las solicitudes HTTP, generalmente en el encabezado de "Autorización".

  • Suelen ser de corta duración y caducan después de un período de tiempo o evento.

  • Pueden contener información adicional del usuario, como roles o permisos.

Cuando un usuario inicia sesión, el servidor genera un JWT y lo devuelve al cliente. Este token contiene información sobre el usuario (llamada "payload") y una firma digital para garantizar su integridad.


SEO

SEO, o Search Engine Optimization (Optimización para motores de búsqueda), es el conjunto de estrategias y técnicas dirigidas a mejorar la visibilidad de un sitio web en los resultados orgánicos de los motores de búsqueda como Google. En esencia, se trata de hacer que tu sitio web sea más atractivo para los motores de búsqueda y, por lo tanto, aparezca en una posición más alta cuando los usuarios buscan información relacionada con tu contenido. El SEO:

  • Aumenta la visibilidad: Un buen posicionamiento SEO hace que tu sitio web sea más fácil de encontrar para los usuarios que buscan productos, servicios o información que ofreces.

  • Atrae tráfico orgánico: El SEO se enfoca en atraer tráfico a tu sitio web de forma orgánica, es decir, sin necesidad de pagar por publicidad.

  • Mejora la experiencia del usuario: Para lograr un buen posicionamiento, es necesario optimizar la estructura y el contenido de tu sitio web, lo que a menudo resulta en una mejor experiencia para el usuario.

Los motores de búsqueda utilizan algoritmos complejos para rastrear e indexar sitios web. Estos algoritmos evalúan diversos factores para determinar la relevancia de un sitio web para una consulta de búsqueda, incluyendo:

  • Palabras clave: La relevancia de las palabras clave que utiliza tu sitio web para describir su contenido.

  • Contenido de calidad: La calidad, originalidad y relevancia del contenido que ofreces a los usuarios.

  • Estructura del sitio web: La facilidad con la que los usuarios y los motores de búsqueda pueden navegar e interactuar con tu sitio web.

  • Enlaces entrantes (backlinks): La cantidad y calidad de los enlaces que apuntan a tu sitio web desde otros sitios relevantes.

  • Experiencia del usuario (UX): La facilidad de uso, la velocidad de carga y la adaptabilidad de tu sitio web a diferentes dispositivos.


Recursos estáticos y dinámicos

En términos generales, los recursos estáticos son aquellos que no cambian o varían, mientras que los recursos dinámicos son aquellos que pueden cambiar o variar con el tiempo o con la interacción del usuario. En el contexto de páginas web, los recursos estáticos son archivos que se sirven tal cual se guardaron, como imágenes, hojas de estilo CSS y archivos JavaScript, mientras que los recursos dinámicos son aquellos que se generan en tiempo real, como contenido generado por bases de datos o interacciones del usuario.

Recursos Estáticos:

  • Ejemplos:

    • Imágenes (JPG, PNG, GIF)

    • Hojas de estilo CSS

    • Archivos JavaScript

    • Archivos HTML pre-renderizados (en sitios web estáticos)

  • Características:

    • Fáciles de almacenar en caché

    • Rápida entrega al navegador

    • Simples de implementar

    • No cambian a menos que se actualicen manualmente

Recursos Dinámicos:

  • Ejemplos:

    • Contenido generado por bases de datos

    • Resultados de búsquedas

    • Contenido personalizado para cada usuario

    • Datos que se actualizan en tiempo real

  • Características:

    • Más complejos de implementar y mantener

    • Difíciles de almacenar en caché

    • Ofrecen una experiencia más personalizada

    • Pueden variar según la interacción del usuario


CORS

CORS, o Cross-Origin Resource Sharing (Intercambio de Recursos entre Orígenes), es un mecanismo de seguridad implementado en los navegadores web para controlar las peticiones HTTP realizadas desde un origen (dominio, protocolo y puerto) diferente al del recurso solicitado. Básicamente, permite a los servidores web especificar qué orígenes están permitidos para acceder a sus recursos, evitando así el acceso no autorizado y protegiendo contra ataques como el Cross-Site Scripting (XSS).

Cuando un navegador web intenta acceder a un recurso de un origen diferente, envía una solicitud al servidor con una cabecera "Origin" que indica el origen de la solicitud, El servidor, a su vez, responde con cabeceras CORS que indican si se permite el acceso desde ese origen y qué métodos HTTP son válidos.

Cabeceras:

  • Access-Control-Allow-Origin: Especifica los orígenes permitidos para acceder al recurso.

  • Access-Control-Allow-Methods: Especifica los métodos HTTP permitidos (GET, POST, PUT, DELETE, etc.).

  • Access-Control-Allow-Headers: Especifica las cabeceras HTTP permitidas en la solicitud.


CDNs

Un CDN, o Red de Entrega de Contenido (Content Delivery Network), es un conjunto de servidores distribuidos geográficamente que almacenan copias de contenido web, como imágenes, videos, hojas de estilo, etc., para que los usuarios puedan acceder a este contenido de forma más rápida y eficiente. En lugar de que todos los usuarios accedan al contenido desde un solo servidor central, lo hacen desde el servidor CDN más cercano a su ubicación, lo que reduce la latencia y mejora la velocidad de carga del sitio web.

Cuando un usuario solicita contenido de un sitio web que utiliza un CDN, el CDN verifica si tiene una copia del contenido en caché en su servidor más cercano.

  1. Entrega del contenido: Si el CDN tiene la copia en caché, la entrega directamente al usuario, lo que resulta en una carga rápida.

  2. Actualización del contenido: Si el contenido ha sido actualizado en el servidor original, el CDN lo detecta y actualiza su copia en caché para garantizar que los usuarios siempre tengan acceso a la versión más reciente.

Al entregar contenido desde servidores más cercanos a los usuarios, se reduce la latencia y se acelera la carga de las páginas, lo que resulta en una mejor experiencia de usuario. Al distribuir el contenido a través de múltiples servidores, se reduce la carga en el servidor original, lo que puede mejorar el rendimiento general del sitio web y prevenir problemas de rendimiento durante picos de tráfico.

como Identificar si una web usa CDN

Para identificar si un sitio web está usando una CDN, puedes revisar el código fuente de la página, analizar las URLs de los recursos, o utilizar herramientas online para verificar el uso de CDN. Las herramientas de desarrollador del navegador son útiles para ver las URLs de los recursos estáticos (imágenes, CSS, JS, etc.) y si estas apuntan a dominios que son conocidos por ser CDN.

Identificar un CDN:

  • Haz clic derecho en la página web y selecciona "Ver código fuente" o "Inspeccionar elemento".

  • Busca las URLs de los recursos estáticos como imágenes, archivos CSS, JavaScript, etc.

  • Si las URLs apuntan a dominios que son conocidos por ser de CDN (por ejemplo, cdn.ejemplo.com, nombre-cdn.sitioweb.com, o nombres similares), es probable que el sitio esté usando una CDN.

  • Algunos CDN tienen URLs que no son tan obvias, por lo que es útil buscar patrones o nombres que se repitan en las URLs de los recursos.


Websockets

Los WebSockets son una tecnología que permite la comunicación bidireccional (capaz de funcionar en dos direcciones, usualmente opuestas) y persistente entre un cliente (como un navegador web) y un servidor, a través de una única conexión TCP. A diferencia del protocolo HTTP tradicional, que usa una solicitud-respuesta para cada interacción, los WebSockets establecen una conexión continua que permite que ambas partes (cliente y servidor) envíen datos en cualquier momento.

  • Comunicación bidireccional: Los WebSockets permiten que tanto el cliente como el servidor envíen datos al otro en cualquier momento, sin necesidad de que uno espere una solicitud del otro.

  • Conexión persistente: A diferencia de HTTP, que abre y cierra una conexión para cada solicitud, los WebSockets establecen una conexión duradera que se mantiene activa hasta que una de las partes la cierra explícitamente.

  • Basado en TCP: Los WebSockets utilizan el protocolo TCP para establecer la conexión inicial y luego operan sobre esa conexión para intercambiar datos.

  • Uso en tiempo real: Esta tecnología es ideal para aplicaciones que requieren actualizaciones en tiempo real, como chats, juegos multijugador, notificaciones, etc.

  • Ventajas: Baja latencia, eficiencia (menos sobrecarga por cada mensaje), y capacidad de enviar y recibir datos en ambos sentidos.

  • Desventajas: Mayor complejidad en la implementación en comparación con las APIs REST.

Cómo identificar si una web usa WebSockets

  1. Abre la página web que quieres analizar.

  2. Haz clic derecho → "Inspeccionar" o presiona F12.

  3. Ve a la pestaña "Network" (Red).

  4. Recarga la página (F5) para capturar todas las conexiones.

  5. Filtra por "WS" (WebSocket) o busca en el tipo de conexión.

  • Si hay WebSockets, aparecerá una o varias conexiones con:

    • Tipo: websocket

    • Protocolo: ws:// o wss://

    • Nombre del archivo: puede ser algo como socket, stream, live, chat, etc.

Ejemplo:

makefileCopiarEditarURL: wss://ejemplo.com/socket.io/?EIO=4&transport=websocket
Status: 101 Switching Protocols

2. Ver el código JavaScript de la web

Puedes revisar si el frontend incluye algo como:

javascriptCopiarEditarconst socket = new WebSocket("wss://ejemplo.com/socket");

O si usa alguna librería como Socket.IO, verás líneas como:

javascriptCopiarEditarconst socket = io("wss://ejemplo.com");

Busca palabras clave como:

  • new WebSocket(

  • io( (si usa socket.io)

  • socket.emit

  • socket.on

En la fase de reconocimiento en un pentest, podrás identificar mas facilmente si hay websockets.

  • ws:// WebSocket sin cifrado (como HTTP).

  • wss:// WebSocket sobre TLS (como HTTPS).


Cache web

La caché web es un mecanismo que almacena temporalmente datos de páginas web para acelerar la carga de estas en futuras visitas. Básicamente, guarda copias de elementos como imágenes, código HTML, y archivos JavaScript en tu navegador o en servidores intermedios. Esto significa que cuando vuelves a visitar un sitio, el navegador puede cargar algunos elementos directamente desde la caché en lugar de descargarlos nuevamente del servidor original, lo que resulta en una experiencia de navegación más rápida.

  1. Cuando visitas un sitio web por primera vez, tu navegador descarga todos los elementos necesarios para mostrar la página, incluyendo imágenes, código HTML, hojas de estilo (CSS), y scripts (JavaScript).

  2. Estos elementos se guardan en la caché, ya sea en tu navegador (caché del navegador) o en servidores proxy o CDN

  3. En visitas posteriores al mismo sitio web, el navegador verifica si los elementos necesarios ya existen en la caché.

  4. Si los elementos están disponibles en la caché, el navegador los carga directamente desde allí, lo que acelera significativamente el proceso de carga de la página.

Tipos de caché web:

  • Caché del navegador: Se almacena en el dispositivo del usuario y es específica para cada navegador.

  • Caché de servidor: Se almacena en servidores proxy o CDN y puede ser compartida por varios usuarios.


Cabeceras HTTP

Las cabeceras HTTP son fragmentos de información que se envían entre un cliente (como un navegador web) y un servidor web cuando se solicita una página web. Estas cabeceras contienen metadatos, es decir, información adicional sobre la solicitud o la respuesta, como el tipo de contenido, la longitud del contenido, la fecha y la hora, entre otros. Básicamente, son como etiquetas que acompañan a la solicitud o respuesta HTTP para proporcionar detalles relevantes para la comunicación entre el cliente y el servidor.

  • Información sobre la solicitud: Indican al servidor qué tipo de contenido está solicitando el cliente, qué tipo de formato prefiere, qué idioma habla, etc.

  • Información sobre la respuesta: Informan al cliente sobre el tipo de contenido que está recibiendo, la longitud del contenido, la fecha y hora de la respuesta, si hay algún problema con la solicitud, etc.

  • Control de caché: Permiten al cliente y al servidor gestionar la forma en que se almacena en caché el contenido, para mejorar el rendimiento y reducir la carga del servidor.

  • Autenticación y seguridad: Algunas cabeceras se utilizan para autenticar al cliente, como la cabecera Authorization, o para proteger la conexión, como las cabeceras de seguridad.

  • Información sobre el servidor: Indican información sobre el servidor web que está sirviendo la página, como su nombre y versión.

Tipos de cabeceras HTTP:

Existen diferentes tipos de cabeceras HTTP, que se pueden clasificar en:

  • Cabeceras generales: Se aplican tanto a las solicitudes como a las respuestas.

  • Cabeceras de solicitud: Contienen información sobre la solicitud del cliente.

  • Cabeceras de respuesta: Contienen información sobre la respuesta del servidor.

  • Cabeceras de entidad: Contienen información sobre el cuerpo de la solicitud o la respuesta.

Ejemplos de cabeceras HTTP (comunes):

  • Content-Type: Indica el tipo de contenido (ej. "text/html", "application/json").

  • Content-Length: Indica la longitud del contenido.

  • Cache-Control: Controla la forma en que se almacena en caché el contenido.

  • Authorization: Contiene información de autenticación.

  • User-Agent: Identifica el navegador web que está realizando la solicitud.

  • Host: Especifica el nombre de dominio del servidor.

  • Status: Indica el estado de la solicitud, por ejemplo, "200 OK" (éxito) o "404 Not Found" (no encontrado).


indexación

La indexación es un proceso que consiste en registrar y organizar datos de manera que puedan ser encontrados y recuperados fácilmente. En términos generales, se refiere a la creación de un índice o catálogo que permite acceder a la información de forma rápida y eficiente. Hay diferentes tipos de indexación, dependiendo del contexto, como la indexación de sitios web para motores de búsqueda, la indexación de documentos en una base de datos, o la indexación de contenido en un sistema operativo.

aplicándolo a la web, la indexación es el proceso de los motores de búsqueda como Google rastrean y analizan páginas web, extrayendo información clave (palabras clave, metadatos, etc.) para crear un índice. Este índice permite que los motores de búsqueda muestren resultados relevantes a las consultas de los usuarios, funciona así:

  1. Rastreo: Los motores de búsqueda utilizan programas llamados "robots" o "arañas (web crawlers)" (como Googlebot) para navegar por la web, siguiendo enlaces de página en página.

  2. Procesamiento: Una vez que se encuentra una página web, el robot analiza su contenido (texto, imágenes, etc.) y otros datos relevantes (metadatos).

  3. Almacenamiento: La información obtenida se almacena en el índice del motor de búsqueda, creando una especie de catálogo con la información de las páginas web.

¿Por qué es importante la indexación?

  • Visibilidad en línea: Si una página no está indexada, no aparecerá en los resultados de búsqueda y, por lo tanto, será difícil de encontrar para los usuarios.

  • Posicionamiento: La indexación es un paso fundamental para el posicionamiento web (SEO), ya que permite que los motores de búsqueda encuentren y muestren tu contenido cuando los usuarios realizan búsquedas relacionadas.

Robots.txt

El archivo robots.txt es un archivo de texto que se encuentra en la raíz de un sitio web y contiene instrucciones para los robots de búsqueda (como Googlebot) sobre qué partes del sitio pueden o no pueden rastrear. Es como un "manual de instrucciones" para los robots, indicándoles qué áreas son de acceso público y cuáles deben ser ignoradas.

ejemplo de robots.txt

este como se menciono anteriormente en la raíz, en la URL debería verse parecido a: https://ejemplo.com/robots.txt

Sitemap.xml

por otro lado, Un sitemap.xml es un archivo en formato XML que enumera todas las URLs de un sitio web, ayudando a los motores de búsqueda a rastrear e indexar el sitio de manera más eficiente. Actúa como una guía para los motores de búsqueda, indicándoles qué páginas son importantes y cómo están organizadas dentro del sitio.

ejemplo de sitemap.xml

Además de las URLs, el sitemap puede incluir información adicional sobre cada página, como la fecha de última modificación o la frecuencia de actualización, lo que ayuda a los motores de búsqueda a entender mejor el contenido y mejora el SEO.


Bases de datos


Seguridad en las webs

La seguridad en las páginas web se refiere a las medidas y prácticas implementadas para proteger sitios web y sus datos contra ataques cibernéticos y accesos no autorizados. Esto incluye proteger la información del usuario, prevenir la pérdida de datos y garantizar la disponibilidad del sitio web.

SSL/TLS:

SSL/TLS son protocolos de seguridad que encriptan la comunicación entre un navegador web y un servidor, asegurando que los datos transmitidos sean privados y seguros. SSL (Secure Sockets Layer) es la tecnología original, y TLS (Transport Layer Security) es su sucesor más seguro y actualizado. Ambos protocolos utilizan cifrado para proteger la información, autenticar la identidad del sitio web y evitar que los atacantes manipulen las comunicaciones, utiliza certificados digitales que verifican la identidad del sitio web y establecen una conexión cifrada. El cifrado protege la información de ser interceptada por terceros, mientras que la autenticación asegura que el usuario está interactuando con el sitio web correcto.

La presencia de SSL/TLS se indica mediante el protocolo HTTPS (en lugar de HTTP) al principio de la dirección web, y a menudo se ve un icono de candado en la barra de direcciones del navegador.


WAFs y Firewalls

Un firewall es un sistema de seguridad que actúa como una barrera entre una red interna (como la de tu casa o empresa) y redes externas (como Internet). Su función principal es proteger la red de accesos no autorizados y tráfico malicioso. Actúa como un filtro que examina el tráfico de datos que entra y sale de la red, permitiendo solo el tráfico seguro y bloqueando el potencialmente peligroso.

un firewall de red tradicional no es suficiente para proteger una aplicación web. Se necesita un firewall de aplicaciones web (WAF) específico para este propósito. El Firewall de red protegen la infraestructura de red, como servidores, computadoras y dispositivos, del acceso no autorizado y el tráfico malicioso. Su enfoque principal es controlar el tráfico entre redes (por ejemplo, entre una red interna y Internet).

Un WAF (Web Application Firewall) es un firewall de aplicaciones web. Actúa como una barrera entre las aplicaciones web e Internet, protegiéndolas de ataques comunes como inyección SQL, cross-site scripting (XSS) y otros ataques a nivel de aplicación. Funciona analizando el tráfico HTTP y bloqueando el tráfico malicioso antes de que llegue a la aplicación web.

El WAF se diferencia de los firewalls de red tradicionales en que se centra en la protección de las aplicaciones web y opera en la capa de aplicación (capa 7 del modelo OSI). Los firewalls de red, por otro lado, protegen el tráfico de red en general, filtrando por direcciones IP y puertos.


Sanitización

la sanitización se refiere al proceso de limpiar y proteger los datos que ingresan o se transmiten a través de la misma. Esto implica eliminar o modificar elementos potencialmente dañinos o no deseados, como etiquetas HTML, código JavaScript, comandos SQL o datos personales, para prevenir vulnerabilidades de seguridad y garantizar la integridad de la información, la sanitización se puede realizar de varias maneras, dependiendo del tipo de datos y el lenguaje de programación utilizado. Algunas técnicas comunes incluyen:

  • Validación de entrada: Verificar que los datos cumplan con ciertos formatos y restricciones antes de ser procesados.

  • Escapado de caracteres: Convertir caracteres especiales en entidades HTML o códigos seguros para evitar que sean interpretados como código.

  • Filtrado de datos: Eliminar o modificar datos que no cumplen con los criterios de seguridad establecidos.

  • Uso de bibliotecas o frameworks seguros: Estas herramientas ofrecen funciones y métodos para manejar datos de forma segura y prevenir vulnerabilidades.


IDS/IPS

IDS (Sistema de Detección de Intrusiones) e IPS (Sistema de Prevención de Intrusiones) son herramientas de ciberseguridad que monitorean redes en busca de actividades maliciosas. La principal diferencia es que los IDS detectan y alertan sobre amenazas, mientras que los IPS detectan y también bloquean esas amenazas activamente.

IDS (Sistema de Detección de Intrusiones):

  • Función: Monitorea el tráfico de red en busca de actividades sospechosas, como patrones de ataque conocidos o anomalías que podrían indicar una intrusión.

  • Acción: Genera alertas para notificar a los administradores de seguridad sobre posibles amenazas.

  • Enfoque: Detecta y alerta, pero no bloquea automáticamente el tráfico malicioso.

IPS (Sistema de Prevención de Intrusiones):

  • Función: Similar al IDS, monitorea el tráfico de red en busca de amenazas y actividades sospechosas.

  • Acción: No solo detecta, sino que también puede tomar medidas activas para bloquear el tráfico malicioso, como bloquear conexiones, eliminar paquetes o incluso reiniciar dispositivos.

  • Enfoque: Detecta y previene, ofreciendo una capa adicional de protección al bloquear las amenazas en lugar de solo alertar sobre ellas.


Last updated