Why innerHTML injects data into page if it doesn't use append on body?

Question

I encountered this seemingly safe function to extract text content from html

function getText(html) {
  const div = document.createElement('div')
  div.innerHTML = html
  return div.textContent
}

It uses innerHTML but the div is never appended to the DOM so I would guess that it isn't harmful

And it indeed works fine normally:

const text = getText('<b>some text</b>')
console.log(text) // prints "some text"

function getText(html) {
  const div = document.createElement('div')
  div.innerHTML = html
  return div.textContent
}

But it can also lead to xss:

// opens an alert
const text = getText('<b>some text</b><img src="" onerror="alert(1)">')
// prints "some text"
console.log(text)

function getText(html) {
  const div = document.createElement('div')
  div.innerHTML = html
  return div.textContent
}

Even weirder things start to happen when we prepend the html with "<script></script>"

// throws an error and injects html into the page
const text = getText('<script></script><b>some text</b>')
console.log(text)

function getText(html) {
  const div = document.createElement('div')
  div.innerHTML = html
  return div.textContent
}

Why does it load the html if it's not appended to the DOM?

Why <script></script> causes it to inject html to the page?

AKX · Accepted Answer · 2024-07-02 14:25:58Z

3

Why <script></script> causes it to inject html to the page?

Because the actual source of the snippet that gets run (via "Run Snippet" -> "Full Page" -> View Source) is

<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>

<script type="text/javascript">
        // throws an error and injects html into the page
const text = getText('<script></script><b>some text</b>')
console.log(text)

function getText(html) {
  const div = document.createElement('div')
  div.innerHTML = html
  return div.textContent
}
    </script>
</body>
</html>

and that </script> before <b>some text closes the <script type="text/javascript"> tag, and the rest is interpreted as HTML.

This would not happen if the script was in an external file.

answered Jul 2, 2024 at 14:25

AKX

171k16 gold badges147 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ipodtouch0218 Over a year ago

If you can't use an external file, you can also escape the closing script tag. Note that this wouldn't happen with non-constant strings (since those aren't in the page source = not parsed as html), so no need to escape those with a replace.

Bergi Over a year ago

Should this be considered a StackSnippets bug?

fdomn-m Over a year ago

@Bergi This isn't exclusive to StackSnippets. Ye-olde workaround (not had to use it for xx years..) is to break the script tags so they are not interpreted, eg '<script></sc' + 'ript>'

Bergi Over a year ago

@fdomn-m Sure, that's what I'd do if I were to write HTML. But the StackSnippets editor has a separate pane for JavaScript, and I would expect that code to be properly loaded into the snippet page - escaped if necessary.

Collectives™ on Stack Overflow

Why innerHTML injects data into page if it doesn't use append on body?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related