javascript - 如何防止粘贴到输入的脚本注入(inject)

Question

最近遇到了XSS问题。我搜索并阅读了很多相关问题和文章。我注意到所有答案都集中在如何防止将不受信任的数据传递到服务器上。而在前端，转义特殊代码似乎是阻止脚本执行的唯一方法。

但是如果用户只是输入一段代码(比如 <script>alert("hi");</script> )到一个 input 中，这段代码什么时候执行呢？有什么办法可以预防吗？

我听过 keydown keyup事件，但这只能阻止正常输入，当用户直接复制和粘贴到输入时它没有任何作用，当用户输入一段脚本时它会显示我的警告信息，但脚本仍然执行!

$("input").on("keyup", function (e) {
    var value = $(this).val() || "";
    var regex = /<(\/?\w+[^\n>]*\/?)>/ig;
    if(regex.test(value)){
        layer.msg("Invalid characters!");
        $(this).val(value.replace(regex, "&lt;$1&gt;"));
        e.preventDefault();
        return false;
    }
});

我不明白为什么浏览器会执行输入值中的脚本，以及何时执行？是否有任何文章可以解释这种机制或相关？我有没有注意到什么？如果有任何您认为有帮助的文章，请告诉我。谢谢。

感谢所有的回答和评论。可能我没有描述清楚。当我复制 <script>alert("hi");</script> 时，我已经测试过 并将其粘贴到输入中，浏览器确实提示了一个警告窗口并显示了“hi”。

我也刚刚使用了 $("input").val('<script>alert("hi");</script>') ，它不会提示警报窗口，但如果我触发输入的 focus和 blur事件，它也会提示警报窗口。

那么，为什么要执行代码？

Answer 1

假设我的用户名是 <script>alert('You got pranked!')</script>并且您的应用没有针对 XSS 的保护。

注册时，应用会保存我的用户名，这没有什么问题。

但是，当我转到我的个人资料页面(或任何显示我名字的页面)时，服务器呈现的 HTML 将看起来像这样

<h1>Profile page</h1>
<p>User name: <script>alert('You got pranked!')</script></p>

客户端浏览器将看到 <script>标记并将执行里面的内容。

最简单的解决方案是转义任何 HTML 特殊字符。无论您拥有何种技术栈，都有很多工具可以为您做到这一点。

但是所有这些工具的工作方式是，当显示我的用户名时，它将显示为 <script>alert('You got pranked!')</script> ，从而防止浏览器看到 <script>显示我的用户名时标记。