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 aNode
(arguments are HTML-safe escaped) -
innerHTML
: Sets the HTML of anElement
(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.
Posted by Emanuel to makandra dev (2023-12-04 12:13)