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

时间:2014-02-13 02:21:36

标签: javascript jquery

我是一个javascript / jquery初学者,正在构建我的第一个小脚本来学习(只是客户端javascript)。我已经写了它并且很兴奋它开始工作,但现在我磕磕绊绊地写了关于“XSS”漏洞的文章,以及关于从不使用jquery .html(),. append()或任何javascript写入DOM的文章涉及“用户输入”。这是一个不好的做法,你可能会被黑客攻击等等。但是,就这真正意味着什么而言,没有一篇文章/解释清楚。

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

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

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

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

3)然后我在“if”语句条件(a< = condition)

中使用该变量

4)然后,如果条件为真,则循环遍历数组并使用.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

1 个答案:

答案 0 :(得分: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 hash(location.hash),并且由于Jquery,它基本上会对它进行求值。所以现在有人可以在哈希之外添加恶意代码。可能会窃取会话的脚本功能。然后他们可以发送链接,我点击链接,不知道,他们编写的脚本是在我的网络浏览器中执行的。

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

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

简而言之,如果信息永远不会存储(在数据库中等)并且无法通过单击链接或类似的东西来重新创建,则不必担心Javascript是交叉的根源现场脚本问题。他们编写的任何恶意代码都只在他们的机器和机器上。