如何防止粘贴到输入的脚本注入

Question

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

但是如果用户只是在输入中输入一段代码（例如<script>alert("hi");</script>），那么这段代码什么时候执行呢？有没有办法阻止它？

我听过这个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>其复制并粘贴到输入中时，浏览器确实提示了一个警告窗口并显示了“嗨”。

我也刚刚使用$("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>在显示我的用户名时看到标签。