Otras formas de agregar
Clase 8 de 29 • Curso de Manipulación del DOM
Contenido del curso
Carlos Eduardo Gomez García
teacher•
hace 5 años
Andrés Felipe Lopez gomez
student•
hace 5 años
Luis Felipe Medina Rodriguez
student•
hace 5 años
Clase 8 de 29 • Curso de Manipulación del DOM
Contenido del curso
Carlos Eduardo Gomez García
Andrés Felipe Lopez gomez
Luis Felipe Medina Rodriguez
Fernando Quinteros Gutierrez
Edgar Lopez Arroyo
George Báez Beltré
Jonathan 🦑 Alvarez
Jimmy Buriticá Londoño
Isaac Hernandez Resendiz
Rodrigo Martinez
Librado Hernandez Cruz
Pol Valle
Santiago Andres Alvarez Cuadros
Charles Castillo Rosas
Frandel Corporan Rodríguez
Sebastian Gonzalez
Jimmy Buriticá Londoño
Sebastian Gonzalez
Rony Porraz Vargas
David Daniel Castillo Nava
Daniel David Mármol Rivero
Roberto Medina
Massimo Di Berardino
Roberto Medina
Roger Colquehuanca
Leandro Gavidia Santamaria
Efraín Hernández García
Eduardo Rodriguez
Pablo Aquino
Roberto Medina
Xavier Flores
Roger Colquehuanca
Juan Esteban Galvis
Existen otras formas de agregar nodos: .
node.outerHTML: Sirve para leer HTML para leer HTMLnode.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
Excelente aporte
te encuentro
💳 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
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
Gran resumen. Yo utilizaba innerHTML ahora me lo pensare dos veces.
https://github.com/gbirke/Sanitize.js/blob/master/README.md A quien le pueda servir
Super útil! Siempre uso alguno por el estilo en mis proyectos :)
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.
😁 No hice nada pero me divertí 🤣
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>
uff "que rolon"
outer o Inner
Gracias a innerHTML, ahora tengo todos estos puntos de Platzi rank 😂
xDDD
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!
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. 👍
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
¿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
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.
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.
Alguien conoce una página donde vengan las reglas para hacer una correcta sanitización del código javascript o html?
Hola @robm, podrías utilizar Ligthhouse para examinar tu web y esta herramienta te ofrece algunos tips y cosas que puedes hacer para mejorarla
muchas gracias Massimo, se ve muy interesante, lo voy a checar.
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/
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.
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.
gracias por el aporte
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 :)
una practica mas segura para innerHTML es innerText, así evitas los ataques XSS
Considera no usar InnerHTML cuando el texto a renderizar proviene del usuario ejemplos etiquetas INPUTS
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)