Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

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

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?


  • 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

4 Answers

Robert Manolis
Robert Manolis
Treehouse Guest Teacher

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. :smiley:

Thanks, Robert Manolis for breaking down what the issue could be and why I maybe don't need to be quite so concerned. I understood that inserting a script tag could open you up to someone else's code, I just couldn't see how someone could be so smart to cause damage on a simple site. Which now I know isn't really an issue.

For the deep dive, I'll look into the links Peter Vann provided.

Hi again, Joseph!

Silly me. I just looked it up. Treehouse does cover this topic in a course:


I have not taken this course, but I sure will now!

Again, thanks for the heads-up!


In fact, they have several security courses that are probably worth looking into:


In fact, two other courses:



Are considered prerequisites to this course:


So it's probably best to start with them. I will.

I hope that helps.

Stay safe and happy coding!

Exceptionally comprehensive listings. I appreciate it. I'll start with some of these ones. Thanks for your research!

I've added these to my bookmarks. I've done some work with Express and MongoDB, I see this comes later on the Full Stack Track. They'll tie in nicely.