0

I read that 'It is not recommended you use insertAdjacentHTML() when inserting plain text' here .
I do see those tags which differentiate a plain text from tags+text+tags combination.

Is it safe to use insertAdjacentHTML() method to add a sibling with text to an element. This is what I am trying to do:

<div id="one"></div>
#adding a sibling to above div with text

<div id="one"></div>
<div id="two">text here</div>

Any advice would be helpful.

lmao
  • 452
  • 1
  • 5
  • 13
  • Possible duplicate of [What is cross site scripting](https://stackoverflow.com/questions/15755323/what-is-cross-site-scripting) – Vinz243 Mar 11 '19 at 13:09
  • 2
    "However, I am not able to decide that if it is safe to add a sibling with text to an element using this insertAdjacentHTML()" can you rephrase this? It's hard to understand what you mean. – el toro Mar 11 '19 at 13:10
  • The question is , do you want to insert HTML or just text ? If you want to insert HTML then you can use insertAdjacentHTML(). I guess it's not safe when you get some value from an input/textarea and insert it in the HTML without parsing it. So you can use it if you know what you are putting inside the html. Also if you want to just append/prepend a child you can also use other js methods like appendChild() method. If plain text you are after, then use insertAdjacentText() – Mihai T Mar 11 '19 at 13:13
  • @torogadude : I have edited the question. – lmao Mar 11 '19 at 13:21
  • @MihaiT: Thanks for replying,Sir. I will be getting the `text` from server. And, I'll be using an array to add multiple siblings with text to a div. That security-consideration, on the link I mentioned, made me ask this question. That `text` I am talking about is not from the users, hence should be safe enough, but I am not sure. – lmao Mar 11 '19 at 13:22
  • Ok. Your parent divs are empty ? if not, where do you want to add the children ? at the start, at the end of the parent div ? or in some specific places inside the parent div ? – Mihai T Mar 11 '19 at 13:29
  • Yes, parent divs are empty. I want to add the sibling 'at the end' of the div. Like this - `
    text
    `.     – lmao Mar 11 '19 at 13:33

2 Answers2

2

Well really the answer to your question is in the link you provided. Is it derived from user input? Then it's unsafe without proper anti-XSS procedures. Is it something you typed from the server and will only ever be something that you intend it to be? Then feel free to use insertAdjacentHTML(). See Vinz243's link about XSS.

el toro
  • 532
  • 4
  • 11
  • Thanks for the answer, Sir. No, not from user. Indeed, they are from server only. As I already mentioned in my comment that I do know that they are safe if coming from server, but I was not sure. And, I have seen answers, accepted ones, suggesting methods that induce that xss vulnerability. Just one question, very politely - Should I be fully sure that it is safe if text is always from the server and never from the user? – lmao Mar 11 '19 at 13:42
  • 1
    Yes, it can never be XSS'd if it doesn't involve user input. The definition of XSS is injecting a script into a website via user input. However it might be better to use a solution like Mihai used for better DOM control anyway. – el toro Mar 11 '19 at 14:09
  • Thanks, I wanted to be sure about xss from someone experienced. – lmao Mar 11 '19 at 14:51
1

So, from what i understand you are just adding some text that is coming from the server to an array of children. And the children should be at the end of the parent element( after the existing children ) . You can use appendChild for that.

This way you control the HTML you are adding ( with document.createElement("div"); , and just insert plain text into it. The safety problem would be with HTML ( adding tags and etc ) but now, you know exactly what HTML you are adding. So this method ( imo ) is safe.

Because now even if you get a string of < script > do some hacking </script > it will be added just as plain text when using the below method ( textContent just adds text, not HTML ) . So you won't have safety issues. But if you would insert < script > do some hacking < /script> with a HTML method like insertAdjacentHTML() then yes, that would be a problem :).

OFC its is better to add a parsing method that checks for script tags for example and other safety validations on the data you get from the server. ( This would be even better to do it on server side )

EDIT: if you want to add elements as siblings, use ( as you and torogadude correctly said ) insertBefore() . or insertAfter() depending on what you want to do.

So you just do it like this.

const mockArrayText = ['abc1','abc2','abc3'];
const existingElement = document.getElementById('add-here')

for (let i=0;i< mockArrayText.length; i++ ) {
  const newElement = document.createElement("div");
  newElement.textContent = mockArrayText[i]
  existingElement.parentNode.insertBefore(newElement,existingElement.nextSibling)
}
<div id="add-here">
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • 1
    Nice answer and explanation, Sir. However, this would add a child and not a sibling. I made late edits to the question, I accept my fault. Please, see edits, last code block, and suggest a secure alternative to appendChild. Is `.parentNode.insertBefore(newElement, existingElement.nextSibling)` ok ? – lmao Mar 11 '19 at 14:26
  • 1
    @lmao in case he doesn't see, `parentNode.insertBefore(newElement,existingElement.nextSibling)` is a solution I've used before and works. – el toro Mar 11 '19 at 14:35
  • @lmao , yes. I added an edit. Also, the user that downVoted my answer, can you please give an explanation for that ? – Mihai T Mar 11 '19 at 14:44
  • Thanks a lot, both of you. Upvoted the answer. (I am not the downvoter) – lmao Mar 11 '19 at 14:48
  • @MihaiT I had downvoted because I thought you hadn't read the question by giving an answer with a child element instead of an element after the given one. But since it was made before the edit, and OP accepted it as an answer, I've removed it. :) – el toro Mar 11 '19 at 14:50