If using innerHTML poses a security threat when should we use it?

Question

In lots of courses, instructors will use innerHTML over textContent as it's more powerful. However, reading the MDN description from the teacher's notes highlights that it allows people to insert potentially malicious code.

My question is if Mozilla says that your code is unlikely to pass a review if you use innerHTML, should I stop using it?

Thoughts:

Is it a scenario where for demonstration purposes it is easier but in reality, you would create DOM nodes with createElement and append them?
Unless the data is sensitive there is no real consequence

Answer 1 · 2021-02-10T22:00:28Z

February 10, 2021 10:00pm

Hey Joseph Lander, what makes innerHTML dangerous is the possibility of someone highjacking the instance of that method and using it to insert something malicious into the DOM. Say for example you had a simple text input that let the user enter anything they wanted. And then when they submitted the text, you used innerHTML to add to the DOM what the user had entered. Well what if they entered some script tags with some JS that was up to no good? That could potentially be problematic if you were working on say a real world chat app where one user could enter text that could render on another user's machine to grab cookies and make network requests. That's called cross-site-scripting, (XSS).

But using innerHTML or insertAdjacentHTML to add something to the DOM that no user could possibly highjack should be an acceptable practice. And I've read that if you're using a front end framework like React, there will be built in protections against XSS attacks.

Although, just to be safe, if there's any doubt, you can always create elements and text nodes to safely append to the DOM.