El día de hoy voy a ilustrarte en un lenguaje en el que he estado trabajando últimamente, algo que te puede ayudar a crear en tu navegador sin tener que instalar nada, y lo mejor es que no necesitas internet para hacerlo funcionar.
Se trata de JavaScript, un lenguaje de programación interpretado que funciona en la gran mayoría de navegadores y que hace posible el funcionamiento del 85% de los sitios web de la red de redes.
Bonito JavaScript
JavaScript es un lenguaje de programación muy bonito, su sintaxis es bastante amigable ya que no es estrictamente tipado. Hacer código con JavaScript es bastante sencillo solo debemos escribir una instrucción y el motor del navegador se encarga de interpretarla para hacerla posible y funcional, no necesitamos compilar.
Un ejemplo muy sencillo de JavaScript es el clásico de todos los lenguajes “Hola Mundo!”
alert("Hola Mundo"); //función para mostrar alerta!
Aquí solo invocamos una de varias funciones nativas del lenguaje, esta tiene como finalidad mostrar una alerta en la ventana del navegador.
Practicar es la clave
La mejor forma de aprender cualquier lenguaje de programación es practicar, practicar y seguir haciéndolo hasta que puedas escribir código sin necesidad de leer documentación.
Para practicar JavaScript usaremos nuestro navegador necesitaremos crear una pestaña blanca.
En la Barra de direcciones escribimos about:blank luego presiona ↩️
Tendrás una pestaña con un lienzo blanco similar a esté.
¡Developer Tools!
- Presionamos F12 (para mostrar el DeveloperTools).
- Seleccionamos la sección Console (Para Mostrar la Consola).
- En el recuadro de abajo colocas la sentencia de JavaScript que quieras.
- Presionas ENTER para ejecutar la instrucción o serie de instrucciones.
Ten siempre en cuenta esto a la hora de las practicas.
DOM (Document Object Model)
La Interface DOM nos permite manipular completamente el documento HTML que este cargado en el navegador.
La estructura DOM nos permite encontrar los elementos de la página de una manera sencilla, mediante unas funciones o métodos predeterminados.
Al trabajar con un elemento de la página, debemos dar siempre dos pasos, el primero es acceder al elemento en sí, para eso tenemos 4 métodos disponibles.
document.getElementByID()document.getElementsByClassName()document.getElementsByName()document.getElementsByTagName()
Los diferentes métodos en realidad son funciones del DOM y más concretamente del objeto document, por lo que al escribirlas deben llevar siempre la palabra document seguida de un punto, más adelante ampliare el funcionamiento de estos métodos.
Después de acceder al elemento lo almacenamos en una variable, desde esa variable podemos efectuar la operación que necesitemos, ya sea borrar, leer o modificar el contenido dentro del elemento.
Alterando el DOM
Veamos un ejemplo práctico para el método getElementById():
Código HTML
<h1 id="alterable"> Elemento sin alterar. </h1>
<button onclick="alterar()"> Ejecutar JavaScript </button>
Código JavaScript
function alterar() {
var elemento = document.getElementById('alterable');
elemento.innerHtml = '<h1>ALTERADO!</h1>';
var elemento = document.getElementById('alterable');
elemento.innerHTML = 'ALTERADO!';
}
Resultado DOM
Elemento sin alterar.
Como puedes ver en el ejemplo anterior al hacer clic en el botón se altera el contenido de la etiqueta
<h1></h1>apuntando a su identificador y demostrando el funcionamiento del método anteriormente mencionado. Es importante tener en cuenta que el código JavaScript Puede ser inyectado desde una extensión del navegador y ejecutado desde el momento en que carga el sitio web.
Teniendo todo esto en cuenta.
¿Que significa HackDom?
La frase viene de que desarrolladores abusaban de los métodos de esta interface para crear extensiones que robaban datos de los usuarios en navegadores conocidos.
¿Cómo es posible esto?
Creaban un fichero de JavaScript y dentro usaban funciones como getElementsbyTag("input") para tener acceso a todas las etiquetas input del
formulario de tus sitios webs preferidos, este código JavaScript se empaquetaba
en una extensión y se distribuía en la tienda de extensiones de tu navegador.
En algunos casos se detectó que la extensión esperaba a que cargaras un sitio web conocido para inyectar el código malicioso y capturar los datos, luego estos datos eran enviados a un servidor (Todo en el mismo código de JavaScript).
Ejemplo y codigo
Veamos un ejemplo del código para acceder a las etiquetas input.
function hackdom() {
/*Llamo a la funcion getElementsByTagName();
Le paso como parametro "input"
*/
var inputs = document.getElementsByTagName("input");
//Luego recorro todos los inputs e imprimo sus valores en la consola.
for (i=0 ; i<inputs.length ; i++) {
console.log(inputs[i].placeholder + ": " + inputs[i].value+"\n");
}
}
Con esta funcion de JavaScript obtienes la informacion de todos los inputs en el DOM Puedes copiar este bloque de código para probarlo desde la consola.
Codigo explicado
- Declaro una variable y dentro de ella llamo al método getElementsByTagName().
- Le paso como argumento “input” para que retorne un arreglo con todos los inputs del documento HTML.
- Recorro el arreglo que devuelve con un ciclo for, imprimiendo el resultado de los inputs.
Resultado HackDom
Inserta informacion en el formulario y presiona HackDom.
Concluyendo
Hoy en día los navegadores han doblado la seguridad en sus tiendas de extensiones debido al problema del abuso de extensiones que secuestran tu navegador para intentar robar tus datos y colocar publicidad.
Me interese en el tema de HackDom porque es algo sencillo de poner en práctica en tu navegador y demuestra uno de los problemas más complicados de los navegadores webs las Extensiones Maliciosas recomiendo que pongas atención en las extensiones que instalas en tu navegador, en otro post estare hablando sobre como protejer y limpiar tu navegador.
Tambien estaré profundizando más sobre JavaScript si tienes alguna duda házmelo saber en la caja de comentarios.
Tenía tiempo armando este blog, no es fácil pero ya está mi primer post, te soy realmente sincero estoy muy feliz de estar escribiendo para ti, espero te puedas llevar algo que te sirva y que entiendas mi objetivo principal, ENSEÑAR.
Gracias por leerme! 😀