Entornos de ejecución: cliente, servidor y aislamiento
¿Por qué un mismo lenguaje de programación puede leer archivos del disco y conectarse a la base de datos cuando corre en tu servidor, pero tiene prohibido hacer exactamente eso cuando corre dentro del navegador web de un usuario? Porque las capacidades y restricciones no las decide solo el lenguaje, sino el entorno de ejecución donde corre ese código.
Objetivos y conocimientos previos
Integrando todo el Curso IV y las fronteras de confianza del Curso III, aprenderás a no confundir un lenguaje con su entorno de ejecución, a distinguir dentro del navegador las responsabilidades de estructura (marcado), presentación (estilo) y comportamiento (programación), y a decidir qué lógica debe vivir en el cliente y cuál en el servidor.
Un lenguaje no es un entorno de ejecución
A menudo se clasifican erróneamente los lenguajes en «lenguajes del sistema operativo» y «lenguajes del navegador». En realidad:
- Un lenguaje es el conjunto de reglas gramaticales y semánticas con las que expresamos lógica (por ejemplo, JavaScript, Python, Go o Rust).
- Un entorno de ejecución (runtime environment) es el lugar donde ese código se interpreta o ejecuta, junto con los permisos y herramientas que ese lugar pone a su disposición.
Un mismo lenguaje (como JavaScript o Python) puede ejecutarse dentro del navegador web de un usuario o directamente sobre el sistema operativo de un servidor. Lo que cambia radicalmente de un lugar a otro son las capacidades disponibles y el modelo de seguridad:
| Dimensión | Entorno del Cliente (ej. Navegador Web) | Entorno del Servidor (Sistema Operativo en tu infraestructura) |
|---|---|---|
| En qué máquina corre | En el ordenador o teléfono de cada persona que visita la aplicación. | En una máquina controlada por el propietario del sistema. |
| Aislamiento hacia la máquina (Sandbox) | Muy estricto: el código de una página web corre encerrado en una caja de arena (sandbox). No puede leer ni borrar libremente los archivos del disco del usuario ni espiar otras pestañas, para proteger a la persona que navega. | Privilegiado según permisos del SO: el proceso puede leer archivos autorizados, abrir conexiones directas a bases de datos y usar claves secretas del servidor. |
| Confianza desde el punto de vista del sistema | Cero: como corre en la máquina del usuario, este puede ver todo el código descargado, leer cualquier clave incluida allí y modificar qué se ejecuta en su pantalla. | Alta (Frontera custodiada): el usuario externo no puede ver el código interno del servidor ni sus secretos, solo comunicarse con él mediante contratos (APIs). |
| Propósito principal | Presentar la interfaz, reaccionar al instante a gestos o clics del usuario y comunicarse por red con el servidor. | Custodiar secretos, hacer cumplir las reglas del dominio, coordinar la concurrencia y persistir datos. |
Cómo colaboran estructura, estilo y lógica en el entorno web
Cuando el entorno de ejecución es un navegador web, intervienen tres tecnologías con naturalezas lógicas muy distintas que no deben confundirse:
- 1. Lenguaje de Marcado (HTML): declara la estructura semántica y jerárquica del contenido (títulos, tablas, formularios, botones)
- 2. Reglas de Presentación (CSS): describen la disposición visual, colores, tipografía y adaptación a distintas pantallas
- 3. Lenguaje de Programación (JavaScript): ejecuta lógica interactiva en el cliente, responde a eventos del usuario, actualiza la estructura en memoria (DOM) y envía peticiones al servidor
- El marcado (HTML) y las hojas de estilo (CSS) son declarativos: describen qué estructura tiene el documento y cómo debe presentarse, pero no ejecutan algoritmos de negocio ni toman decisiones sobre transacciones.
- El modelo del documento en memoria (DOM): el navegador convierte el HTML en un árbol de objetos en la memoria RAM de esa pestaña. El código de programación del cliente puede modificar ese árbol para mostrar un aviso de error o actualizar un contador en pantalla sin recargar toda la página, pero cualquier cambio hecho solo en el DOM vive únicamente en la pantalla temporal de ese usuario hasta que el servidor lo valide y persista.
Cómo decidir dónde debe ejecutarse cada pieza
Al revisar una funcionalidad con tu agente, utiliza esta tabla de decisión para repartir responsabilidades entre cliente y servidor:
| Tarea o regla | ¿En el Cliente? | ¿En el Servidor? | Justificación lógica |
|---|---|---|---|
| Avisar al instante de que falta rellenar el campo «Correo» antes de enviar el formulario | Sí (por agilidad visual) | Sí (obligatorio antes de procesar) | En el cliente ahorra una espera innecesaria al usuario; en el servidor garantiza que nadie envíe datos vacíos saltándose la pantalla. |
| Guardar la clave secreta para cobrar en la pasarela bancaria o conectarse a la base de datos | Jamás | Exclusivamente en el servidor | Todo lo que se envía al entorno del cliente es público e inspeccionable por cualquiera que abra las herramientas del navegador. |
| Decidir si a un cliente le corresponde un descuento o si queda una plaza libre | Solo mostrar el cálculo informativo | Decisión y verificación obligatoria en el servidor | Si el cliente calcula el precio final y el servidor acepta ese número sin recalcularlo, cualquier usuario podrá comprarse una suscripción por 0,01 €. |
Practica
Un agente ha integrado un asistente de IA de pago y una pasarela de cobros en tu aplicación web. Al revisar dónde colocó cada pieza, encuentras lo siguiente:
- Para llamar al proveedor de IA, el agente puso la clave secreta de facturación (
API_KEY) dentro del código JavaScript que se descarga al navegador del usuario, para que el navegador llame directamente al proveedor de IA. - Cuando el usuario selecciona un plan de suscripción en su pantalla, el código del navegador calcula el precio con descuento (
precio_final = 10) y envía al servidor{ id_plan: "PRO", precio_a_cobrar: 10 }. El servidor cobra directamente lo que digaprecio_a_cobrar.
Responde razonadamente:
- ¿Qué ocurrirá con tu cuenta y tu presupuesto del proveedor de IA en cuanto cualquier visitante inspeccione el código o el tráfico de red de su propio navegador?
- ¿Qué puede hacer un usuario malintencionado con el campo
precio_a_cobrarantes de que la petición salga de su navegador hacia tu servidor? - Rediseña ambos flujos indicando qué debe enviarse desde el cliente, qué debe custodiarse y ejecutarse exclusivamente en el servidor, y por qué el sandbox del navegador protege al usuario de los sitios web pero no protege a tu servidor de un usuario que modifique su propio navegador.
Criterio de comprensión: debes exigir que la clave secreta (API_KEY) resida únicamente en el entorno del servidor (haciendo que el cliente llame a tu servidor y este al proveedor tras autenticar y limitar el uso), y que el cliente solo envíe el identificador del plan/cupón para que sea el servidor quien calcule el precio oficial a partir de sus datos maestros.
Profundiza con IA
Esta es mi corrección arquitectónica sobre qué debe ejecutarse en el cliente y qué en el servidor: [tu respuesta]. Evalúa mi solución. Después, plantéame un caso en el que la aplicación necesite funcionar momentáneamente cuando el usuario pierde la cobertura en el móvil (por ejemplo, redactando un borrador de gasto), y pídeme que explique qué se puede guardar temporalmente en el cliente y en qué momento exacto debe validarse la verdad definitiva en el servidor.
Cierre del Curso IV y próximo paso
Has completado la base técnica desacoplada: comprendes las capas de abstracción, la diferencia entre memoria volátil y persistencia, los bloques universales de los lenguajes formales, la distinción entre compilación y ejecución, y el reparto de responsabilidades entre cliente y servidor.
En el Curso V — Análisis, Diagnóstico y Validación aprenderás a auditar sistemas y entregas de código buscando suposiciones ocultas, casos límite, causas raíz mediante abducción, validación técnica y lógica, y riesgos de privacidad. Después, en el Curso VI — Método, Investigación y Desarrollo con IA, integrarás todo el recorrido en el algoritmo mental de adaptación y la dirección verificada en el bucle HITL.