Simplest way to escape all special chars of user input text

Question

I am adding a option to a select that is input by a user:

function prependToSelect(userInput){
  $('#x').prepend('<option>' + userInput + '</option>');
}

what is the safest and most simple way to make sure there is nothing dangerous in userInput that can break the javascript or html? It would also be good if the solution/function would be reusable in different scenarios.

Endless · Accepted Answer · 2018-01-15T08:53:42.450

3

My inital answer would be to create a options element and set the innerText instead of innerHTML

but since u use jQuery...

$('#x').prepend($('<option>', {text: userInput}))

edited Jan 15 '18 at 08:53

answered Jan 04 '18 at 20:32

Endless

34,080
13
108
131

What about if i also need to add value to added option? – user1985273 Jan 14 '18 at 21:30
`$(' – Endless Jan 15 '18 at 08:51

score 2 · Answer 2 · answered Jan 04 '18 at 20:32

Don't add it as HTML.

document.querySelector("#x")
        .appendChild(document.createElement("option"))
        .textContent = userInput;

This adds it as .textContent so no HTML will be parsed, so no danger.

Simplest way to escape all special chars of user input text

2 Answers2