No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

5 D铆as
0 Hrs
43 Min
25 Seg

Otras formas de agregar

7/28
Recursos

Aportes 42

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>
  • 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

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!

una peque帽a correcci贸n acerca de la funcionalidad de `innerHTML` y `outerHTML`. **ambos** metodos sirven tanto para **leer o escribir**, los nodos. la diferencia radica en lo que que devuelve cada metodo. tomando esto como nodo ejemplo: ```html \

Get Boostrap\

``` \- `outerHTML`: obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada. ```js \> title.outerHTML \> "\

Get Boostrap\

" \> title.outerHTML = title.outerHTML.replaceAll('h1', 'h2'); "\

Get Boostrap\

" ``` mientras que: \- `innerHTML` devuelve o establece la sintaxis HTML describiendo los descendientes del elemento. ```js \> title.innerHTML \> "Get Boostrap" \> title.innerHTML = "Obtiene Boostrap" "Obtiene Boostrap" ```
**Tipos de ataques XSS** Cross-Site Scripting (xss) [**XSS Almacenados**](https://developer.mozilla.org/es/docs/Glossary/Cross-site_scripting#xss_almacenados) El script inyectado se almacena permanentemente en los servidores de destino. La v铆ctima recupera entonces este script malicioso del servidor cuando el navegador env铆a una solicitud de datos. [**XSS Reflejados**](https://developer.mozilla.org/es/docs/Glossary/Cross-site_scripting#xss_reflejados) Cuando se enga帽a a un usuario para que haga clic en un enlace malicioso, env铆a un formulario especialmente dise帽ado o navegue a un sitio malicioso, el c贸digo inyectado viaja al sitio web vulnerable. El servidor web refleja el script inyectado en el navegador del usuario, por ejemplo, en un mensaje de error, un resultado de b煤squeda o cualquier otra respuesta que incluya datos enviados al servidor como parte de la solicitud. El navegador ejecuta el c贸digo porque asume que la respuesta proviene de un servidor "de confianza" con el que el usuario ya ha interactuado. [**XSS basados en DOM**](https://developer.mozilla.org/es/docs/Glossary/Cross-site_scripting#xss_basados_en_dom) El payload se ejecuta como resultado de la modificaci贸n del entorno DOM (en el navegador de la v铆ctima) utlizado por el script original del lado del cliente. Es decir, la p谩gina en s铆 no cambia, pero el c贸digo del lado del cliente contenido en la p谩gina se ejecuta de forma inesperada debido a las modificaciones maliciosas del entorno DOM. Fuente: <https://developer.mozilla.org/es/docs/Glossary/Cross-site_scripting>

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(鈥榖efore/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 鈫扙SCRIBIR

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

<h4>Otras formas de agregar</h4>

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

馃憣