innerHTML risks

Learn how innerHTML creates an XSS risk and safer alternatives.

The risk of innerHTML

innerHTML interprets the string you assign as HTML. If that string comes from the user, the tags and scripts inside it run. This is the most common XSS door.

For example, when you write el.innerHTML = userInput, any <script> tag inside userInput is processed as code by the browser. Stay away from innerHTML unless the data is trusted.

textContent is safe

textContent writes the value you assign as plain text, not as HTML. Tags and entities are not interpreted; the browser displays them as-is.

So el.textContent = userInput never treats the input as a tag, whatever it contains. When you write user-supplied text to an element, textContent should always be the first choice.

Exercise Create a badge

Write a function createBadge, parameter label. Create a badge element with document.createElement('span'). Assign label to badge.textContent and return badge.

Show example solution

First define the function, then create the span element, assign label to textContent, finally return badge.
Example solution:
function createBadge(label) {
  const badge = document.createElement('span');
  badge.textContent = label;
  return badge;
}

Test yourself

Which is a safe DOM update method?
- element.textContent = userInput
- element.innerHTML = userInput
- element.outerHTML = userInput
- document.write(userInput)
Show answer

element.textContent = userInput — Correct! textContent writes the value as plain text and prevents XSS.

Safe assignment with textContent

const el = document.getElementById('msg');
el.____ = 'Welcome';

Show answer

const el = document.getElementById('msg');
el.textContent = 'Welcome';

Match the DOM properties

textContent

writes as text
innerHTML

interprets as HTML
outerHTML

replaces the tag
innerText

gives visible text

Next lesson: CSP basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies