Javascript: Avoid using innerHTML for unsafe arguments

Updated . Posted . Visible to the public.

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 .

Fun fact

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

Last edit
Emanuel
License
Source code in this card is licensed under the MIT License.
Posted by Emanuel to makandra dev (2023-12-04 12:13)