通过 Ajax 输入 "<script>alert("hi");</script>" 时使用 jQuery 防止布局中断

Question

我有一个带有加号图标的输入字段。单击加号图标时，输入的值将添加到输入字段上方。

实际上，我正在使用模板在输入字段上方添加内容。单击加号图标时，我将相应的模式替换为值，并使用 jQuery 替换功能将内容放在输入字段上方。

如果任何黑客输入像"<script>alert("hi");</script>" 这样的值，布局就会中断。

如何通过 jQuery 阻止这些类型的攻击？我知道可以进行服务器端验证。但是有什么方法可以通过 jQuery/客户端验证来阻止这些攻击？

Answer 1

这很简单。不要使用jQuery的.html()，使用.text()。

转义会自动发生，除了不使用错误的API函数外，没有什么特别需要做的。

<div id="textDisplay"></div>
<input type="text" id="enteredText"> <button id="transferText">Click!</button>

和

$(function() {
    $("#transferText").click(function () {
        var userInput = $("#enteredText").val();

        $("#textDisplay").text(userInput);
    });
});