LabWebAv06 WebSocketSeguro

INGENIERÍA EN SOFTWARE
APLICACIONES WEB AVANZADAS

LABORATORIO – WEBSOCKET
Nombre : Deyvid Paucar
OBJETIVO:
Los estudiantes serán capaces de comprender y aplicar el uso de websockets seguros para facilitar la
comunicación bidireccional y en tiempo real entre clientes y servidores web, garantizando la seguridad y
privacidad de la información transmitida.
MATERIALES Y RECURSOS:
 Computador con acceso a Internet
 Entorno de desarrollo web -> Visual Studio Code (https://code.visualstudio.com/download)
 Open SSL (https://www.openssl.org/)
 NodeJS instalado (https://nodejs.org/)
o NPM Packages: Express + WS
 Navegador web moderno compatible con WebSocket (por ejemplo, Google Chrome o Mozilla
Firefox).
INTRODUCCIÓN:
Vamos a explorar los riesgos de seguridad asociados con la comunicación en tiempo real y cómo los
websockets seguros (WebSocket Secure, WSS) mitigan estos riesgos mediante el uso de encriptación y
certificados SSL/TLS. Revisaremos buenas prácticas de seguridad, como validación de datos, manejo
adecuado de errores y control de acceso, para garantizar la integridad y seguridad de la información
transmitida a través de websockets. Finalmente vamos a implementar websockets seguros mejorando la
aplicación de chat, previamente generada, para demostrar la comprensión y aplicación práctica de los
conceptos enseñados.
OPENSSL:
OpenSSL es una biblioteca de software de código abierto que se utiliza ampliamente para implementar
protocolos de seguridad de comunicaciones en línea, como SSL (Secure Sockets Layer) y su sucesor, TLS
(Transport Layer Security). Estos protocolos se emplean para asegurar las comunicaciones a través de
internet, proporcionando cifrado para garantizar la privacidad y autenticación para verificar la identidad
de los extremos de la comunicación. Las funciones principales de OpenSSL incluyen: Cifrado y
descifrado, creación y gestión de certificados, implementación de protocolos de seguridad, funciones
criptográficas, y herramientas de línea de comandos que permiten realizar diferentes operaciones
criptográficas, generar certificados, realizar pruebas de conexión segura.
SSL/TLS:
SSL (Secure Sockets Layer) y TLS (Transport Layer Security) son protocolos criptográficos diseñados para
garantizar la seguridad en las comunicaciones a través de internet. SSL fue desarrollado por Netscape a
mediados de la década de 1990 para asegurar las comunicaciones en línea. Posteriormente, debido a
vulnerabilidades y debilidades detectadas en SSL, se desarrolló TLS como su sucesor. TLS 1.0 se basó en
SSL 3.0, con mejoras significativas en seguridad. Las versiones posteriores de TLS han continuado
mejorando la seguridad y las capacidades de cifrado. Las versiones de SSL van desde la 1.0 (nunca se
lanzó públicamente debido a fallas de seguridad), 2.0 y 3.0 (lanzado en 1996). Luego vinieron TLS 1.0,
1.1, 1.2, 1.3 (sucesores de SSL con mejoras de seguridad, rendimiento y capacidad). TLS es más seguro
que SSL debido a la solución de muchas vulnerabilidades conocidas en las versiones anteriores de SSL.
Las implementaciones modernas y seguras de la seguridad en internet utilizan principalmente TLS, con
versiones más recientes (como TLS 1.2 y 1.3) que ofrecen mejoras significativas en la seguridad y
rendimiento en comparación con SSL. En el sitio web “https://caniuse.com/?search=TLS” se puede
verificar qué versiones de TLS soportan los navegadores modernos.
LOS ARCHIVOS CERT.PEM Y KEY.PEM
Los archivos cert.pem y key.pem generados con OpenSSL tienen roles específicos en la configuración de
seguridad de un servidor web, especialmente cuando se utiliza el protocolo SSL/TLS para habilitar
conexiones seguras. Ambos archivos, cert.pem y key.pem, son cruciales para la configuración de SSL/TLS
en un servidor web. El certificado (cert.pem) se comparte públicamente para que los clientes verifiquen
la identidad del servidor, mientras que la clave privada (key.pem) se mantiene en secreto y se utiliza
para desencriptar los datos que han sido encriptados usando la clave pública asociada al certificado.
Estos archivos se utilizan en la configuración de servidores web como IIS, Apache, Nginx, Node.js, entre
otros, para habilitar conexiones seguras a través de HTTPS mediante la implementación de SSL/TLS.
PARTE 1 – CONFIGURACIÓN INICIAL

1. Preparación del ambiente
Duplicamos el código generado en el laboratorio anterior, copiando y pegando todo el contenido de la

carpeta principal se cambia de “LabWeb2-WebSocketChat” a “LabWeb2-WebSocketChatSeguro” o el nombre
que usted defina.
2. Creación de certificados digitales para ambiente desarrollo/test
Desde el sitio web nos podemos descargar el código fuente de OpenSSL para compilarlo y generar el
ejecutable, sin embargo, para evitar esto, podemos descargarnos un instalador liviano de
“https://slproweb.com/products/Win32OpenSSL.html”
O podemos usar la versión que está en la carpeta “OpenSSL-Win64.zip” del laboratorio.
Desde la línea de comandos ejecutamos si estamos en Windows:
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
O desde un computador Mac:
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365
Nos aparecerá una pantalla donde nos pedirá que completemos información, se sugiere colocar lo
siguiente:
Country Name (2 letter code) [AU]:EC

State or Province Name (full name) [Some-State]:Pichincha
Locality Name (eg, city) []:Quito
Organization Name (eg, company) [Internet Widgits Pty Ltd]:EPN
Organizational Unit Name (eg, section) []:FIS
Common Name (e.g. server FQDN or YOUR name) []:localhost
Email Address []:[email protected]
El resultado serán 2 archivos “cert.pem” y “key.pem” dentro de la carpeta bin.
Copiamos estos archivos a la carpeta server.

PARTE 2 – SERVIDOR
3. Mejoras en código del servidor
Desde la carpeta “server” modificamos el archivo llamado “index.js”, con el siguiente código:
const WebSocket = require('ws');

const https = require('https');
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
// SSL credentials
const server = https.createServer({
cert: fs.readFileSync('cert.pem'),
key: fs.readFileSync('key.pem')
}, app);
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {

console.log('Client connected');
ws.on('message', (message) => {
console.log(message);
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
app.use(express.static(path.join(__dirname, '../client')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../client', 'index.html'));
});
server.listen(3000, () => {
console.log('WebSocket Server running on port 3000');
});
3.1. Ejecución en servidor
Desde la consola levantamos el servidor con el siguiente comando: node index.js
Deberíamos ver el mensaje en la consola que el servidor websocket está ejecutándose:

PARTE 2 – C LIENTE
4. Modificación del archivo script.js para usar websocket seguro
Modificamos el archivo JavaScript llamado “script.js” con el siguiente código:
const socket = new WebSocket('wss://localhost:3000');
socket.addEventListener('open', (event) => {

console.log('Connection established with the WebSocket server');
});
socket.addEventListener('message', (event) => {

event.data.arrayBuffer().then((data) => {
const message = new TextDecoder('utf-8').decode(data);
console.log(message);
const item = document.createElement('li');
item.textContent = message;
document.querySelector('#messages').appendChild(item);
});
});
document.querySelector('#form').addEventListener('submit', (e) => {

e.preventDefault();
const message = document.querySelector('#input').value;
if (socket.readyState === WebSocket.OPEN) {
socket.send(message);
}
const item = document.createElement('li');
item.textContent = message;
document.querySelector('#messages').appendChild(item);
document.querySelector('#input').value = '';
document.querySelector('#input').focus();
});
5. Pruebas de ejecución en el cliente:
En este caso ya no podemos lanzar la ejecución desde la página web desde LiveServer, sino que
debemos abrir un navegador, para este ejemplo usamos “Edge” y en la barra de direcciones ingresar:
https://localhost:3000/
Al realizar esto aparecerá un mensaje que nuestra conexión no es privada y hay un error en el
certificado, ya que estamos usando un certificado que nosotros mismo emitimos y está autofirmado
para uso en nuestro ambiente de desarrollo, por lo que no fue emitido por una CA (Certification
Authority) válida, por lo que para poder continuar con nuestras pruebas presionamos el botón
“Advance” y hacemos clic en el botón “Continue to localhost (unsafe)”:
Finalmente podemos ya visualizar nuestra pantalla de Chat. Si abrimos las herramientas de
desarrollador (Developer Tools) podemos seleccionar la opción “Network” para ver los archivos que se
están cargando.
Al hacer clic en la opción “localhost” podemos ver la información de las cabeceras (headers) del
protocolo websocket, corroborando que estamos usando wss que es websocket seguro.
ENTREGABLE FINAL
6. Entregable
Subir a la plataforma del curso:
 Un comprimido de todo el código fuente generado (client y server), eliminando carpetas

node_modules

LabWebAv06 WebSocketSeguro

Cargado por

Copyright:

Formatos disponibles

LabWebAv06 WebSocketSeguro

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

LabWebAv06 WebSocketSeguro

Cargado por

Copyright:

Formatos disponibles

INGENIERÍA EN SOFTWARE

APLICACIONES WEB AVANZADAS

PARTE 1 – CONFIGURACIÓN INICIAL

Duplicamos el código generado en el laboratorio anterior, copiando y pegando todo el contenido de la

2. Creación de certificados digitales para ambiente desarrollo/test

O podemos usar la versión que está en la carpeta “OpenSSL-Win64.zip” del laboratorio.

Desde la línea de comandos ejecutamos si estamos en Windows:

Country Name (2 letter code) [AU]:EC

El resultado serán 2 archivos “cert.pem” y “key.pem” dentro de la carpeta bin.

Copiamos estos archivos a la carpeta server.

const WebSocket = require('ws');

const app = express();

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

wss.on('connection', (ws) => {

3.1. Ejecución en servidor

Desde la consola levantamos el servidor con el siguiente comando: node index.js

Deberíamos ver el mensaje en la consola que el servidor websocket está ejecutándose:

4. Modificación del archivo script.js para usar websocket seguro

Modificamos el archivo JavaScript llamado “script.js” con el siguiente código:

const socket = new WebSocket('wss://localhost:3000');

socket.addEventListener('open', (event) => {

socket.addEventListener('message', (event) => {

document.querySelector('#form').addEventListener('submit', (e) => {

Subir a la plataforma del curso:

 Un comprimido de todo el código fuente generado (client y server), eliminando carpetas

También podría gustarte