Universidad Mariano Gálvez de Guatemala

Facultad de Ingeniería de Sistemas de Información

Maestría de Seguridad de Sistemas de Información
Seguridad en Aplicaciones
Ing. Erick Enrique Blanco Acevedo

PRÁCTICA 03

Estudiante Carné

Carlos Alberto Escobar Medina 1593-07-12872

Francisco Eduardo Solorzano Cuy 1593-06-14401
Samuel Felipe Solis 1593-04-12850
Pablo Andres Bonillla Morales 1593-17-10498
1593-10-2744
Juan Carlos Simón Bal

Plan Sábado
Sección “A”
Guatemala, 20 de octubre del 2023
Introcuccion;
En el apasionante mundo del desarrollo web, nos encontramos con un proceso creativo y
técnico que implica mucho más que simplemente colocar texto e imágenes en una página
en blanco. La creación de una página web exitosa involucra dos lenguajes esenciales:
HTML (Lenguaje de Marcado de Hipertexto) y CSS (Hojas de Estilo en Cascada). La
combinación de estos dos lenguajes es fundamental para darle forma a una página web
no solo funcional, sino también estéticamente atractiva.

A lo largo de esta guía, exploraremos una serie de conceptos fundamentales que nos
ayudarán a comprender cómo HTML y CSS trabajan juntos para crear páginas web
dinámicas y visualmente atractivas. Comenzaremos desde lo más básico, explorando la
estructura de un archivo HTML y avanzaremos hasta la creación de hojas de estilo CSS
independientes. Además, abordaremos la esencia de la separación de preocupaciones,
entendiendo que HTML se encarga de la estructura y el contenido, mientras que CSS se
enfoca en la apariencia y el diseño.

Dentro de este recorrido, exploraremos las etiquetas HTML que nos permiten definir y
organizar elementos en una página web. También examinaremos cómo CSS se convierte
en la herramienta maestra para aplicar estilos y personalizar la experiencia visual de
nuestros proyectos web.

Como parte de este viaje, presentaremos ejemplos prácticos que nos ayudarán a
comprender cómo cambiar el color del texto en una página web. Además, discutiremos las
mejores prácticas para organizar nuestro código, manteniendo nuestros proyectos limpios
y fáciles de mantener. Esta comprensión es esencial, ya sea que te encuentres dando tus
primeros pasos en el desarrollo web o buscando mejorar tus habilidades en la creación de
sitios web visualmente atractivos y funcionales.

Inciso 1: De acuerdo con el modelo OSI trabajado (arquitectura n-capas), deberán

realizar un resumen (2 hojas) sobre la arquitectura C/S indicando las entidades que
requiere servicios (clientes) y los servidores que proporcionan estos servicios, deberán
indicar el tipo de seguridad que se tiene o que se requiere para la petición de un servicio y
como se procesa la petición.

 La arquitectura Cliente/Servidor (C/S) es un modelo ampliamente utilizado en

sistemas de tecnología de la información y comunicaciones. Esta arquitectura se
basa en el modelo de referencia OSI (Open Systems Interconnection) y se divide
en dos entidades principales: clientes y servidores. Los clientes solicitan servicios,
mientras que los servidores proporcionan esos servicios. A continuación, se
detallan las entidades involucradas y la seguridad asociada en este modelo:

1. Entidades en la Arquitectura Cliente/Servidor:

Clientes: Los clientes son las entidades que solicitan servicios o recursos a los
servidores. Pueden ser computadoras, dispositivos móviles, aplicaciones o incluso otros
servidores que actúan como clientes en ciertas situaciones. Los clientes pueden ser
clasificados en dos categorías principales:
A. Clientes ligeros (Thin Clients): Estos son dispositivos o aplicaciones con una
funcionalidad limitada y dependen en gran medida de los servidores para procesar
y almacenar datos. Ejemplos de clientes ligeros incluyen navegadores web y
aplicaciones de correo electrónico.
B. Clientes pesados (Thick Clients): Estos son dispositivos o aplicaciones que
tienen una funcionalidad más avanzada y pueden realizar procesos locales
además de solicitar servicios a los servidores. Ejemplos de clientes pesados son
aplicaciones de diseño gráfico o de edición de video.

Servidores: Los servidores son las entidades que proporcionan servicios a los clientes.
Estos pueden ser servidores de bases de datos, servidores web, servidores de correo
electrónico, servidores de archivos, entre otros. Los servidores son responsables de
procesar las solicitudes de los clientes y enviarles los datos o servicios solicitados.

2. Seguridad en la Arquitectura Cliente/Servidor: La seguridad en la arquitectura

Cliente/Servidor es fundamental para proteger la integridad, la confidencialidad y la
disponibilidad de los datos y servicios. Algunos aspectos importantes de la
seguridad en esta arquitectura son:
 Autenticación: La autenticación es el proceso mediante el cual se verifica la
identidad del cliente que solicita un servicio. Para garantizar la seguridad, los
clientes suelen autenticarse ante los servidores utilizando credenciales como
nombres de usuario y contraseñas. También se pueden utilizar métodos de
autenticación más avanzados, como la autenticación de dos factores.
 Control de Acceso: Una vez que un cliente se ha autenticado, es fundamental
establecer políticas de control de acceso para determinar qué recursos o servicios
 puede utilizar. Esto se logra mediante la asignación de permisos y roles que
regulan qué acciones puede realizar un cliente en el servidor.
 Encriptación de Datos: La encriptación se utiliza para proteger la
confidencialidad de los datos transmitidos entre clientes y servidores. Los
protocolos seguros, como HTTPS para la web, utilizan cifrado para garantizar que
los datos no puedan ser interceptados ni entendidos por terceros no autorizados.
 Integridad de Datos: La integridad de los datos garantiza que los datos no sean
alterados durante la transmisión o el almacenamiento. Los métodos de verificación
de integridad, como los códigos hash, se utilizan para detectar cualquier
modificación no autorizada.
 Auditoría y Registro: El registro de eventos y auditoría es esencial para rastrear
las actividades de los clientes y servidores. Esto permite detectar y responder a
posibles amenazas de seguridad y asegurarse de que se cumplan las políticas de
seguridad.

3. Proceso de Petición de Servicios:

El proceso de solicitud de servicios en la arquitectura Cliente/Servidor generalmente sigue

estos pasos:
1. El cliente envía una solicitud al servidor, especificando el tipo de servicio o recurso
que necesita.
2. El servidor recibe la solicitud y la procesa, autenticando al cliente y verificando su
autorización para acceder al servicio.
3. Si el cliente es autenticado y autorizado, el servidor proporciona el servicio o los
datos solicitados.
4. Los datos o servicios son transmitidos de regreso al cliente de manera segura, a
menudo utilizando encriptación para proteger la confidencialidad.
5. El cliente puede procesar y presentar los datos o servicios recibidos según sus
necesidades.

En resumen, la arquitectura Cliente/Servidor es un modelo clave en las redes y sistemas

de información, donde los clientes solicitan servicios a través de servidores. La seguridad
desempeña un papel vital en este modelo para garantizar la protección de los datos y
recursos, y se logra a través de la autenticación, el control de acceso, la encriptación y
otros mecanismos de seguridad. El proceso de solicitud de servicios implica la
comunicación entre clientes y servidores, asegurando que las peticiones sean procesadas
de manera segura y eficiente.
Inciso 2: Dentro de las características C/S deberán indicar los protocolos asimétricos, el
encapsulamiento de los servicios (si no hay como deben estar), la integridad de la
información, como el midleware oculta la localización de los servidores a los clientes, la
modularidad para la tolerancia a fallos, de acuerdo a la arquitectura C/S, como se reutiliza
el código o bien en donde se debería de reutilizar, como se definieron los recursos
compartidos, (servidores de documentos, programas, transacciones, aplicaciones de
objetos, aplicaciones web, etc.

 Dentro de la arquitectura Cliente/Servidor (C/S), existen diversas características y

conceptos clave que se relacionan con los temas que mencionaste:

1. Protocolos Asimétricos: En una arquitectura Cliente/Servidor, se utilizan
protocolos asimétricos para la comunicación entre clientes y servidores. Estos
protocolos permiten que los clientes soliciten servicios o datos a los servidores y
que los servidores respondan a esas solicitudes. Algunos ejemplos de protocolos
asimétricos ampliamente utilizados son HTTP para la web, SMTP/IMAP/POP3
para el correo electrónico y SQL para bases de datos.
2. Encapsulamiento de los Servicios: El encapsulamiento de servicios se refiere a
la práctica de ocultar la complejidad de la implementación de un servicio dentro del
servidor. Los detalles internos del servicio se mantienen ocultos, y el cliente solo
necesita conocer la interfaz o API para interactuar con el servicio. Esto mejora el
modularidad y la seguridad, ya que el cliente no necesita conocer los detalles de
cómo se implementa el servicio.
3. Integridad de la Información: La integridad de la información se refiere a la
garantía de que los datos no han sido alterados de manera no autorizada durante
su transmisión o almacenamiento. En C/S, esto se logra mediante técnicas de
cifrado y la utilización de firmas digitales para verificar la autenticidad de los datos.
4. Middleware para Ocultar la Localización de los Servidores: El middleware es
un componente clave que oculta la localización de los servidores a los clientes.
Funciona como una capa intermedia entre los clientes y los servidores,
permitiendo que los clientes soliciten servicios sin necesidad de conocer la
ubicación física de los servidores. Esto proporciona flexibilidad y escalabilidad a la
arquitectura C/S. Ejemplos de middleware incluyen CORBA, RMI y RESTful APIs.
5. Modularidad para la Tolerancia a Fallos: El modularidad es fundamental en C/S
para la tolerancia a fallos. Los componentes del sistema deben estar diseñados de
manera modular para que, en caso de que un componente falle, se pueda
reemplazar o actualizar sin afectar a otros componentes. Esto aumenta la
disponibilidad del sistema y facilita la recuperación en caso de fallos.
6. Reutilización de Código: La reutilización de código es una práctica común en
C/S. Para lograrlo, se pueden utilizar bibliotecas y módulos compartidos que
contienen funcionalidad común que se utiliza en varios servicios o aplicaciones.
Esto reduce la duplicación de esfuerzos y mejora la eficiencia en el desarrollo de
software.
7. Definición de Recursos Compartidos: En C/S, los recursos compartidos se
pueden definir de varias maneras, según las necesidades del sistema. Algunos
ejemplos de recursos compartidos incluyen:
  Servidores de Documentos: Almacenamiento centralizado de documentos
compartidos.
 Servidores de Programas: Repositorios de programas que los clientes pueden
ejecutar.
 Transacciones: Gestión de transacciones financieras u operaciones de bases de
datos.
 Aplicaciones de Objetos: Servicios que permiten a los clientes interactuar con
objetos compartidos.
 Aplicaciones Web: Ofrecen servicios web a través de navegadores y
aplicaciones.

Cada uno de estos recursos compartidos se define y se implementa de manera específica

para satisfacer las necesidades de la arquitectura Cliente/Servidor, permitiendo a los
clientes acceder a servicios y datos de manera eficiente y segura.

Pueden trabajar con una aplicación pequeña, no menor a 5 tablas.

Inciso 3: Deberá indicar que es un websocket, como crearlo usando el protocolo “ws” en
la url, una vez creado debe programar (código abierto), el open, message, error y close.
Adjuntar el código.

Pero primero tuvimos que asegúranos de tener Node.js y el módulo ws instalados en tu

sistema. Puedes instalar ws utilizando npm con el siguiente comando:

 npm install ws

Una vez que revisamos que tuviéramos ws instalado, utilizamos el siguiente código como
punto de partida para tu aplicación:

// Importar el módulo 'ws' que proporciona funcionalidad WebSocket.

const WebSocket = require('ws');

// Importar los módulos 'http' y 'express' para crear el servidor HTTP.

const http = require('http');
const express = require('express');
const app = express();
// Crear un servidor HTTP para gestionar las conexiones WebSocket.
const server = http.createServer(app);

// Crear un servidor WebSocket en el mismo puerto que el servidor HTTP.

const wss = new WebSocket.Server({ server });

// Manejar la conexión de nuevos clientes WebSocket.

wss.on('connection', (ws) => {
console.log('Cliente WebSocket conectado.');

// Manejar eventos de apertura de conexión (Nota: 'open' no es un evento WebSocket

estándar).
ws.on('open', () => {
console.log('Conexión WebSocket abierta.');
});

// Manejar mensajes recibidos de los clientes.

ws.on('message', (message) => {
console.log(`Mensaje recibido: ${message}`);

// Enviar un mensaje de respuesta al cliente.

ws.send('Mensaje recibido: ' + message);
});

// Manejar errores en la conexión WebSocket.

ws.on('error', (error) => {
console.error(`Error: ${error.message}`);
});

// Manejar el cierre de la conexión WebSocket.

 ws.on('close', (code, reason) => {
console.log(`Conexión cerrada con código ${code} y razón: ${reason}`);
});
});

// Configurar una ruta de inicio para servir el archivo HTML.

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

// Iniciar el servidor HTTP en el puerto 3000 y escuchar conexiones entrantes.

server.listen(3000, () => {
console.log('Servidor WebSocket en ejecución en el puerto 3000.');
});

Nos aseguramos de crear un archivo HTML llamado index.html en el mismo directorio que
el código anterior. Puedes usar el siguiente contenido básico en index.html:

<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
</head>
<body>
<script>
// Crear una instancia de WebSocket y conectarse al servidor WebSocket en
'ws://localhost:3000'.
const socket = new WebSocket('ws://localhost:3000');

// Manejar el evento de apertura de la conexión WebSocket.

socket.onopen = () => {
 console.log('Conexión WebSocket abierta.');

// Enviar un mensaje al servidor WebSocket.

socket.send('¡Hola, servidor WebSocket!');
};

// Manejar mensajes recibidos del servidor WebSocket.

socket.onmessage = (event) => {
console.log(`Mensaje del servidor: ${event.data}`);
};

// Manejar errores en la conexión WebSocket.

socket.onerror = (error) => {
console.error(`Error: ${error.message}`);
};

// Manejar el cierre de la conexión WebSocket.

socket.onclose = (event) => {
console.log(`Conexión cerrada con código ${event.code} y razón: $
{event.reason}`);
};
</script>
</body>
</html>
Inciso 4: Elabore un API en javascript que permita proporcionar la hora de un determinado
país, deberá explicar cada una de las instrucciones.

const express = require('express'); // Importa el módulo Express.js para crear un servidor

web.
const app = express(); // Crea una instancia de la aplicación Express.

app.get('/time', (req, res) => { // Establece una ruta '/time' que responde a solicitudes GET.
const { country } = req.query; // Obtiene el parámetro 'country' de la consulta en la URL.

if (!country) { // Verifica si el parámetro 'country' está ausente.

return res.status(400).json({ error: 'Debes proporcionar un país.' }); // Responde con un
error 400 y un mensaje JSON.
}

const time = getCurrentTimeByCountry(country); // Llama a una función para obtener la

hora del país especificado.

if (time === null) { // Verifica si no se pudo determinar la hora para el país.

return res.status(404).json({ error: 'No se pudo determinar la hora para el país
especificado.' }); // Responde con un error 404 y un mensaje JSON.
}

res.json({ country, time }); // Responde con un objeto JSON que contiene el país y la
hora.
});

function getCurrentTimeByCountry(country) {
// Aquí podrías implementar la lógica para determinar la hora actual del país.
// Por ejemplo, puedes utilizar bibliotecas de zona horaria como 'moment-timezone'.
 // Simulemos que obtenemos la hora actual como un objeto Date.
const currentTime = new Date();

return currentTime.toISOString(); // Devuelve la hora actual en formato ISO.

}

const port = process.env.PORT || 3000; // Define el puerto en el que el servidor escuchará

las solicitudes.

app.listen(port, () => {
console.log(`Servidor API en ejecución en el puerto ${port}.`);
});

Inciso 5: Elabore el código utilizando el marco de CSS (HTML) para cambiar el color de lo
escrito en una página. Así mismo deberá elaborar el código para desplegar una stylesheet,
para el efecto debe abrir y guardar el index.html.

<!DOCTYPE html> <!-- 3. Declaración de tipo de documento -->

<html> <!-- 4. Elemento raíz del documento -->

<head> <!-- 5. Encabezado del documento -->

<title>Cambio de Color de Texto</title> <!-- 6. Título de la página -->
<link rel="stylesheet" type="text/css" href="style.css"> <!-- 7. Enlace a la hoja de estilo
externa (style.css) -->
</head>

<body> <!-- 8. Cuerpo del documento -->

<h1>Texto de Color</h1> <!-- 9. Encabezado de nivel 1 -->

 <p>Este es un párrafo con texto de color. El color del texto es controlado por la hoja de
estilo.</p> <!-- 10. Párrafo de texto -->

</body>

</html>

A continuación, creé un archivo CSS separado que llamé "style.css" para personalizar la
apariencia de la página:

En el mismo directorio donde guardé mi archivo "index.html", creé un nuevo archivo al que
llamé "style.css".

Luego, abrí "style.css" con un editor de texto y añadí el siguiente contenido:

/* 1. Comentario CSS */

h1 {
color: blue; /* 2. Cambia el color del texto para los elementos 'h1' a azul */
}

p{
color: green; /* 3. Cambia el color del texto para los elementos 'p' a verde */
}
Conclusión:

En nuestro proceso de crear una página web sencilla y personalizar su apariencia, hemos
atravesado varias etapas clave. En primer lugar, creamos un archivo HTML llamado
"index.html", que actúa como el esqueleto de nuestra página web. Dentro de este archivo
HTML, configuramos elementos básicos como títulos y párrafos.

Luego, para dar estilo a nuestra página, creamos un archivo CSS independiente al que
llamamos "style.css". Esto nos permitió definir los estilos que queríamos aplicar a
nuestros elementos HTML. En este ejemplo, decidimos cambiar los colores del texto
dentro de los encabezados (<h1>) y los párrafos (<p>), pero las posibilidades de
personalización son prácticamente infinitas. La hoja de estilo CSS es donde realmente
podemos ejercer nuestro control creativo y hacer que nuestra página sea única.

En resumen, este proceso ejemplifica la separación de la estructura y el estilo en el

desarrollo web. El archivo HTML representa la estructura y el contenido de la página,
mientras que el archivo CSS representa el estilo y la apariencia. Este enfoque hace que
sea más fácil mantener y actualizar una página web, además de permitir una mayor
flexibilidad en la personalización.

A medida que profundicemos en el mundo del desarrollo web, descubriremos formas más
avanzadas de dar estilo a nuestras páginas, incluyendo el uso de frameworks,
preprocesadores de CSS y bibliotecas de JavaScript. Pero al comprender estos
conceptos básicos, estaremos bien encaminados para crear y personalizar nuestras
propias páginas web.