1.5 KiB
1.5 KiB
title | localeTitle |
---|---|
HTML Dom Innerhtml Property | Propriedade HTML Dom Innerhtml |
Propriedade HTML Dom Innerhtml
O innerHTML
prop retorna o conteúdo HTML dentro de um elemento selecionado e também permite definir um novo conteúdo HTML.
OBTER O CONTEÚDO DO ELEMENTO
<div id="demo">
<p>Demo</p>
</div>
var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>
CONTEÚDO DO ELEMENTO DO ELEMENTO
<div id="demo"></div>
var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";
O HTML agora será como
<div id="demo">
<div>Demo</div>
</div>
CONSIDERAÇÕES DE SEGURANÇA
O valor definido como innerHTML
deve vir de fontes confiáveis, pois o JavaScript colocará qualquer coisa dentro desse elemento e será executado como HTML simples.
Exemplo:
Definir um valor " <script>alert();</script>
" fará com que a função "alert" () JavaScript seja acionada:
var element = document.getElementById("demo");
element.innerHTML = "<script>alert();</script>";
Esse tipo de ataque é chamado de Cross Site Scripting ou XSS, abreviado .
Esta é uma das formas mais comuns de cometer um ataque XSS. Se você quer aprender um pouco mais e aprender a se defender, confira este recurso