在未执行的 INPUT 元素中设置特殊字符 javascript

Question

我有一个问题，我想允许在输入中使用特殊字符（以编码方式）但防止 XSS。当我直接设置 html 属性（例如，使用 jquery 执行 .html("my value") 时，我似乎没有这个问题，但问题发生了当我使用元素而不关闭像 INPUT 这样的标签时。

这是我的场景：

使用 ajax 的动态客户端 Web 服务请求，因此我无法使用某种内联代码来构建页面。这发生在基本页面加载之后：

    var data = {
        "key": "value"
    }
    $.ajax({
        type: "POST",
        url: "WebService.asmx/GetData",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        dataType: "json",
        success: function callFunction(result) {
            if (result.d != null) {
                // Building an HTML block
                var preBuiltHtml = "<table style=\"width:100%;\">" +
                    "<tr>" +
                        "<td>Entry 1:</td>" +
                        "<td><input type=\"text\" id=\"txtEntry1\" maxlength=\"100\" value=\"" + result.d.return_value + "\" style=\"width:100%;\" ></td>" +
                    "</tr>" +
                "</table>";
                $('#someDialog').html(preBuiltHtml);
            }
            else {
                showMessageDialog("Permission denied", 1);
            }
        },
        error: function () { showMessageDialog('Error!', 2); }
    });

服务器端（ASP.NET）使用字符编码来防止 XSS：

[WebMethod(true)]
public SomeClass GetProjectDetails(string proj_nr)
{
    SomeClass result = new SomeClass();
    result.return_value = Encoder.HtmlEncode("<IMG SRC=\"javascript: alert('XSS');\">");
    return result;
}

在客户端，这将正确填写输入元素，但会执行 javascript。如果我使用 jquery .val() 方法设置值，它会完全弄乱元素的 html。如果我使用 .html() 将相同的值设置为 div，一切都很好，但我不能对输入元素这样做。

设置这种值而不在客户端执行的正确方法是什么？

非常感谢

编辑：还有一件事，警告框没有像您预期的那样执行，所以没有消息框出现。但是在Chrome的dev模式下查看网络选项卡，可以看到一个条目：

编辑 2：从 Web 服务检索的字符串

Answer 1

渲染用户输入时，您应该设置值而不是内联 HTML，例如：

var preBuiltHtml = "<table style=\"width:100%;\">" +
  "<tr>" +
    "<td>Entry 1:</td>" +
    "<td><input type=\"text\" id=\"txtEntry1\" maxlength=\"100\" style=\"width:100%;\" ></td>" +
  "</tr>" +
"</table>";

var input = $('#someDialog').html(preBuiltHtml).find('#txtEntry1');
input.val(result.d.return_value);

你说的"it completely messes up the html for the element"能具体点吗？

如果我直接尝试，它会按预期工作...

var unescaped = '<IMG SRC="javascript: alert(\'XSS\');">';
var escaped = '&lt;IMG&#32;SRC=&quot;javascript: alert(&#39;XSS&#39;);&quot;&gt;'

// Escaped content is still escaped
var input1 = document.querySelector('#test1');
input1.value = escaped;
 
// Unescaped content is preserved
var input2 = document.querySelector('#test2');
input2.value = unescaped;

// HTML should use the escaped version
var div3 = document.querySelector('#test3');
div3.innerHTML = '<input type="text" value="' + escaped + '">'

<input id=test1>

<input id=test2>

<div id=test3></div>

网络选项卡中的错误是因为您使用了 <IMG SRC，它不会内联执行 javascript 但会尝试检索它（就像您已经完成 <IMG SRC="javascript.png"> 一样） .

在未执行的 INPUT 元素中设置特殊字符 javascript

Setting special characters in INPUT element that are not executing javascript

javascript

asp.net

xss