Joven hacker sonriendo
Lupa investigando un código HTML

Te Veo No Te Veo

Solución al reto Main 2 de Hackthis
Los navegadores son el medio mediante el cual accedemos a la información de Internet y poseen algunas funcionalidades que quizás desconozcamos. En este artículo profundizaremos un poco más en el uso del navegador para inspeccionar código y resolver un reto de hacking.

El mundo del desarrollo Web ha crecido a pasos agigantados debido a la evolución de Internet y a la aparición de la denominada Web 2.0 en los últimos años. Sin embargo, esto ha acarreado consigo grandes desafíos y responsabilidades para los desarrolladores y diseñadores, tanto Web como móvil, que día a día deben innovar en sus creaciones para sobresalir en un mundo virtual completamente competitivo. Es por esta razón que para dichos actores es importante valerse de herramientas que les faciliten sus actividades diarias, de tal manera que puedan ser más eficientes y productivos.

Lo anterior, permite dar continuación a una serie de artículos en donde hemos hablado sobre algunas de las herramientas más utilizadas e incorporadas en los navegadores Web modernos. En esta ocasión, daremos lugar a otro tipo de herramienta, la cual nos permite inspeccionar cualquier elemento de una página Web en vivo. Es decir, a medida que editas el código fuente de la página, podrás ver los cambios realizados y reflejados de manera inmediata a través de tu navegador.

Reto: Main Level 2

Para ilustrar el uso de esta nueva funcionalidad, en esta oportunidad daremos solución al reto 2 de la categoría MAIN del sitio Web hackthis, tal y como hicimos en una publicación anterior para el reto 1 de la misma categoría:

reto
Imagen 1. hackthis: nivel 2 de la categoría MAIN

Al igual que el reto 1, en este se solicita ingresar credenciales válidas para un determinado usuario. Solo que esta vez haremos uso de una nueva herramienta incorporada en los navegadores Web: Inspect Element (o Inspeccionar Elemento si tu sistema operativo está en español). Podemos acceder a esta funcionalidad presionando click derecho y buscando la opción con dicho nombre, o también puedes hacer uso del atajo al presionar la tecla F12. Una vez desplegada la herramienta, busca el siguiente bloque de etiquetas dentro del HTML:

solucion
Imagen 2. hackthis: solución al reto MAIN 2

Aquí debemos prestar especial atención al contenido entre las dos etiquetas <span> y </span>. Como se aprecia en la Imagen 2, la primera contiene el valor resu y la segunda ssap. Una vez ingresadas dichas credenciales, el reto es resuelto.

En realidad, existe una tercer y cuarta manera de resolver este ejercicio además de la descrita anteriormente y en el primer reto. La tercera, simplemente, consiste en resaltar el texto oculto a la derecha de las palabras Username y Password tal como se aprecia a continuación:

solucion-2
Imagen 3. hackthis: solución al reto MAIN 2 (tercer solución)

Editando el HTML en vivo

Una de las cualidades que resalta en la herramienta Inspect Element, es la de poder editar etiquetas HTML, CSS, inyectar código JavaScript y ver reflejados los cambios de manera instantánea dentro del navegador, sin importar si estas usando Firefox, Google Chrome, Safari o cualquier otro navegador reconocido que exista en el mercado. La cuarta y última forma (que conozco) para resolver el reto 2, consiste en el uso de esta característica. A través de esta, podremos cambiar el valor 000000 (que corresponde al color negro en RGB - Red, Green, Blue) de las dos etiquetas span por un valor visible en pantalla, por ejemplo 0000ff.

Al hacer esto, podemos ver que los cambios se reflejan de manera instantánea en el navegador:

solucion-3
Imagen 4. hackthis: solución al reto MAIN 2 (cuarta solución)

Puedes leer sobre el formato de colores RGB y probar con otros en este enlace.

Por último, y una vez explicado el paso a paso con las distintas formas de resolver un mismo reto, se incluye una pequeña animación, la cual, muestra todo el proceso para ejecutar la cuarta solución al reto 2:

solucion-3
Imagen 5. hackthis: animación y solución al reto MAIN 2 (cuarta solución)

Para terminar, y en mi opinión, antes de agregar un nuevo complemento o plugin a tu navegador, verifica que éste no cuente ya con una herramienta que cumpla con una tarea específica. Ya que entre menos complementos tengas instalados, el navegador se ejecutará y responderá a una mayor velocidad.

Por otro lado, resaltar que existen herramientas y complementos maliciosos que pueden perjudicar el rendimiento de tu equipo, por lo anterior, y en lo posible, al descargar una nueva herramienta o funcionalidad, asegúrate de que provenga de una fuente confiable.

"El hardware es lo que hace a una máquina rápida; el software es lo que hace que una máquina rápida se vuelva lenta"
— Craig Bruce

Foto del autor

Luis Arteaga

Ingeniero en Electrónica y Telecomunicaciones.

Apasionado por el desarrollo de aplicaciones web/móviles, la seguridad informática y los videojuegos.


Relacionado





Haz un comentario

Estado de los servicios - Términos de Uso