从长串html代码构造DOM对象的最佳实践

Question

我使用Ajax从webmethod (asp.net)返回一串html代码。字符串(data.d)可以相当长，包含数千个html代码。

success: function (data) {
if (data.d != "") { 
// create result.aspx page from data.d that contains html codes (thousands of characters)
}

我的result.aspx页面运行良好。我指望浏览器来解析html输出。但是，我了解到这是弱编程，在构造DOM对象之前我应该解析data.d。

这样做的最佳做法是什么？在构建DOM obect之前，是否有必要解析或处理数据?因为所有现代浏览器都会这样做！

所有的建议都是非常感谢的！

Answer 1

通常，您应该将数据视为不安全的，并避免在浏览器中执行数据。

例如，可以只发送数据并在浏览器中构建元素。通过将数据作为文本放入元素中，可以避免执行数据。您将元素中的任何内容作为文本处理，而不是执行。示例：

success: function (data) {
  if (data.d != "") {
    $('.result').append($('<div>', { text: data.d }));
  }
}

如果从服务器发送HTML代码并在页面中插入代码，则代码将被执行。您可以这样做，但这意味着您将代码安全的责任转移到服务器上。服务器返回的内容必须安全执行，因此它用于生成代码的任何数据都必须根据数据的来源进行验证或编码。

例如，如果您从不同用户获取评论列表，则存在明显的跨脚本攻击风险。当您将代码放在一起时，应该对来自用户的每个值进行HTML编码，以防止将其作为脚本执行。示例：

StringBuilder builder = new StringBuilder();
foreach (Comment comment in comments) {
  builder
   .Append("<div class=\"comment\"><div class=\"name\">")
   .Append(Server.HtmlEncode(comment.UserName))
   .Append("</div><div class=\"text\">")
   .Append(Server.HtmlEncode(comment.Text))
   .Append("</div></div>");
}
string response = builder.ToString();