1.5 KiB
1.5 KiB
title | localeTitle |
---|---|
HTML Dom Innerhtml Property | HTML Dom Innerhtml Propiedad |
HTML Dom Innerhtml Propiedad
La propuesta innerHTML
devuelve el contenido HTML dentro de un elemento seleccionado y también le permite definir un nuevo contenido HTML.
OBTENER CONTENIDO DE ELEMENTOS
<div id="demo">
<p>Demo</p>
</div>
var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>
SET ELEMENTO CONTENIDO
<div id="demo"></div>
var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";
El HTML ahora será como
<div id="demo">
<div>Demo</div>
</div>
CONSIDERACIONES DE SEGURIDAD
El valor establecido en innerHTML
debe provenir de fuentes confiables, ya que Javascript colocará cualquier elemento dentro de ese elemento y se ejecutará como HTML simple.
Ejemplo:
Al establecer un valor de " <script>alert();</script>
" se activará la función Javascript "alert ()":
var element = document.getElementById("demo");
element.innerHTML = "<script>alert();</script>";
Este tipo de ataque se llama Cross Site Scripting, o XSS para abreviar .
Esta es una de las formas más comunes de cometer un ataque XSS. Si quieres aprender un poco más y aprender a defenderte, echa un vistazo a este recurso