Question

我使用Ajax json从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对象之前有必要解析或处理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();

Answer 2

我应该在构造DOM对象之前解析data.d。

绝对。

因为字符串可以编码¹所以在创建dom节点之前你应该总是解码它然后你可以构建它。

下面是一个样本。

var encodedStr = encodeURIComponent("<h1>What</h1>");
var decodedStr = decodeURIComponent(encodedStr);

var encoded = {"d":encodedStr};
var decoded = {"d":decodedStr};

var body1 = document.querySelector('#body1');
var body2 = document.querySelector('#body2');

body1.innerHTML = encoded.d;
body2.innerHTML = decoded.d;

<p>Encoded one:</p>
<div id='body1'></div>
<br/><br/>
<p>Decoded one:</p>
<div id='body2'></div>

_{1：最好保存已编码的html字符串以防止SQL注入。}

从一长串html代码

2 个答案: