在创建HTML元素时清理用户输入

Question

我试图在纯HTML5和Javascript中创建一个待办事项应用程序,我遇到了清理输入的问题.

例如:如果用户输入<script>alert("XSS")</script>,则在页面上执行代码.

添加元素的代码是:

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

而显示元素的代码是:

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>");
}

有没有办法只使用HTML5和Javascript属性来清理数据？

Answer 1

与任何和所有XSS预防一样:不要从字符串构建HTML,尤其是当这些字符串包含用户提供的值时.

jQuery有一个方便的工具来安全地构建元素 - 你可以传入一个具有属性的对象:

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

实际上,我建议您绝对不要使用字符串连接来构建HTML.对于比上述情况更复杂的情况,请使用经过良好测试的HTML模板库,如Mustache或Handlebars.