为什么在使用jquery读写表单输入时必须对字符串进行编码?

问题描述:

我编程方式使用标准的jQuery这样从文本输入读取数据:为什么在使用jquery读写表单输入时必须对字符串进行编码?

var listName = $('#list').val(); 

,然后我增加了隐藏的输入字段到表单提交这样之前:

var myForm = $("#myForm); 
myForm.append('<input type="hidden" name="List" value="' + listName + '" />'); 

在一个例如,在字段中的值是:

Key Date & Times 

等用户界面,它看起来像这样

<input type="hidden" name="MyList" value="Key Date & Times" /> 

当我提交使用形式:

var myForm = $("#myForm); 
myForm.submit(); 

,并检查它在asp.net MVC的服务器端我只看到:

Key Date 

发送过来。经过一番研究,有人建议写一些JavaScript运行通过价值:

encodeURIComponent() 

这样做,并考虑看看服务器端后,我现在看到:

Key%20Date%20%26%20Times 

我怎么能将其转换回

Key Date & Times 

关于C#asp.net-mvc服务器端?或者,如果我在客户端做错了,请告诉我,如果您有任何建议。

我的主要问题是为什么我不得不担心编码窗体中隐藏的输入框的值。我原以为这会照顾你。

+0

这很有可能是你在客户端做错了什么......但是你没有显示任何代码。 –

+0

我不确定显示哪些其他代码。我有一个隐藏输入的表单,我可以通过jQuery调用Form.Submit。你认为其他的代码在这里会有帮助吗? – leora

+1

如果你正在做一个正常的http post form提交,我不认为你需要做任何具体的解决这个问题。它应该工作!你是否劫持表单提交事件并发出ajax GET请求? – Shyju

string decodeString = HttpUtility.UrlDecode(@"Key%20Date%20%26%20Times"); 

使用UrlDecode方法HttpUtility类。

+1

**注意:**'使用System.Web'是必需的。 – Matt

您也可以使用。有错字在var myForm = $("#myForm");

string decodeString = Server.UrlDecode("Key%20Date%20%26%20Times"); 

OR

string decodeString = Uri.UnescapeDataString("Key%20Date%20%26%20Times"); 

很多这与实现安全免遭跨站脚本攻击(XSS)做。您需要编码将在发布请求中使用的所有html输入字段。否则,有人可以将domaliciousStuff()添加到文本字段,并将其存储在数据库中。然后,当数据再次显示在表单上时,脚本(现在保存在数据库中,将在网页上运行!)。

AntiXSS是一个伟大的库,拥有比内置的Html.Encode更多的功能。你可以通过Nuget Package Manager找到它。

https://www.nuget.org/packages/AntiXSS/

当您使用GET方法来提交表单发生这种情况(在GET方法“&”充当可变隔离器)必须使用POST方法或字符串操作。

如果你正在使用encodeURIComponent()你可以将其转换回服务器端使用Server.UrlDecode("");

你也可以读这个额外的知识Click here

不对劲于客户端。我测试了以下代码,就像你写的一样,并且工作正常

<input type="hidden" id="ref" value="Key Date & Times" /> 
<form id="form1" action="~/home/handle" method="post"> 
    <input type="submit" /> 
</form> 

<script> 
    var myForm = $('#form1'); 
    var listName = $('#ref').val(); 
    myForm.append('<input type="hidden" name="name" value="' + listName + '" />'); 
</script> 

您无需使用转换工具!

+0

@leora我完全改变了我的答案。 –

你的主要问题的形式编码一个隐藏的输入框的值都可以回答这样,这是不属于隐输入其涉及任何数据被发送到服务器

如果数据中包含空格和特殊字符(例如(&)),则应用程序开发人员有责任对其进行编码,以便数据安全地由服务器处理。拥有空格和特殊字符会导致XSS等安全问题。这只是负责任的开发人员为缓解此类安全威胁而采取的众多步骤之一。

关于如何找回值在服务器端使用的System.Web命名

string values = "Key%20Date%20%26%20Times"; 
string decodeString = HttpUtility.UrlDecode(values); 

希望找到下面的类就回答你的问题(S)

您可以简单地添加接受-charset =“ISO-8859-1”在form标签中,不用担心编码它会自动转换特殊字符。

<!DOCTYPE html> 
<html> 
<body> 

<form action="demo_form.asp" accept-charset="ISO-8859-1"> 
    First name: <input type="text" name="fname"><br> 
    Last name: <input type="text" name="lname"><br> 
    <input type="submit" value="Submit"> 
</form> 

</body> 
</html> 

您可以测试它here

+0

我看不出有什么区别 - 无论有没有“accept-charset =”ISO-8859-1“'属性,代码片段都显示相同的结果。例如。在这两种情况下,字符'%&'都给出结果'fname =%25%26%27&lname ='。 – Matt

您可以用空格代替所有的%20。

string values = "Key%20Date%20%26%20Times"; string decodeString = values.replace(/%20/g,' ');

,你必须把它在服务器端进行解码......你可以把文本 “关键日期&时报”在框中here,你可以看到的结果来自服务器包含26%代替& ......

你说你的主要问题是:

为什么我担心编码隐藏的输入框 i的值表格。我原以为这会照顾你。

那么,答案是否则可能导致注射问题。 (另外,隐藏字段不是存储敏感信息的地方,我不知道为什么输入被隐藏,隐藏也不会改变它的行为方式......)

为了解决您的问题,您可以混合htmlEscape和字符串中的答案替换功能,像这个问题(Encode hidden form field value

function htmlEscape(str) { 
    return String(str) 
     .replace(/&/g, '%26') 
     .replace(/ /g, '%20'); 
} 

我希望它能帮助。

+0

编写你自己的逃生程序是一个坏主意。改为使用内置方法,如[this](http://*.com/a/25396011/4494577)。 – jannis

我认为不需要做任何事情与您的代码,它工作正常,我有以下folow代码,请确认它。

检视/ HTML:

@using (@Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "myForm", name = "myForm" })) 
{ 
    <input type="button" class="btn btn-danger" value="Click" id="btnClick"> 
} 

的Jquery:

$(document).ready(function() { 
    var myForm = $("#myForm"); 
    myForm.append('<input type="hidden" name="List" value="Key Date & Times" />'); 

    $('#btnClick').click(function() { 
     var myForm = $("#myForm"); 
     myForm.submit(); 

    }); 
}); 

控制器:

public ActionResult Save() 
{ 
     return RedirectToAction("Index"); 
} 

输出:

enter image description here

+0

使用'Request [“List”]'和'string List'作为动作参数没有区别!如果她无法从动作参数中获得它,她无法获得正确的“List”值。 –

很可能要提交一个GET请求到服务器,因此每个输入表单字段的所有值都贴在查询字符串的服务器。

这样,因为已经Zulqarnain Jalil说,每一个“&”它是由服务器解释为查询字符串键/值对的分隔符,所以你想念你的“名单”的最后一部分隐藏输入表单字段。

因此,在这种情况下,您必须使用“&”字符对所有值进行网址编码。

相反,如果您向服务器提交POST请求,则不需要对表单域值进行任何URL编码,因为它们会分别传递到服务器,即不在同一个字符串中。

如果你想避免URL编码尝试在POST请求改变你的要求:

var myForm = $("#myForm"); 
myForm.method = "post"; 
myForm.submit(); 

我有同样的问题,3〜4天后回来。我正在与Angular和ASP合作。 像上面的答案一样,我也必须使用URLDecode。

回答你的问题: - 为什么要编码用户输入?


避免意外的行为

说你的应用程序可以在一个GET请求处理两个参数。

这仅发生在一个参数
localhost:5000/stalls?searchbook=

这需要两个参数
localhost:5000/stalls?searchbook=&includesecret=

你也有一个页面,可以搜索书籍。
无论用户输入到搜索栏中什么都会导致GET请求。
localhost:5000/stalls?searchbook=USERSTRINGGOESHERE

如果用户要搜索 &includesecret=true
合力GET请求localhost:5000/stalls?searchbook=&includesecret=true并可能会不小心导致的私人数据泄露到结果页面上的用户。

通常编码的符号(空格,&,%等)可以很多次意味着不同的事情。 '&'分隔GET请求中的键,也可以是字符串的一部分,因此在没有编码的情况下使用它可能会导致预期的行为。

P.S: - 私人数据不应通过GET请求查询。这只是这个例子的目的:)


一致性

在测试我的应用我注意到,PhantomJS编码的默认字符串。这样我在不同的客户端获得了不同的搜索结果。因此,可以安全地假设即使您不这样做,某些客户端也可能会对URL进行编码。


另一个实施例

'#' 键可以是URL的一部分。如果我访问localhost:5000/homepage.html#footer,将显示带有ID页脚的元素。这也可能导致你不期望的行为。尝试在GET请求参数中输入#,该参数不是编码的,也不是非字母字符的清除,并且很可能最终会出现类似于我的情况。如果我在其中输入#(当它未被编码时),我几天前写入的搜索功能将会中断。