Otras formas de agregar

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

💳 Otras formas de agregar

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

• 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

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

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>

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

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!

¿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.

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.

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

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)

Otras formas de agregar

node.outerHTML: Sirve para leer HTML

node.innerHTML: Sirve para escribir HTML

El problema con estas formas de inserciones es que permiten la inserción XSS o Cross-site scripting, es una vulnerabilidad de seguridad que permite a un atacante inyectar en un sitio web código malicioso del lado del cliente. Este código es ejecutado por las víctimas y permite a los atacante eludir los controles de acceso y hacerse pasar por usuarios. Siempre sanitiza (limpia) los inputs de tus usuarios.

• node.outerHTML, para leer el nodo HTML

• node.innerHTML, para escribir el nodo HTML

El manejo de infomación suministrada por parte del usuario siempre es muy delicado, si no se hace de la manera correcta podemos perjudicar la página web o incluso al usuario.

Es cierto lo que dice el profe, esto puede inyectar código malintencionado, por eso debemos usarlo con cuidado!

Get Boostrap\

Get Boostrap\

Get Boostrap\

Mis apuntes en Notion💚

Cuidado con innerHTML cuando proviene del usuario

innerHTML es inseguro pq renderiza lo que venga en la cadena de texto lo que hace proceso a xss, si no haces sanitize al texto introducido del lado del cliente

Esta super interesante este cursoo!

Interesante la parte de seguridad, no tenia ni idea de esto

// Seleccionar el elemento párrafo, el que queremos manipular
const parr = document.querySelector('p');

// Leer una cadena de texto del código html del elemento
const parrHTML = parr.outerHTML; // res: <p>Esto es un párrafo</p>

// Leer el valor actual de los que está dentro del elemento sin las etiquetas
const parrText = parr.innerHTML; // res: ' Esto es un párrafo '

// Leer el valor actual de los que está dentro del elemento, solamente texto
const parrText = parr.innerText; // res: 'Esto es un párrafo'

// Agregar un texto nuevo dentro del elemento html, puedo incluir también código html
parr.innerHTML = 'Texto nuevo';

// Agregar un texto nuevo dentro del elemento html, solamente texto nada de html
parr.innerText = 'Texto nuevo';

Agregar nodos:

parent.appendChild(element)
parent.append(element)
parent.insertBefore(element, reference)
parent.insertAdajcentElement(‘before/after/begin/end’, element)

Existen otras formas como:

node.outerHTML: Sirve para leer HTML
node.innerHTML: Sirve para escribir HTML // Hueco de seguridad, Inyeccion XSS

Mi aporte, 4 ejemplos, usando creaTextNode, creaElement, textContent e innerHTML.

const box1 = document.querySelector('.box1')
const parrafo1 = document.createTextNode('parrafo 1')
box1.appendChild(parrafo1)

const box2 = document.querySelector('.box2')
const parrafo2 = document.createElement('h1')
// innerHTML es propenso a ataques XSS e inyecciones de codigo maligno
parrafo2.innerHTML = "parrafo 2"
box2.append(parrafo2, "parrafo 2 extra")

const box3 = document.querySelector('.box3')
const title3 = document.querySelector('.title3')
const parrafo3 = document.createElement('h1')
parrafo3.textContent = "parrafo 3 insert before"
box3.insertBefore(parrafo3, title3)

const box4 = document.querySelector('.box4')
const title4 = document.querySelector('.title4')
const parrafo4 = document.createElement('h1')
parrafo4.textContent = "parrafo 4 insert before"
box4.insertAdjacentElement('beforebegin', parrafo4)
// box4.insertAdjacentElement('afterbegin', parrafo4)
// box4.insertAdjacentElement('beforeend', parrafo4)
// box4.insertAdjacentElement('afterend', parrafo4)

El shortcut esta buenísimo, el consejo se seguridad aun mejor, todos los días se aprende algo nuevo.

Existen otras formas de leer y agregar nodos utilizando strings o cadenas de textos.

• node.outerHTML → LEER

Este metodo nos devolvera como una cadena de texto el HTML de ese texto.

• node.innerHTML →ESCRIBIR

Si ejecutamos esto nos dara el valor actual que contiene ese elementio, pero al igual podemos asignarlo a otros valores que podriamos reemplazar.

CONSEJO

si Seleccionamos un elemento en los elementos del navegador, podemos referirnos a este en la consola con ‘$0’

USAR ESTOS ELEMENTOS PODRIAN TENER PROBLEMAS DE SEGURIDAD. YA QUE ALGUIEN PUEDE INYECTAR CODIGO MALIGNO. Podemos usar esto de formas creativas pero debemos de tener cuidado de hacerlo.

Wao, ya sabemos modificar una página Web y reestructurarla, a nuestro gusto.

Genial

Protip: usando $0 podemos acceder al elemento HTMl que esté seleccionado en el inspector.

htmlElement.outerHTML = 'DOMString'; //Leer
htmlElement.innerHTML = 'DOMString'; //Escribir

innerHTML tiene problemas de inyecciones XSS, hay que tener cuidado con esto.

También existe innerText:
innerText returns all text contained by an element and all its child elements.
innerHtml returns all text, including html tags, that is contained by an element.

Otras formas de agregar Nodos.
Node.outerHTML, para leer
Node.innerHTML, para escribir

👌