创建 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 有 a convenient facility to build elements safely - 您可以传入一个具有以下属性的对象：

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

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

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

Sanitizing user input when creating HTML elements

javascript

jquery

html

xss