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

Question

我正在使用 Ajax json 从网络方法 (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 对象之前是否有必要解析或处理 data.d，因为所有现代浏览器都会这样做!!!

非常感谢所有建议!

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();