Javascript: Avoid using innerHTML for unsafe arguments

Make sure that you use the correct property when editing an HTML attribute. Using innerHTML with unsafe arguments makes your application vulnerable to XSS.

• textContent: Sets the content of a Node (arguments are HTML-safe escaped)
• innerHTML: Sets the HTML of an Element (arguments are not escaped and may not contain user content)

Hierarchy

This hierarchy gives you a better understanding, where the textContent and the innerHTML properties are defined. It also includes (just for completeness) the innerText property, which is similar to textContent, but has subtile differences Show archive.org snapshot .

• a HTML Element (like an anchor element or an button) inherits from the Node class ( EventTarget < Node < Element < HTMLElement Show archive.org snapshot )
• the Node Show archive.org snapshot class defines textContent
• the Element Show archive.org snapshot class defines innerHTML
• the HTMLElement Show archive.org snapshot class defines innerText

Fun fact

The HTMLAnchorElement Show archive.org snapshot class defines text, which is a synonym for the Node.textContent Show archive.org snapshot property.