Cliente vs. servidor

Objetivo

Identificar qué partes de una aplicación web se ejecutan en el cliente y cuáles en el servidor, diferenciando las responsabilidades de ambos entornos.

1. ¿Cliente o servidor?

Indica dónde se realizaría principalmente cada una de las siguientes operaciones: cliente, servidor o ambos.

Justifica brevemente cada respuesta.

Operación	Cliente / servidor / ambos	Justificación
Mostrar u ocultar un menú al pulsar un botón.
Consultar los clientes almacenados en una base de datos.
Comprobar que un campo obligatorio no está vacío.
Comprobar las credenciales de un usuario.
Cambiar el color de un elemento de la interfaz.
Comprobar que un usuario tiene permiso para eliminar un cliente.
Mostrar los clientes recibidos desde el servidor.
Guardar un nuevo cliente en la base de datos.

2. Flujo cliente-servidor

Una aplicación muestra un listado de clientes almacenados en una base de datos.

Ordena las siguientes operaciones según el orden en que se producirían:

• El servidor consulta la base de datos.
• JavaScript actualiza la interfaz.
• El usuario solicita visualizar los clientes.
• El navegador realiza una petición al servidor.
• El servidor devuelve los datos.
• El navegador recibe la respuesta.

Después, indica cuáles de estas operaciones se producen en el cliente y cuáles en el servidor.

3. Validación de un formulario

Una aplicación permite crear una cuenta utilizando un formulario con correo electrónico y contraseña.

La aplicación realiza las siguientes comprobaciones:

1. El correo tiene un formato válido.
2. La contraseña tiene al menos 8 caracteres.
3. El correo no está registrado previamente.
4. Los datos recibidos son válidos antes de guardarlos.

Indica cuáles de estas comprobaciones podrían realizarse en el cliente, cuáles deben realizarse en el servidor y cuáles deberían realizarse en ambos.

Explica brevemente por qué las validaciones realizadas únicamente en el cliente no son suficientes para garantizar la seguridad de una aplicación web.

4. Peticiones y respuestas HTTP

El navegador se comunica con los servidores mediante peticiones HTTP. Las respuestas incluyen un código de estado que indica el resultado de la petición.

En este ejercicio utilizaremos dos clientes HTTP diferentes:

• El navegador.
• La herramienta de línea de comandos curl.

Utilizaremos http-stat.us, un servicio que permite generar respuestas con diferentes códigos de estado HTTP.

Peticiones desde el navegador

Abre las DevTools del navegador y selecciona la pestaña Network.

Accede, una a una, a las siguientes direcciones:

Código	Significado	URL
200	OK.	https://http-stat.us/200
301	Redirección permanente.	https://http-stat.us/301
401	No autorizado.	https://http-stat.us/401
404	No encontrado.	https://http-stat.us/404
500	Error interno del servidor.	https://http-stat.us/500

Para cada una de las direcciones, localiza la petición correspondiente en Network y documenta mediante capturas de pantalla la siguiente información:

1. El código de estado HTTP obtenido.
2. Las cabeceras de la petición (Request Headers).
3. Las cabeceras de la respuesta (Response Headers).
4. El cuerpo de la petición (Request Body), si existe.
5. El cuerpo de la respuesta (Response Body).

Acompaña las capturas con un breve comentario indicando la información más relevante que hayas observado en cada petición y respuesta.

Qué observar

No es necesario comentar todas las cabeceras. Identifica y explica únicamente las que consideres más relevantes.

Presta especial atención a información como:

• El método HTTP utilizado.
• La URL solicitada.
• El código de estado recibido.
• El tipo de contenido de la respuesta.
• El cliente que realiza la petición.
• La existencia o no de cuerpo en la petición y en la respuesta.
• Las cabeceras relacionadas con una redirección, cuando existan.

Redirecciones

En el caso del código 301, el navegador puede seguir automáticamente la redirección y realizar una nueva petición.

Observa en Network las distintas peticiones realizadas y analiza sus correspondientes códigos de estado, cabeceras y cuerpos.

Peticiones con curl

Realiza ahora las mismas peticiones desde el terminal utilizando curl con la opción -v.

curl -v https://http-stat.us/200
curl -v https://http-stat.us/301
curl -v https://http-stat.us/401
curl -v https://http-stat.us/404
curl -v https://http-stat.us/500

La opción -v

La opción -v (--verbose) permite observar con detalle la comunicación HTTP.

En la salida de curl:

• > identifica las cabeceras de la petición enviada por el cliente.
• < identifica las cabeceras de la respuesta recibida del servidor.
• * identifica información adicional sobre la conexión.
• El cuerpo de la respuesta se muestra directamente en la salida.

Incluye una captura de cada ejecución y comenta brevemente la información más relevante de las peticiones y respuestas, comparándola con la observada anteriormente en el navegador.

Redirecciones con curl

Por defecto, curl no sigue automáticamente las redirecciones. Compruébalo comparando:

curl -v https://http-stat.us/301

con:

curl -vL https://http-stat.us/301

La opción -L (--location) indica a curl que debe seguir las redirecciones.

Incluye una captura de ambas ejecuciones y comenta las diferencias observadas.

Preguntas

Responde finalmente:

1. ¿Qué función realizan el navegador y curl en estas comunicaciones: cliente o servidor?
2. ¿Qué función realiza http-stat.us: cliente o servidor?
3. ¿Quién genera el código de estado HTTP: el cliente o el servidor?
4. ¿Qué diferencia has observado al realizar una petición 301 desde el navegador, con curl -v y con curl -vL?