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

Question

我是javascript / jquery的初学者，正在构建要学习的第一个小脚本（只是客户端javascript）。 我已经写了它，并开始运行它感到很兴奋，但是现在我在有关“ XSS”漏洞的文章以及有关从不使用jquery .html（）、. append（）或任何写入DOM的任何javascript的东西上绊脚石涉及“用户输入”。 这是一种不好的做法，您可能会被黑客入侵，等等。但是，关于这的真正含义，我对这些文章/解释都不清楚。

似乎将“用户输入”传递给函数，然后根据用户输入显示输出是javascript的一种明显用法，特别是对于Web应用程序和浏览器。 还是我完全错过了什么？

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

1）用户在文本框中输入文本（希望是数字-美元），然后单击“提交”按钮

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

3）然后我在“ if”语句条件（a <=条件）中使用变量

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

我认为这有点安全误解。 您发布的代码是完全安全的。 假设字段输入[name = dollarAmount]未被URL或数据库填写。

我认为您所指的形式的跨站点脚本涉及一个恶意用户，该用户基本上创建了一个链接，他们以某种方式在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，基本上对其进行了评估。 因此，现在有人可以在哈希之外添加恶意代码。 可能会窃取会话的脚本功能。 然后，他们可以向我发送链接，单击链接，然后不知道他们编写的脚本是在我的Web浏览器中执行的。

在您的示例中，无法将恶意代码发送给任何人。 当然，有人可以给我发送一封电子邮件，其中包含指向您网站的链接，然后给我指示，以将其代码复制并粘贴到表单的输入中。 但是，这应该会触发警钟，如果用户可能会因此而跌倒，他们很可能只要求输入密码。

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

简而言之，如果信息从未存储（存储在数据库等中），并且仅通过单击链接或类似内容就无法重新创建，则不必担心Javascript是跨站点脚本的根源问题。 他们编写的任何恶意代码都只能在其计算机上使用。