The DOM Explained

Antes de que profundicemos en ataques basados en DOM, necesitamos explicar lo que es el DOM. DOM se refiere al Document Object Model, que es la interfaz de programación que muestra el documento de web. Cuando haces una petición a una aplicación web, el HTML de respuesta se carga como DOM en el navegador. En esencia, el DOM es la vista de programación de la aplicación web que el usaurio ve en su navegador. Una vez cargado, JavaScript puede interferir con el DOM y hacer actualizaciones a cosas que el usuario ve.El DOM tiene estructura de árbol, permitiendo a los desarrolladores usar JavaScript para buscar o modificar elementos específicos. Veamos un ejemplo práctico.

<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1> Hello Moon! </h1>
        <p> The earth says hello! </p>
    </body>
</html>

Si quieres jugar con el DOM, puedes copiar el código de arriba a un archivo llamado index.html y abrirlo usando tu navegador. El elemento document siempre es la cabeza del tree. El subtree html es donde todo el código HTML de la página cargada vive, la cual es dividida entre head y body. Puedes ver el DOM usando las herramientas de desarrollador integradas en el navegador.

Usando las herramientas de desarrollador, también podemos interferir con el JavaScript por consola y usar esto para modificar el DOM. Por ejemplo, podríamos crear un nuevo elemento en el DOM usando las siguientes instrucciones:

1. Haz click en el botón Console.
2. Crea un nuevo párrafo: const paragraph = document.createElement("p");
3. Crea un nuevo nodo de texto: `const data = document.createTextNode("Our new text");
4. Añade el texto al nuevo párrafo: paragraph.appendChild(data)
5. Encuentra el párrafo existente y añádele el nuevo párrafo: document.getElementsByTagName("p")[0].appendChild(paragraph);
6. Tu nuevo texto debería ser cargado como se muestra abajo.

Aquí es donde está el poder de los ataques basados en DOM. Si conseguimos inyectar en el DOM, podemos alterar lo que ve el usuario o incluso tomar acciones como el usuario, efectivamente suplantando su identidad. Esto se volvió un problema significativamente mayor con los frameworks de aplicaciones web modernas donde el control sobre el DOM no significa sólo control sobre una sóla página sino persistencia en toda la aplicación web.