60 lines
1.5 KiB
Markdown
60 lines
1.5 KiB
Markdown
---
|
|
title: HTML Dom Innerhtml Property
|
|
localeTitle: 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_**
|
|
|
|
```html
|
|
|
|
<div id="demo">
|
|
<p>Demo</p>
|
|
</div>
|
|
```
|
|
|
|
```javascript
|
|
var element = document.getElementById("demo");
|
|
console.log(element.innerHTML) //logs <p>Demo</p>
|
|
```
|
|
|
|
**_CONTEÚDO DO ELEMENTO DO ELEMENTO_**
|
|
|
|
```html
|
|
|
|
<div id="demo"></div>
|
|
```
|
|
|
|
```javascript
|
|
var element = document.getElementById("demo");
|
|
element.innerHTML = "<div>Demo</div>";
|
|
```
|
|
|
|
O HTML agora será como
|
|
|
|
```html
|
|
|
|
<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:
|
|
|
|
```javascript
|
|
var element = document.getElementById("demo");
|
|
|
|
element.innerHTML = "<script>alert();</script>";
|
|
```
|
|
|
|
Esse tipo de ataque é chamado de [Cross Site Scripting ou XSS, abreviado](https://en.wikipedia.org/wiki/Cross-site_scripting) .
|
|
|
|
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](https://xss-game.appspot.com/) |