Ejercicio
Nombre: Gomez Gomez Jose Emiliano 213107042
Asignatura: Seguridad Web
Profesor: Oscar Olivares López
Introducción
El Cross-Site Scripting (XSS) es una de las vulnerabilidades más comunes en el desarrollo de
aplicaciones web, catalogada dentro del Top 10 de OWASP. Este tipo de ataque ocurre cuando un
atacante inyecta código malicioso, generalmente en forma de scripts, en una aplicación web
confiable, afectando a los usuarios que interactúan con ella. El XSS puede ser utilizado para robar
información sensible, manipular la interfaz de usuario o realizar acciones maliciosas en nombre de
las víctimas.
Este ejercicio está diseñado para explorar cómo se manifiestan las vulnerabilidades XSS en
diferentes escenarios, comprender los riesgos asociados y aprender estrategias para mitigarlas. A
través de la simulación de ataques controlados, los participantes podrán mejorar sus habilidades
de seguridad web y adquirir un enfoque preventivo en el desarrollo de aplicaciones.
Justificación
La seguridad en aplicaciones web es un aspecto crítico en el desarrollo de software, ya
que las amenazas cibernéticas pueden comprometer la integridad, confidencialidad y
disponibilidad de los sistemas. Realizar ejercicios prácticos de pruebas de XSS permite a
los desarrolladores, evaluadores de seguridad y administradores identificar debilidades en
sus sistemas antes de que sean explotadas por atacantes.
El propósito de este ejercicio es no solo entender la mecánica detrás de los ataques XSS,
sino también fomentar una cultura de desarrollo seguro mediante la implementación de
mejores prácticas, como la validación de entradas y la codificación adecuada de salidas.
De esta manera, se contribuye a reducir riesgos y a garantizar la confianza de los usuarios
en las aplicaciones web.
Iniciaremos creando una pagina web para hacer la simulación de un XSS ya que no se
pueden realizar este tipo de pruebas dentro de páginas web subidas.
Usaremos el siguiente script, una pagina sencilla para generar usando html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio de XSS</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
h1 {
color: #333;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], button {
padding: 10px;
font-size: 16px;
}
button {
margin-top: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Ejercicio de XSS</h1>
<p>Este es un ejercicio educativo para entender cómo funciona una
vulnerabilidad de Cross-Site Scripting (XSS). Introduce texto en el campo de
abajo y observa el resultado.</p>
<form id="xssForm">
<label for="userInput">Introduce un comentario:</label>
<input type="text" id="userInput" name="userInput"
placeholder="Escribe algo...">
<button type="button" onclick="displayComment()">Enviar</button>
</form>
<div class="output" id="output">
<h2>Comentarios:</h2>
<div id="comments"></div>
</div>
<script>
function displayComment() {
const input = [Link]('userInput').value;
const commentsDiv = [Link]('comments');
// Simulación de vulnerabilidad XSS
[Link] += `<p>${input}</p>`;
}
</script>
</body>
</html>
Estructura HTML
1. <!DOCTYPE html>
o Declara el tipo de documento como HTML5.
2. <html lang="es">
o Inicia el documento HTML y establece el idioma como español (es).
3. <head>
o Contiene metadatos y configuraciones globales del documento.
4. <meta charset="UTF-8">
o Define la codificación de caracteres como UTF-8, que permite usar caracteres
especiales como tildes y eñes.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
o Ajusta el diseño para que sea responsivo en diferentes dispositivos, como móviles
y tabletas.
6. <title>Ejercicio de XSS</title>
o Establece el título de la página que aparece en la pestaña del navegador.
7. <style>
o Define estilos CSS para personalizar la apariencia del contenido de la página.
8. body { ... }
o Aplica estilos básicos al cuerpo del documento, como fuente, márgenes y relleno.
9. h1 { ... }
o Estiliza los encabezados de nivel 1 con un color específico.
10. form { ... }
o Añade un margen superior al formulario.
11. label { ... }
o Configura etiquetas (<label>) con un margen inferior y texto en negrita.
12. input[type="text"], button { ... }
o Estiliza los campos de texto y botones para una apariencia uniforme y legible.
13. button:hover { ... }
o Cambia el color de fondo del botón al pasar el ratón por encima.
14. .output { ... }
o Define el área de comentarios con un estilo diferenciado: borde, fondo claro y
espaciado.
Contenido del cuerpo (<body>)
15. <h1>Ejercicio de XSS</h1>
o Muestra un encabezado principal con el título de la página.
16. <p>Este es un ejercicio educativo...
o Explica el propósito de la página, enfocándose en las vulnerabilidades XSS.
17. <form id="xssForm">
o Crea un formulario con un campo de texto y un botón.
18. <label for="userInput">Introduce un comentario:</label>
o Proporciona una etiqueta descriptiva para el campo de entrada.
19. <input type="text" id="userInput"...>
o Campo de texto donde el usuario escribe un comentario.
20. <button type="button" onclick="displayComment()">Enviar</button>
o Botón que ejecuta la función JavaScript displayComment() al ser presionado.
21. <div class="output" id="output">
o Sección donde se mostrarán los comentarios ingresados.
22. <div id="comments"></div>
o Contenedor donde se insertarán dinámicamente los comentarios del usuario.
23. <script>
o Bloque para definir el código JavaScript.
24. function displayComment() { ... }
o Define una función llamada displayComment que se ejecuta cuando el usuario
presiona el botón.
25. const input = [Link]('userInput').value;
o Obtiene el valor ingresado por el usuario en el campo de texto con ID
userInput.
26. const commentsDiv = [Link]('comments');
o Obtiene una referencia al contenedor con ID comments donde se mostrarán
los comentarios.
27. [Link] += <p>${input}</p>;
o Inserta un nuevo párrafo (<p>) dentro del contenedor comments con el texto
proporcionado por el usuario.
Esta es la pagina que nos genera el script:
Dentro del recuadro de texto ingresaremos el siguiente código para simular un ataque de
XSS:
<script>alert('¡XSS detectado!');</script>
Luego daremos clic en el botón enviar y nos mandará una alerta que dirá, “XSS detectado”
Lo que se hace es inyectar código malicioso dentro del script de la página web que
manipula la información de los usuarios, manipulando así sus datos.
Conclusión sobre el trabajo
Este ejercicio sobre Cross-Site Scripting (XSS) proporciona una visión práctica de cómo
estas vulnerabilidades pueden ser explotadas y por qué es crucial abordarlas en el
desarrollo de aplicaciones web. A través de la simulación de un entorno inseguro,
pudimos observar cómo el código sin validar puede convertirse en una puerta de entrada
para ataques que comprometen la seguridad de los usuarios.
La principal lección aprendida es que la validación y saneamiento de datos de entrada
son elementos fundamentales para prevenir ataques XSS. Esto incluye usar funciones que
escapen caracteres especiales y adoptar prácticas como la codificación de salida y el uso
de políticas de seguridad de contenido (CSP).
En términos de desarrollo seguro, este ejercicio refuerza la importancia de:
1. Comprender las posibles vulnerabilidades al trabajar con contenido dinámico.
2. Implementar controles de seguridad en cada etapa del desarrollo.
3. Fomentar una cultura de concienciación sobre ciberseguridad en los equipos de trabajo.
En resumen, este trabajo destaca la relevancia de priorizar la seguridad como un
componente esencial en el diseño y la implementación de aplicaciones web. Abordar
proactivamente las vulnerabilidades no solo protege a los usuarios, sino que también
refuerza la confianza en los productos que construimos.
GUÍA ESTRUCTURADA DE EVALUACIÓN
FO-205P11000-13
División: (1) INGENIERIA EN SISTEMAS COMPUTACIONALES
Docente: (2) M en S.T.R Oscar Olivares López
Asignatura: (3) Tópicos Avanzados de Programación
Indicador de alcance
Competencia 5
Nombre y número de control Gomez Gomez Jose Emiliano 213107042 Grupo: (6) 381M
Evidencia de aprendizaje: EJERCICIO PRÁCTICO
Indicaciones generales: (9)
• Todo programa a realizar deberá ser entregado en tiempo y forma.
• El programa debe ser mostrado (ejecución) al docente para su evaluación (No será tomado si este solo es enviado)
ATRIBUTO DE EGRESO:
Nota: Presentar atención en los criterios de evaluación, entregar en tiempo y forma de no ser así presentar la actividad
en segunda oportunidad.
CUMPLE CUMPLE
VALOR 1° 2°
SI NO SI NO
1.-La actividad entregada tiene portada (datos del alumno, datos de la actividad entregada), 10%
Guía estructurada anexa (con los datos del alumno).
2.-La actividad maneja una introducción anticipada a cada apartado que maneja. 10%
3.-Hace uso de screenshots de la ejecución del código utilizado. 10%
4.-Describe de forma detallada cada línea de código usada en el programa solicitado. 50%
5.-Agrega conclusiones al final de su trabajo (actividad), enfocadas a lo que le fue solicitado. 10%
6.-Maneja 3 referencias bibliográficas de Internet colocándolas al final de dicha actividad 10%
solicitada.
TOTAL 100%
1° 2°
puntuación alcanzada
oportunidad oportunidad
100%
