javascript - 如何将用户输入从文本框安全地传递到函数中，然后输出到 DOM？

Question

我是一个 javascript/jquery 初学者，正在构建我的第一个小脚本来学习(只是客户端 javascript)。我已经写好了它，并且很高兴它开始工作，但现在我偶然发现了有关“XSS”漏洞的文章，以及关于永远不要使用 jquery .html()、.append() 或任何写入 DOM 的 javascript 的内容涉及“用户输入”。这是一种不好的做法，您可能会被黑客攻击，等等。但是，对于我来说，没有一篇文章/解释清楚这真正意味着什么。

似乎采用“用户输入”并将其传递给函数，然后根据用户输入显示输出是 javascript 的明显用途，尤其是对于网络应用程序和浏览器。或者我完全错过了什么？

以下是我所做工作的基本想法。我不是直接将用户输入附加到 DOM，而是在稍后附加到 DOM 的函数中使用用户输入:

1) 用户在文本框中输入文本(希望是数字 - 美元金额)并单击“提交”按钮

2) 然后我设置一个等于用户在文本框中输入的内容的变量，并将其设为 jquery 对象

3) 然后我在“if”语句条件中使用该变量(<=条件)

4) 然后，如果条件为 true，则循环遍历数组并使用 .append() 输出包含 HTML 和文本的字符串

$("#button").click(function(){
    $("#output").empty();
        var spendAmount = $("input[name=dollarAmount]").val();
        var totalAmount = 0;
        for (var i=0; i<GameArrayLength; i++) {
                if (totalAmount + GameArray[i].price <= spendAmount) {
                    $("#output").append("<p>"+ "<span>"+GameArray[i].name + "</span> ---------   $" + GameArray[i].price + "</p>");
                    totalAmount += GameArray[i].price;
                    };
                };
            });

我真的很感谢任何解释，因为我无法弄清楚这些安全文章的含义，并且想确保我正在正确学习。

编辑*:这里是其中一篇文章的链接 http://www.mediawiki.org/wiki/DOM-based_XSS即使你只使用 JS(没有数据库的服务器端)，它也会提到漏洞

以及这篇文章:https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet

Answer 1

我认为这是一种安全误解。您发布的代码是完全安全的。假设字段 input[name=dollarAmount] 未以某种方式由 url 或数据库填写。

我认为您所指的形式的跨站点脚本涉及恶意用户基本上创建一个链接，他们以某种方式在网址/页面中包含了 Javascript。这样恶意代码就可以窃取 cookie、用户输入等。但它必须是可转移的。如果用户无法以某种方式创建可以永久存储/定位或代表恶意代码的链接，那么它是完全无害的。从技术上讲，我可以在任何网站上执行Javascript，但这只会影响我。如果我想影响其他人，我就必须以某种方式向他们发送包含恶意代码的链接或消息。

对于 Javascript，我见过的第一个安全缺陷是哈希值。它们是网址后面的数字符号。例如，www.example.com/picnics #heading_2

假设有人在页面上有这样的 Javascript 函数。取自http://ma.la/jquery_xss .

<script>
    $(function(){
        try { $(location.hash) } catch(e) {}
    })
</script>

这是不安全的 Javascript。如您所见，它采用 url 哈希 (location.hash)，并且借助 Jquery，基本上对其进行评估。所以现在有人可以在哈希值之外添加恶意代码。可能会窃取 session 的脚本函数。然后他们可以向我发送链接，我点击该链接，然后在不知不觉中，他们编写的脚本在我的网络浏览器中执行。

在您的示例中，恶意代码无法发送给任何人。当然，有人可以向我发送一封包含您网站链接的电子邮件，然后指示我将其代码复制并粘贴到表单的输入中。但这应该会引发警告，如果用户可能上当，他们可能会直接询问密码。

当您开始存储用户输入(在 URL、数据库等中)时，就会出现安全问题。如果您打算将用户输入存储在数据库中，您永远不应该相信 Javascript 能够正确删除恶意代码。回避是微不足道的。如果您想在 url 中存储信息，我建议使用白名单方法并远离某些 Jquery 函数。例如，我将有一个 switch 语句来比较我期望的字符串(例如 location.hash == 'heading1')，如果匹配，则运行一个函数(可能滚动到页面的一部分)。如果不匹配，则不执行任何操作。这样就只会使用我期望的文本。

所以简而言之，如果信息从未被存储(在数据库等中)并且不可能通过单击链接或类似的东西来重新创建，那么您不必担心 Javascript 是交叉的根源- 站点脚本问题。他们编写的任何恶意代码都只在他们的机器上。