Otras formas de agregar
Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Otras formas de agregar
Contenido del curso
Otras formas de agregar
Carlos Eduardo Gomez García
EstudianteExisten 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
Andrés Felipe Lopez gomez
EstudianteExcelente aporte
Luis Felipe Medina Rodriguez
Estudiantete encuentro
Fernando Quinteros Gutierrez
Estudiante💳 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
Edgar Lopez Arroyo
EstudianteGran resumen. Yo utilizaba innerHTML ahora me lo pensare dos veces.
George Báez Beltré
Estudiantehttps://github.com/gbirke/Sanitize.js/blob/master/README.md A quien le pueda servir
Jonathan 🦑 Alvarez
ProfesorSuper útil! Siempre uso alguno por el estilo en mis proyectos :)
Jimmy Buriticá Londoño
EstudianteTen 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
Estudiante😁 No hice nada pero me divertí 🤣
Rodrigo Martinez
EstudianteUna 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
Estudianteuff "que rolon"
Pol Valle
Estudianteouter o Inner
Santiago Andres Alvarez Cuadros
EstudianteGracias a innerHTML, ahora tengo todos estos puntos de Platzi rank 😂
Charles Castillo Rosas
EstudiantexDDD
Frandel Corporan Rodríguez
Estudiante
Sebastian Gonzalez
EstudianteinnerHTML => 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
EstudianteYo 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
EstudianteEs 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
Estudiante¿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
EstudianteYa 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
EstudianteEs 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
EstudianteAlguien conoce una página donde vengan las reglas para hacer una correcta sanitización del código javascript o html?
Massimo Di Berardino
EstudianteHola @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
Estudiantemuchas gracias Massimo, se ve muy interesante, lo voy a checar.
Roger Colquehuanca
Estudianteinteresante 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
EstudianteAdemá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
EstudianteLeí 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
Estudiantegracias por el aporte
Pablo Aquino
EstudianteRoberto Medina
EstudianteHola:
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
Estudianteuna practica mas segura para innerHTML es innerText, así evitas los ataques XSS
Roger Colquehuanca
EstudianteConsidera no usar InnerHTML cuando el texto a renderizar proviene del usuario ejemplos etiquetas INPUTS
Juan Esteban Galvis
EstudianteMuy 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)