Hola hacketones! Bienvenidos a un nuevo CTF para la Certificación SEC1 de TryHackMe – JavaScript Essentials
Fundamentos de JavaScript
Aprende a usar JavaScript para añadir interactividad a un sitio web y comprende las vulnerabilidades asociadas.
JavaScript (JS) es un lenguaje de programación muy popular que permite a los desarrolladores web añadir funciones interactivas a sitios web con HTML y CSS (estilo). Una vez creados los elementos HTML, se pueden añadir funciones interactivas como validación, acciones al hacer clic, animaciones, etc., mediante JS. Aprender este lenguaje es tan importante como aprender HTML y CSS. Los scripts de JS se utilizan principalmente con HTML.
Esta sala está diseñada como una introducción general a JavaScript, específicamente para principiantes con poca experiencia en este lenguaje. El objetivo principal es enseñar los fundamentos de JavaScript desde una perspectiva cibernética y cómo los hackers utilizan funcionalidades legítimas para lograr resultados maliciosos.
Requisitos de la habitación
Objetivos de aprendizaje
- Comprender los fundamentos de JavaScript
- Integración de JavaScript en HTML
- Abuso de la función de diálogo
- Omitir las sentencias de control de flujo
- Explorando archivos minificados
Conectando con la máquina
Puede iniciar la máquina virtual haciendo clic en Start Lab Machine. La máquina se iniciará en pantalla dividida. Si la máquina virtual no es visible, utilice el Show Split Viewbotón azul situado en la esquina superior izquierda de la página. Espere de 1 a 2 minutos después de que el sistema se inicie por completo para que los scripts automáticos se ejecuten correctamente.
Nota : Todos los scripts que creamos en esta sala también están disponibles en la carpeta de ejercicios del escritorio del archivo adjunto.VM, como se muestra a continuación. Si le resulta difícil crear los scripts usted mismo, también puede utilizar los que se proporcionan.
¡Empecemos!
Tarea 2 Conceptos esenciales
Variables
Las variables son contenedores que permiten almacenar valores de datos. Al igual que en cualquier otro lenguaje, las variables en JS son similares a contenedores para almacenar datos. Cuando almacenamos algo en un contenedor, también necesitamos etiquetarlo para poder referenciarlo fácilmente más adelante. De manera similar, en JS, cada variable tiene un nombre; cuando almacenamos un valor determinado en una variable, le asignamos un nombre para poder referenciarla posteriormente.
Hay tres formas de declarar variables en JS: var, let, y const. Mientras varque tiene ámbito de función, tanto let, como consttienen ámbito de bloque, lo que ofrece un mejor control sobre la visibilidad de las variables dentro de bloques de código específicos.
Tipos de datos
En JavaScript, los tipos de datos definen el tipo de valor que puede contener una variable. Algunos ejemplos son: string(texto) number, boolean(verdadero/falso), null, undefined y object (para datos más complejos como arrays u objetos).
Funciones
Una función representa un bloque de código diseñado para realizar una tarea específica. Dentro de una función, se agrupa código que necesita realizar una tarea similar. Por ejemplo, si está desarrollando una aplicación web en la que necesita imprimir las calificaciones de los estudiantes en la página web, lo ideal sería crear una función PrintResult(rollNum)que acepte el número de matrícula del usuario como argumento.
Así pues, en lugar de escribir el mismo código de impresión para todos los alumnos, utilizaremos una función sencilla para imprimir el resultado.
Bucles
Los bucles permiten ejecutar un bloque de código varias veces siempre que se cumpla una condición true. Los bucles comunes en JS son for, while,y do…while, que se utilizan para repetir tareas, como recorrer una lista de elementos. Por ejemplo, si queremos imprimir los resultados de 100 estudiantes, podemos llamar a la función PrintResult(rollNum) 100 veces escribiéndola 100 veces, o podemos crear un bucle que itere del 1 al 100 y llame a la función PrintResult(rollNum) como se muestra a continuación.
Ciclo de solicitud-respuesta
En el desarrollo web, el ciclo de solicitud-respuesta se produce cuando el navegador del usuario (el cliente) envía una solicitud a un servidor web, y este responde con la información solicitada. Esta información puede ser una página web, datos u otros recursos. Puedes obtener más información aquí .
Responda las siguientes preguntas
¿Qué término permite ejecutar un bloque de código varias veces siempre que sea una condición?
loop
Tarea 3 Descripción general de JavaScript
En esta tarea, usaremos JavaScript para crear nuestro primer programa. JavaScript es un lenguaje interpretado , lo que significa que el código se ejecuta directamente en el navegador sin compilación previa. A continuación, se muestra un ejemplo de código JavaScript que ilustra conceptos clave, como la definición de variables , la comprensión de los tipos de datos , el uso de estructuras de control de flujo y la escritura de funciones sencillas. Estos elementos básicos ayudan a crear aplicaciones web más dinámicas e interactivas. No te preocupes si te resulta un poco novedoso ahora; analizaremos cada uno de estos conceptos en detalle más adelante.
JavaScript se ejecuta principalmente en el lado del cliente, lo que facilita la inspección e interacción con HTML directamente en el navegador. Usaremos esta Google Chrome Consolefunción para ejecutar nuestro primer programa en JavaScript, lo que nos permitirá escribir y ejecutar código JavaScript fácilmente sin herramientas adicionales. Sigue estos pasos para comenzar:
- Ábralo Google Chromehaciendo clic en el Google Chrome icono del escritorio de la máquina virtual.
- Una vez que Chrome esté abierto, presione Ctrl + Shift + I para abrir Consoleo haga clic con el botón derecho en cualquier parte de la página y seleccione Inspect.
- A continuación, haz clic en la Consolepestaña. Esta consola te permite ejecutar código JS directamente en el navegador sin necesidad de instalar software adicional.
- Vamos a crear un programa sencillo en JavaScript que sume dos números y muestre el resultado. A continuación se muestra el código:
letx =5;
lety =10;
letresult =x +y;
console.log(«The result is: «+result);
- En el código anterior, xy yson variables que almacenan los números. x + yes una expresión que suma los dos números, mientras que console.log es una función que se utiliza para imprimir el resultado en la consola.
- Copia el código anterior y pégalo en la consola pulsando la tecla Ctrl + V. Una vez pegado, pulsa Enter. Deberías ver el resultado mostrado como:
¡Enhorabuena! Has creado con éxito tu primer programa en JavaScript. Esto es solo el principio, y hay mucho más por explorar a medida que profundizamos en JavaScript en esta sala.
Responda las siguientes preguntas
¿Cuál es el resultado del código si el valor de x se cambia a 10?
The result is: 20
¿JavaScript es un lenguaje compilado o interpretado?
Interpreted
Tarea 4 Integración de JavaScript en HTML
Esta tarea presupone que tienes conocimientos básicos de HTML y su estructura. En esta sección se explorará cómo integrar JavaScript en HTML. Normalmente, JavaScript no se utiliza para renderizar contenido; funciona junto con HTML y CSS para crear páginas web dinámicas e interactivas. Si no estás familiarizado con HTML, se recomienda consultar el enlace proporcionado . Existen dos formas principales de integrar JavaScript en HTML: interna y externamente.
JavaScript interno
JS interno se refiere aincrustaciónEl código JS se inserta directamente en un documento HTML. Este método es preferible para principiantes, ya que les permite ver cómo interactúa el script con el HTML. El script se inserta entre <script>etiquetas. Estas etiquetas se pueden colocar dentro de la <head>sección, que se usa normalmente para scripts que deben cargarse antes de que se muestre el contenido de la página, o dentro de la <body>sección, donde el script puede utilizarse para interactuar con los elementos a medida que se cargan en la página web.
Ejemplo
Para crear un documento HTML con JS interno, haga clic con el botón derecho en Desktopy seleccione Create Document> Empty File. Nombre el archivo internal.html. A continuación, haga clic con el botón derecho en el internal.htmlarchivo y choose Open with Pluma ábralo en un editor de texto.
Una vez abierto el editor, pegue el siguiente código:
Después de pegar el código, haga clic Filey seleccione Save, lo que guardará el archivo en internal.html. Haga doble clic en el archivo para abrirlo en el navegador Chrome, donde verá la siguiente salida:
En este documento HTML, utilizamos JavaScript interno, lo que significa que el código se encuentra directamente dentro del archivo HTML, en la etiqueta `<script> `. El script realiza una tarea sencilla: suma dos números (x e y) y muestra el resultado en la página web. El JavaScript interactúa con el HTML seleccionando un elemento (` <p>` con el ID «resultado» ) y actualizando su contenido document.getElementById(«result»).innerHTML. Este JavaScript interno se ejecuta cuando el navegador carga el archivo HTML.
JavaScript externo
El uso de JavaScript externo implica crear y almacenar código JavaScript en un archivo independiente con una .js extensión específica. Este método ayuda a los desarrolladores a mantener el documento HTML limpio y organizado. El archivo JavaScript externo puede almacenarse en el mismo servidor web que el documento HTML o en un servidor web externo, como la nube.
Usaremos el mismo ejemplo para JavaScript externo, pero separaremos el código JavaScript en un archivo diferente.
Primero, crea un nuevo archivo con el nombre script.jsy guárdalo en Desktopcon el siguiente código:
A continuación, crea un nuevo archivo con el nombre external.htmly pega el siguiente código (observa que el código HTML es el mismo que el del ejemplo anterior):
Ahora, haz doble clic en el archivo external.html y comprueba los resultados. ¿Observas alguna diferencia? No, el resultado sigue siendo el mismo que en el ejemplo anterior.
Lo que hicimos de forma diferente fue usar el srcatributo en la etiqueta <script> para cargar el JavaScript desde un archivo externo. Cuando el navegador carga la página, busca el script.jsarchivo y carga su contenido en el documento HTML. Este enfoque nos permite mantener el código JavaScript separado del HTML, lo que hace que el código esté más organizado y sea más fácil de mantener, especialmente al trabajar en proyectos grandes.
Verificación de JavaScript interno o externo
Al realizar pruebas de penetración en una aplicación web, es importante verificar si el sitio web utiliza JavaScript interno o externo. Esto se puede comprobar fácilmente viendo el código fuente de la página. Para ello, abra la página external_test.html ubicada en la exercisecarpeta en Chrome, haga clic con el botón derecho en cualquier parte de la página y seleccione View Page Source.
Esto mostrará el código HTML de la página renderizada. Dentro del código fuente, cualquier JavaScript escrito directamente en la página aparecerá entre etiquetas <script>src sin el atributo src. Si ve una etiqueta <script> con el atributo src , significa que la página está cargando JavaScript externo desde un archivo aparte.
Como ejemplo práctico, visite https://tryhackme.com en su navegador e inspeccione el código fuente para identificar cómo el sitio web carga el JavaScript internamente y desde fuentes externas.
Responda las siguientes preguntas
¿Qué tipo de integración de JavaScript coloca el código directamente dentro del documento HTML?
Internal
¿Qué método es mejor para reutilizar JavaScript en varias páginas web?
External
¿Cuál es el nombre del archivo JS externo al que llama external_test.html ?
thm_external.js
¿Qué atributo enlaza un archivo JS externo en la etiqueta <script>?
src
Tarea 5 Abuso de las funciones de diálogo
Uno de los principales objetivos de JavaScript es proporcionar cuadros de diálogo para interactuar con los usuarios y actualizar dinámicamente el contenido de las páginas web. JavaScript ofrece funciones integradas como `<input>` alert, `<input> prompt` y ` confirm<input>` para facilitar esta interacción. Estas funciones permiten a los desarrolladores mostrar mensajes, recopilar información y obtener la confirmación del usuario. Sin embargo, si no se implementan de forma segura, los atacantes pueden explotar estas características para ejecutar ataques como el Cross-Site Scripting (XSS), que se abordará más adelante en este módulo.
Lo utilizaremos Google Chrome consoleen los próximos ejercicios.
Alerta
La función de alerta muestra un mensaje en un cuadro de diálogo con un OKbotón » «, que se usa normalmente para transmitir información o advertencias a los usuarios. Por ejemplo, si queremos mostrar » Hello THM» al usuario, usaríamos un alert(«HelloTHM»);. Para probarlo, abre la consola de Chrome, escribe alert(«Hello THM»)y pulsa Intro. Aparecerá un cuadro de diálogo con el mensaje en la pantalla.
Inmediato
La función prompt muestra un cuadro de diálogo que solicita al usuario que ingrese datos. Devuelve el valor ingresado cuando el usuario hace clic en » OK», o null si el usuario hace clic en » Cancel». Por ejemplo, para solicitar al usuario su nombre, usaríamos prompt(«What is your name?»);.
Para probar esto, abre la consola de Chrome y pega el siguiente código que solicita un nombre de usuario y luego lo saluda.
name =prompt(«What is your name?»);
alert(«Hello «+name);
Una vez que pegue el código y presione Enter, aparecerá un cuadro de diálogo y el valor ingresado por el usuario se devolverá a la consola.
Confirmar
La función de confirmación muestra un cuadro de diálogo con un mensaje y dos botones: » OK» y » Cancel». Devuelve verdadero si el usuario hace clic en » OK» y falso si el usuario hace clic en » Cancel». Por ejemplo, para pedirle al usuario que confirme, usaríamos confirm(«Are you sure?»);. Para probar esto, abre la consola de Chrome, escribe confirm(«Do you want to proceed?»)y presiona Enter.
Aparecerá un cuadro de diálogo y, dependiendo de si el usuario hace clic en » OK» o » Cancel», se devolverá el valor verdadero o falso a la consola.
Cómo los hackers explotan la funcionalidad
Imagina recibir un correo electrónico de un desconocido con un archivo HTML adjunto. El archivo parece inofensivo, pero al abrirlo, contiene código JavaScript que interrumpe tu experiencia de navegación. Por ejemplo, el siguiente código mostrará un cuadro de alerta con el mensaje » Hackeado » tres veces:
En el escritorio de la máquina virtual adjunta, cree un archivo llamado invoice.htmly pegue el código anterior. Haga doble clic en el archivo para abrirlo y el mensaje de alerta aparecerá tres veces, lo que provocará una experiencia no deseada.
Imagina que un atacante te enviara un archivo similar, pero en lugar de mostrar la alerta tres veces, la mostrara 500 veces . Te verías obligado a cerrar las ventanas de alerta una tras otra. Este es un ejemplo sencillo de cómo se puede usar JavaScript malicioso para causar inconvenientes o, peor aún, problemas. Por lo tanto, es fundamental asegurarse de ejecutar únicamente archivos JavaScript de fuentes confiables para evitar este tipo de inconvenientes.
Responda las siguientes preguntas
En el archivo invoice.html , ¿cuántas veces muestra el código la alerta Hacked?
5
¿Cuál de los elementos interactivos de JavaScript debería utilizarse para mostrar un cuadro de diálogo que solicite información al usuario?
prompt
Si el usuario introduce Tesla, ¿qué valor se almacena en la variable carName?
Tesla
Tarea 6 Omitir las sentencias de control de flujo
El flujo de control en JavaScript se refiere al orden en que se ejecutan las instrucciones y los bloques de código según ciertas condiciones. JavaScript proporciona varias estructuras de flujo de control, como if-elseinstrucciones switchpara tomar decisiones y bucles como `repeat` for, while`repeat` y do…while`repeat` para repetir acciones. El uso adecuado del flujo de control garantiza que un programa pueda manejar diversas condiciones de manera efectiva.
Sentencias condicionales en acción
Una de las sentencias condicionales más utilizadas es la if-else sentencia, que permite ejecutar diferentes bloques de código dependiendo de si una condición se evalúa como verdadera trueo falsa false.
Para probar esto en la práctica, vamos a crear un archivo age.htmlen el escritorio de la máquina virtual adjunta y pegar el siguiente código:
Haz doble clic en el archivo para abrirlo en Google Chrome. Verás la siguiente imagen:
En el código anterior, se te pedirá tu edad. Si tu edad es mayor o igual a 18, se mostrará un mensaje que dice » You are an adult.». De lo contrario, se mostrará un mensaje diferente. Este comportamiento está controlado por la instrucción if-else, que verifica el valor de la variable edad y muestra el mensaje apropiado según la condición.
Cómo eludir los formularios de inicio de sesión
Supongamos que un desarrollador ha implementado una funcionalidad de autenticación en JS, donde solo los usuarios con el nombre de usuario » admin» y contraseñas que coincidan con un valor específico pueden iniciar sesión. Para ver esto en acción, abra el login.htmlarchivo en la carpeta de ejercicios.
Al hacer doble clic en el archivo y abrirlo en su navegador, se le pedirá que ingrese un nombre de usuario y una contraseña. Si ingresa las credenciales correctas, se mostrará un mensaje que confirma que ha iniciado sesión, como se muestra a continuación:
Responda las siguientes preguntas
¿Qué mensaje se muestra si introduces una edad inferior a 18 años?
You are a minor.
¿Cuál es la contraseña del usuario admin?
ComplexPassword
Tarea 7 Explorando archivos minificados
Hasta ahora hemos entendido cómo funciona JS y cómo podemos leerlo, pero ¿qué ocurre si el archivo no es legible para humanos y ha sido minimizado ?
La minificación en JavaScript consiste en comprimir archivos JavaScript eliminando caracteres innecesarios, como espacios, saltos de línea, comentarios e incluso acortando los nombres de las variables. Esto ayuda a reducir el tamaño del archivo y mejora el tiempo de carga de las páginas web, especialmente en entornos de producción. Los archivos minificados hacen que el código sea más compacto y difícil de leer para los humanos, pero su funcionamiento sigue siendo el mismo.
Del mismo modo, la ofuscación se utiliza a menudo para dificultar la comprensión de JavaScript mediante la adición de código no deseado, el cambio de nombre de variables y funciones a nombres sin sentido e incluso la inserción de código ficticio.
Ejemplo práctico
Cree un archivo en el Escritorio del dispositivo adjunto.VMcon el nombre hello.htmly pegue el siguiente código HTML:
Luego, crea otro archivo con el nombre hello.jsy agrega el siguiente código:
Ahora, haga doble clic en el hello.htmlarchivo para abrirlo en Google Chrome. Una vez abierto el archivo, verá una alerta que le dará la bienvenida con » Welcome to THM».
Haz clic OKpara cerrar el cuadro de diálogo de alerta. Haz clic con el botón derecho en cualquier parte de la página y selecciona Inspectpara abrir las herramientas para desarrolladores. En las herramientas para desarrolladores, ve a la Sourcespestaña y haz clic en el hello.jsarchivo para ver el código fuente. Verás que el código JS es fácilmente accesible y visible, como se muestra a continuación:
La ofuscación en acción
Ahora intentaremos minimizar y ofuscar el código JS utilizando una herramienta en línea. Visite el sitio web.(Se abre en una pestaña nueva)Copia el contenido de hello.js, y pégalo en el cuadro de diálogo del sitio web. La herramienta minimizará y ofuscará el código, convirtiéndolo en una cadena de caracteres sin sentido como se muestra a continuación:
Pero ¿y si te dijéramos que estos caracteres sin sentido siguen siendo código completamente funcional? La única diferencia es que no son legibles para los humanos, pero el navegador aún puede ejecutarlos correctamente. El sitio web convirtió nuestro código JS a este:
Haz clic en el botón Copy to Clipboard(resaltado con el número 2 en la imagen superior) que aparece en el sitio web. A continuación, elimina el contenido actual de hello.jsla máquina virtual adjunta y pega el contenido ofuscado en el archivo.
Recarga el hello.htmlarchivo en Google Chrome y vuelve a inspeccionar el código fuente en la Sourcespestaña. Observarás que el código ahora está ofuscado, pero sigue funcionando exactamente igual que antes.
Descifrando un código
También podemos desofuscar un código ofuscado utilizando una herramienta en línea. Visite el sitio web.(Se abre en una pestaña nueva)Luego, pegue el código ofuscado en el cuadro de diálogo proporcionado. El sitio web generará automáticamente el código JavaScript equivalente, legible para humanos, lo que facilitará la comprensión y el análisis del script original.
Ya habéis visto lo fácil que nos resultó desofuscar y recuperar nuestro código original.
Responda las siguientes preguntas
¿Cuál es el mensaje de alerta que se muestra después de ejecutar el archivo hello.html ?
Welcome to THM
¿Cuál es el valor de la variable edad en el siguiente fragmento de código ofuscado?
edad=0x1*0x247e+0x35*-0x2e+-0x1ae3;
21
Tarea 8 Mejores prácticas
Esta tarea describe las mejores prácticas para evaluar un sitio web o escribir código para uno. Si estás desarrollando una aplicación web, probablemente usarás JavaScript. Las prácticas que se describen a continuación te ayudarán a reducir la superficie de ataque y minimizar las posibilidades de sufrir un ataque.
Evite depender únicamente de la validación del lado del cliente.
Una de las funciones principales de JavaScript es la validación del lado del cliente. A veces, los desarrolladores la utilizan para validar formularios y dependen completamente de ella, lo cual no es una buena práctica. Dado que un usuario puede deshabilitar o manipular JavaScript en el lado del cliente, realizar la validación en el lado del servidor también es fundamental.
Absténgase de agregar bibliotecas no confiables.
Como se mencionó en tareas anteriores, JavaScript permite incluir cualquier otro script de JavaScript mediante el srcatributo `<script>` dentro de una scriptetiqueta `<script>`. Pero, ¿ha considerado si la biblioteca que incluimos proviene de una fuente confiable? Ciberdelincuentes han subido a internet numerosas bibliotecas con nombres similares a los de bibliotecas legítimas. Por lo tanto, si incluye una biblioteca maliciosa sin pensarlo dos veces, expondrá su aplicación web a amenazas.
Evite los secretos codificados.
Nunca incluyas datos confidenciales como claves de API , tokens de acceso o credenciales directamente en tu código JavaScript, ya que el usuario puede consultar fácilmente el código fuente y obtener la contraseña.
// Bad Practice
constprivateAPIKey =’pk_TryHackMe-1337′;
Minimiza y ofusca tu código JavaScript
Minimizar y ofuscar el código JavaScript reduce su tamaño, mejora el tiempo de carga y dificulta que los atacantes comprendan su lógica. Por lo tanto, siempre se debe minimizar y ofuscar el código al usarlo en producción. Si bien el atacante podría eventualmente aplicar ingeniería inversa, obtener el código original requerirá cierto esfuerzo.
Responda las siguientes preguntas
¿Es una buena práctica incluir código JavaScript indiscriminadamente en el código, independientemente de la fuente (sí/no)?
Nay
Tarea 9 Conclusión
¡Enhorabuena por completar el curso de Fundamentos de JavaScript!
Hemos abordado temas importantes como los fundamentos de JavaScript, la creación de nuestro primer código JavaScript y la integración de JavaScript en HTML . A continuación, analizamos otros elementos interactivos de JavaScript, como las indicaciones y cómo los atacantes pueden abusar de ellas. Finalmente, se destacó el uso de las estructuras de control de flujo y cómo se pueden eludir en JavaScript.
Luego exploramos cómo usar minificar y ofuscar un archivo JS, y aprendimos el proceso inverso. Finalmente, abordamos algunas buenas prácticas que puedes seguir para proteger tu aplicación web de las amenazas cibernéticas.
¡Sigue aprendiendo y mantente alerta ante las amenazas de seguridad; tu trayectoria como desarrollador de JS acaba de comenzar!
Cuéntanos qué te parece esta sala en nuestro Discord. (Se abre en una pestaña nueva)canal o cuenta X(Se abre en una pestaña nueva). Ya nos veremos.
Sigan entrenando, Hacketones, Nos vemos en el próximo laboratorio!!!