Sanitizing user input when creating HTML elements

Question

I am trying to make a to-do application in pure HTML5 and Javascript and I have come across the problem of sanitizing the input.

For eg: If user enters <script>alert("XSS")</script>, the code is executed on the page.

Code for adding an element is:

if ($('#TextArea').val() !== "") {
  var taskID = new Date().getTime();
  var taskMessage = $('#textArea').val();
  localStorage.setItem(taskID, taskMessage);
}

while the code for displaying the elements is:

var i = 0;
for (i = localStorage.length; i != 0; i--) {
  var taskID = localStorage.key(i - 1);
  $('#task').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}

Is there any way to sanitize the data using only HTML5 and Javascript properties?

check stackoverflow.com/questions/1637275/…

Maytham Fahmi
– Maytham Fahmi

2015-08-02 08:37:00 +00:00
Commented Aug 2, 2015 at 8:37 — Maytham Fahmi
– Maytham Fahmi, Commented Aug 2, 2015 at 8:37

Tomalak · Accepted Answer · 2015-08-02 08:38:07Z

7

As with any and all XSS prevention: Don't build HTML from strings, especially not when those strings contain user-supplied values.

jQuery has a convenient facility to build elements safely - you can pass in an object with properties:

$("<li>", {
  id: taskID,
  text: localStorage.getItem(taskID)
}).appendTo('#task');

In fact, I recommend that you absolutely never use string concatenation to build HTML. For more complex situations than the above, use a well-tested HTML templating library like Mustache or Handlebars.

answered Aug 2, 2015 at 8:38

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dvorak Over a year ago

Sir, if I have to insert an anchor tag, such that <a href="something"><li>something</li></a> , then how should I go on with that?

Tomalak Over a year ago

You can't nest an <li> inside an <a>, so let's do it the other way around: $("<li>").append( $("<a>", {href: "something", text: "something"}) );. This gets tedious very fast, that's why I recommended a templating engine. Compare a few and pick up one you like.

Dvorak Over a year ago

But sir, if I have to use the above code: $("<li>", {id: taskID,text:localStorage.getItem(taskID)}).appendTo('#task'); with $("<li>").append( $("<a>", {href: "something", text: "something"}) );, how can we do so?

Tomalak Over a year ago

$("<li>").append( $("<a>", {href: "something", text: "something"}) ).appendTo("#task");, if I understand you right. Itr seems like you are missing essential jQuery basics, please take some time to learn how jQuery works. It's not a good idea to use a library that you don't really understand.

Dvorak Over a year ago

No sir, I understood that part. Actually, if you will see this: jsfiddle.net/bwk54ma2/1 . What I am unable to do is that, I also want <li> to have id=taskID (such that <li id=taskID><a href=taskID>Something</a></li>), and I can't nest that property.

Collectives™ on Stack Overflow

Sanitizing user input when creating HTML elements

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related