JavaScript Creating HTML elements using JavaScript and using innerHTML (Security)

[Malcolm]

Hi everyone,

I'm trying to create a new HTML in JavaScript using createElement function and I want to add content within that element. The easiest way to do this, is using createdElement.innerHTML = "content";. However, I've been seeing a couple resources where using innerHTMl is a potential security risk. What I don't know is in what context is it a security risk. Is it just a security risk in general or is it security risk when it is used in particular way?

For example, would this be considered 'safe'?

var result = document.getElementById("result");
var createPTag = document.createElement("p");
createPTag.innerHTML = "Testing";
result.appendChild(createPTag);

 

[Johna]

Hey there.

The code you have is completely safe. It's when you're using innerHTML to insert text that you have no control over (e.g. user-input text) that it becomes a risk. In this case, and perhaps most cases, it would be better to use the textContent property.

I remember a while back there was this chat room I and a few others were on, and it used innerHTML when adding new messages, so a few of the users exploited it by sending messages such as <img src="a" onerror="alert('some message or other script')">. In this case it was a security risk because the content inserted into the page with innerHTML was supplied by users.