1

Essa propriedade é usada para poder adicionar algum conteúdo no interior de algum elemento no documento como, por exemplo.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
</head>
<body>

<p id="paragraph"></p>

<script>

    let p = document.querySelector("#paragraph");
    p.innerHTML = "Esse é um parágrafo!";

</script>

</body>
</html>

Ou então algum elemento HTML como, listas.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
</head>
<body>

<p id="paragraph"></p>

<script>

    let p = document.querySelector("#paragraph");
    p.innerHTML = "<ul><li>Lista 1</li><li>Lista 2</li><li>Lista 3</li></ul>";

</script>

</body>
</html>

Mas, ao tentar inserir o elemento script com algum código, simplesmente não funciona! caso na tag de fechamento incluir uma barra vai retornar erro.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
</head>
<body>

<p id="paragraph"></p>

<script>

    let p = document.querySelector("#paragraph");
    p.innerHTML = "<script>alert('Essa é uma caixa!')<script>";

</script>

</body>
</html>

Porque o script não é executado? seria por algum motivo de segurança?

1
  • Tem que usar uma sequencia de escape na tag e a propriedade a ser setada para substituir o elemento é outerHTML. Ficaria assim: p.outerHTML = "<script>alert('Essa é uma caixa!')<\/script>"; substituiria no documento mas o script não seria executado. Para ser executado o script tem que ser adicionado ou pelo DOM ou então com document.write porém document.write implica na recarga do documento. Isso acontece porque o navegador impõe uma camada de isolamento entre componentes visuais e código, nada a ver com segurança. Commented 11/10/2019 às 2:49

2 Respostas 2

1

Se vc criar uma tag script no body por exemplo, e fizer nela o innerHTML do alerta, e fazer appende ai sim vai funcionar

let alerta = document.createElement("script");

alerta.innerHTML = "alert('Essa é uma caixa!')";

document.body.appendChild(alerta);

0

Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.

var name = "John";

// presumindo que el é um elemento DOM HTML
el.innerHTML = name; // inofensivo, nesse caso

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // inofensivo, nesse caso

Embora isso talvez se pareça como um ataque cross-site scripting, o resultado é inofensivo. O HTML5 especifica que uma tag , inserida via innerHTML, não deve ser executada.

No entanto, há formas de se executar JavaScript sem usar elementos , por isso ainda há um risco de segurança sempre que você usa innerHTML para definir uma string sobre a qual você não tem controle. Por exemplo:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // exibe uma caixa de alerta

Por essa razão, recomenda-se que você não use o innerHTML quando estiver inserindo texto puro; como alternativa, utilize node.textContent. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.

Fonte:developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML

Você deve fazer log-in para responder a esta pergunta.