Otras formas de agregar

Clase 8 de 29 • Curso de Manipulación del DOM

Carlos Eduardo Gomez García

teacher•

Existen otras formas de agregar nodos: .

node.outerHTML: Sirve para leer HTML para leer HTML
node.innerHTML: Sirve para escribir HTML

. PEEEEEEERO, tienen un problema de seguridad 👀☝️ . hack: Cuando en el inspector de elementos seleccionas un elemento y en la consola escribes $0, este te devolverá el elemento tal como si lo hubieses seleccionado con document.querySelector(). . Aquí les dejo el playground que usó el profesor para hacer las pruebas: https://codepen.io/jonalvarezz/pen/OJXeNab?editors=0110 . El problema con estas formas de inserciones es que permiten la inserción XSS, es decir, código maligno, y cualquier usuario programador malicioso podría meter scripts molestos, imagina que cada que un usuario llegue a tu página le salga un alert... ¡Sería catastrófico! Siempre sanitiza (remover caracteres especiales) los inputs de tus usuarios

Andrés Felipe Lopez gomez

student•

Excelente aporte

Luis Felipe Medina Rodriguez

student•

te encuentro

Fernando Quinteros Gutierrez

student•

💳 Otras formas de agregar

Ideas/conceptos claves

Los ataques XSS son un tipo de inyección en la cual un atacante logra ejecutar código en los navegadores de los usuarios que acceden a un sitio web legítimo

Apuntes

Existen otras formas de leer y agregar nodos que son muchas convenientes usando cadenas de texto
- node.outerHTML (leer)
  - Nos dejar leer el HTML como una cadena del nodo seleccionado
- node.innerHTML (escribir)
  - Nos deja modificar el contenido del nodo
La desventaja es que convierte el texto en HTML pudiendo crear inyecciones de XSS
- Debido a que convierte todo el texto en HTML, habiendo la posibilidad de que se pueda inyectar códigos de terceros
Si es que fuera muy necesario usar estos métodos y el usuario necesitara ingresar los datos, se debe hacer si o si un proceso de sanitize (Limpieza)

RESUMEN: Existe otras formas de leer y escribir el HTML, pero tienen un riesgo de ataques XSS, no es mala siempre y cuando se tenga un cuidado con las posibilidades del usuario

Edgar Lopez Arroyo

student•

Gran resumen. Yo utilizaba innerHTML ahora me lo pensare dos veces.

George Báez Beltré

student•

https://github.com/gbirke/Sanitize.js/blob/master/README.md A quien le pueda servir

Jonathan 🦑 Alvarez

teacher•

Super útil! Siempre uso alguno por el estilo en mis proyectos :)

Jimmy Buriticá Londoño

student•

Ten en cuenta que al usar outerHTML trae todo el HTML incluyendo los Tag del Nodo, con innerHTML solo debes incluir el código HTML que va al interior de los Tag.

Isaac Hernandez Resendiz

student•

😁 No hice nada pero me divertí 🤣

Rodrigo Martinez

student•

Una de las razones de por que no es seguro utilizar .outerHTML

Codigo

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Librado Hernandez Cruz

student•

uff "que rolon"

Pol Valle

student•

outer o Inner

Santiago Andres Alvarez Cuadros

student•

Gracias a innerHTML, ahora tengo todos estos puntos de Platzi rank 😂

Charles Castillo Rosas

student•

xDDD

Frandel Corporan Rodríguez

student•

Sebastian Gonzalez

student•

innerHTML => agregar HTML y outerHTMl => leer HTML

Son tan faciles y comodas de usar, pero para nada recomendadas, lo que sucede con ellas es que te permiten agregar un bloque completo de HTML ejemplo toda una barra de navegacion como si fuera codigo en un archivo .html, que con createElement seria un poco molesto y toma mas tiempo.
. PERO no se recomienda ya que puede insertarse en el codigo elementos malignos que pueden afectar la experiencia del usuario en la pagina. Lo que se debe hacer sobre todo cuando es texto que escribe el usuario ejemplo llenando un formulario es sanitizar o limpiar ese texto antes de usar el innerHtml para evitar que venga contenido no deseado!

Jimmy Buriticá Londoño

student•

Yo acostumbro usar innerHTML para armar sitios y me ha servido mucho. La recomendación que das esta bien, no confiar en los usuarios, pero en ti como desarrollador si puedes confiar. 👍

Sebastian Gonzalez

student•

Es verdad, como decía el profesor es en los campos donde interactúe especialmente con texto el usuario es preferible no usar innerHTML, y ya para el resto del código se puede usar sin problema. Al igual es bueno aprender de seguridad y poder implementarla en el desarrollo web

Rony Porraz Vargas

student•

¿Que es XSS? O tambien llamado Cross site scripting es una secuencia de comandos en sitios cruzados. es un tipo de vulnerabilidad informática o agujero de seguridad típico de las aplicaciones Web, que puede permitir a una tercera persona inyectar en páginas web visitadas por el usuario código JavaScript o en otro lenguaje similar.

Referencia a Wikipedia

David Daniel Castillo Nava

student•

Ya las medio explique en la clase anterior jejej!!
Nota Mental: En nuestro inspector de elemento si seleccionamos un elemento con el mouse y luego en la consola escribimos $0 esto nos retornara dicho elemento seleccionado.
Las otras formas de seleccionar elementos son:

// Elemento de ejemplo: 
<div id="referencia">Hola</div>
// Este asignara a element todo el elemento que estemos pasando como referencia
const referencia =  document.getElementById("referencia");
const element = referencia.outerHTML; 
console.log(element);
// <div id="referencia">Hola</div>

Por otra parte :

// Este nos retornara el contenido de referencia que seleccionaste 
const referencia =  document.getElementById("referencia");
const element = referencia.innerHTML; 
console.log(element);
//Hola

Para reasignarlo solo debemos asignarle el valor que queramos.

referencia.outerHTML = "Saludos";
// Saludos
referencia.innerHTML = "Saludos";
// <div id="referencia">Saludos</div>

Podemos tratar esto como un string podríamos hacer esto

referencia.outerHTML += `<div>Soy otro elemento<div>`;
//Esto generaría algo así
<div id="referencia">Hola</div><div>Soy otro elemento<div>

referencia.innerHTML += `<div>Soy otro elemento<div>`;
// Esto generaria algo asi:
<div id="referencia">Hola<div>Soy otro elemento<div></div>

Nota importante: Se debe usar con cuidado ya que puede ser factor de inseguridad en la web.

Daniel David Mármol Rivero

student•

Es conveniente usarlo porque se pueden crear cosas interesantes, pero se debe evitar cuando la cadena de texto (lo que renderizamos mediante innerHTML), si eso de alguna forma es producto de algo que escribió el usuario NUNCA CONFIAR en eso, porque hay que pasarlo por una limpieza para asegurarnos de que el código no tenga nada maligno dentro de él.

Roberto Medina

student•

Alguien conoce una página donde vengan las reglas para hacer una correcta sanitización del código javascript o html?

Massimo Di Berardino

student•

Hola @robm, podrías utilizar Ligthhouse para examinar tu web y esta herramienta te ofrece algunos tips y cosas que puedes hacer para mejorarla

Roberto Medina

student•

muchas gracias Massimo, se ve muy interesante, lo voy a checar.

Roger Colquehuanca

student•

interesante este topic.

es fácil usar innerHTML pero tiene sus detalles, también escuche sobre XSS. pero ahora lo veo mas a detalle. comparto algo sobre sanitize https://gomakethings.com/how-to-sanitize-third-party-content-with-vanilla-js-to-prevent-cross-site-scripting-xss-attacks/

Leandro Gavidia Santamaria

student•

Además de ** document.outerHTML**, esta document.outerText que en vez de devolvernos el nodo completo, nos devuelve su texto. Y también está ** innerText**, que en vez de inyectar un nodo HTML, inyecta un texto, al contrario de innerHTML, que nos permite inyectar nodos completos.

Efraín Hernández García

student•

Leí un aporte del profesor donde el dice que el usa https://www.npmjs.com/package/sanitize-html para hacer sanitize de un HTML y evitar estos problemas de seguridad.

Eduardo Rodriguez

student•

gracias por el aporte

Pablo Aquino

student•

node.outerHTML, para leer el nodo HTML
node.innerHTML, para escribir el nodo HTML, se debe tener cuidado para evitar problemas de seguridad XSS.

Roberto Medina

student•

Hola:

Por si alguien le interesa saber que es XSS: https://www.welivesecurity.com/la-es/2015/04/29/vulnerabilidad-xss-cross-site-scripting-sitios-web/

Saludos :)

Xavier Flores

student•

una practica mas segura para innerHTML es innerText, así evitas los ataques XSS

Roger Colquehuanca

student•

Considera no usar InnerHTML cuando el texto a renderizar proviene del usuario ejemplos etiquetas INPUTS

Juan Esteban Galvis

student•

Muy interesante la clase, es verdad se podría hacer que primero lea la cadena (OuterHTML) y valide que no tenga JavaScript o líneas no permitidas para luego hacer el innerHTML

Yo por ejemplo quiero darle uso en un sistema de comentarios para que no sea texto plano sino poder agregar imágenes, negrilla, etc (Claro validar que no ponga nada raro por la falla de seguridad que vimos)

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

// Elemento de ejemplo: 
<div id="referencia">Hola</div>
// Este asignara a element todo el elemento que estemos pasando como referencia
const referencia =  document.getElementById("referencia");
const element = referencia.outerHTML; 
console.log(element);
// <div id="referencia">Hola</div>

referencia.outerHTML += `<div>Soy otro elemento<div>`;
//Esto generaría algo así
<div id="referencia">Hola</div><div>Soy otro elemento<div>

referencia.innerHTML += `<div>Soy otro elemento<div>`;
// Esto generaria algo asi:
<div id="referencia">Hola<div>Soy otro elemento<div></div>

Otras formas de agregar

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones