Why does the innerHTML property not run Javascript codes?

Asked

Viewed 86 times

0

This property is used to add some content inside some element in the document, for example.

<!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>

Or else some HTML element like, lists.

<!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>

But when trying to insert the element script with some code, it just doesn’t work! case the closing tag includes a bar will return error.

<!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>

Why is the script not running? would be for security reasons?

javascript

  • You have to use an escape sequence in the tag and the property to set to replace the element is outerHTML. Would look like this: p.outerHTML = "<script>alert('Essa é uma caixa!')<\/script>"; replace in the document but the script would not be executed. To run the script has to be added either by DOM or with document.write however document.write implies the document reload. This is because the browser imposes a layer of isolation between visual components and code, nothing to do with safety.

2 answers

1

If you create a tag script in body for example, and make in it the alert innerHTML, and make appende there yes will work

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

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

document.body.appendChild(alerta);

0

It is not uncommon to see the innerHTML property used to insert text into a web page. This comes with a security risk.

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

Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a tag, inserted via innerHTML, should not be executed.

However, there are ways to run Javascript without using elements, so there is still a security risk whenever you use innerHTML to define a string over which you have no control. For example:

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

For this reason, it is recommended that you do not use innerHTML when inserting plain text; alternatively, use Node.textContent. This does not interpret the content passed as HTML, but instead inserts it as plain text.

Source:Developer.mozilla.org/en/Docs/Web/API/Element/innerHTML

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.