如何在onClick处理程序内的JavaScript代码中转义string?

也许我只是想这太难了,但我有一个问题搞清楚在链接的onClick处理程序内的一些JavaScript代码中使用string的东西。 例:

<a href="#" onclick="SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false;">Select</a> 

<%itemid%><%itemname%>是模板replace发生的地方。 我的问题是,项目名称可以包含任何字符,包括单引号和双引号。 目前,如果它包含单引号,则会打破JavaScript代码。

我的第一个想法是使用模板语言的function来JavaScript – 转义的项目名称,只是转义引号。 这不会解决包含双引号的string的情况,该引号会破坏链接的HTML。 这个问题通常如何解决? 我是否需要HTML转义整个onClick处理程序?

如果是这样,这将看起来很奇怪,因为模板语言的转义函数也将HTMLify括号,引号和分号…

此链接正在为search结果页面中的每个结果生成,因此在JavaScript代码中创build单独的方法是不可能的,因为我需要为每个结果生成一个。

而且,我使用的是我工作的公司内部生成的模板引擎,因此工具箱特定的解决scheme对我来说毫无用处。

在JavaScript中,您可以将单引号编码为“\ x27”,双引号编码为“\ x22”。 因此,使用这种方法,您可以在JavaScriptstring文字的(双引号或单引号)内部使用\ x27 \ x22,而不用担心任何embedded的引号“爆发”您的string。

\ xXX适用于字符数<127, Unicode使用 \ uXXXX,因此您可以使用这些知识为所有不在常规白名单中的字符创build强大的JSEncode函数。

例如,

 <a href="#" onclick="SelectSurveyItem('<% JSEncode(itemid) %>', '<% JSEncode(itemname) %>'); return false;">Select</a> 

根据服务器端语言的不同,可以使用以下其中一种:

.NET 4.0

 string result = System.Web.HttpUtility.JavaScriptStringEncode("jsString") 

Java的

 import org.apache.commons.lang.StringEscapeUtils; ... String result = StringEscapeUtils.escapeJavaScript(jsString); 

python

 import json result = json.dumps(jsString) 

PHP

 $result = strtr($jsString, array('\\' => '\\\\', "'" => "\\'", '"' => '\\"', "\r" => '\\r', "\n" => '\\n' )); 

Ruby on Rails

 <%= escape_javascript(jsString) %> 

对每个参数<%itemid%><%itemname%>分别使用一个隐藏跨度,并在其中写入它们的值。

例如, <%itemid%> <span id='itemid' style='display:none'><%itemid%></span>看起来就像<span id='itemid' style='display:none'><%itemid%></span>并在javascript函数SelectSurveyItem中select参数跨越“ innerHTML

请避免在HTML中使用string文字,并使用JavaScript来绑定JavaScript事件。

另外,除非你真的知道你在做什么,否则应该避免'href =#'。 它打破了如此强大的middleclickers可用性(选项卡开瓶器)。

 <a id="tehbutton" href="somewhereToGoWithoutWorkingJavascript.com">Select</a> 

我select的JavaScript库恰好是jQuery:

 <script type="text/javascript">//<!-- <![CDATA[ jQuery(function($){ $("#tehbutton").click(function(){ SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false; }); }); //]]>--></script> 

如果你碰巧正在渲染一个这样的链接列表,你可能想这样做:

 <a id="link_1" href="foo">Bar</a> <a id="link_2" href="foo2">Baz</a> <script type="text/javascript"> jQuery(function($){ var l = [[1,'Bar'],[2,'Baz']]; $(l).each(function(k,v){ $("#link_" + v[0] ).click(function(){ SelectSurveyItem(v[0],v[1]); return false; }); }); }); </script> 

如果进入HTML属性,则需要对HTML进行HTML编码(至less: >&gt; <&lt ; " &quot; ), 并且用单引号(带反斜杠)不会干扰你的JavaScript引用。

最好的办法是使用你的模板系统(如果需要,可以扩展它),但是你可以简单地创build一些转义/编码函数,并将它们包装到任何正在进行的数据中。

是的,对于HTML来说,它是完全有效的(正确,甚至是),即使它们包含javascript,也可以跳过HTML属性的全部内容。

另一个有趣的解决scheme可能是这样做的:

 <a href="#" itemid="<%itemid%>" itemname="<%itemname%>" onclick="SelectSurveyItem(this.itemid, this.itemname); return false;">Select</a> 

那么你可以在两个variables上使用标准的HTML编码,而不必担心javascript引用的额外复杂性。

是的,这确实会创build严格无效的HTML。 但是,这一个有效的技术,所有的现代浏览器都支持它。

如果这是我的,我可能会去我的第一个build议,并确保值是HTML编码, 有单引号转义。

在<head>部分声明单独的函数,并调用onClick方法中的函数。 如果你有很多,你可以使用一个命名scheme来给它们编号,或者在你的onClicks中传递一个整数,并且在函数中有一个大的开关语句。

我也遇到了这个问题。 我做了一个脚本,将单引号转换为不会破坏HTML的双引号。

 function noQuote(text) { var newtext = ""; for (var i = 0; i < text.length; i++) { if (text[i] == "'") { newtext += "\""; } else { newtext += text[i]; } } return newtext; } 

使用包含JavaScript编码的Microsoft Anti-XSS库 。

首先,如果以这种方式设置onclick处理程序将会更简单:

 <a id="someLinkId"href="#">Select</a> <script type="text/javascript"> document.getElementById("someLinkId").onClick = function() { SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false; }; </script> 

然后itemid和itemname需要转义为JavaScript(即"变成\"等)。

如果您在服务器端使用Java,则可以查看雅加达common-lang中的类StringEscapeUtils 。 否则,编写自己的“escapeJavascript”方法不需要太长的时间。

这里的答案是你不能使用JavaScript来引号,而且你需要从转义string开始。

因此。 有没有办法JavaScript能够处理string“玛吉说:”我会看起来是“彼得”,你需要清理你的数据之前提供给脚本?

任何好的模板引擎都会有一个“逃脱引号”的function。 我的工作(也是本土的,我工作的)也有一个函数来为javascript转义引号。 在这两种情况下,模板variables随后都会附加_esc或_js_esc,具体取决于您想要的。 你不应该输出用户生成的内容到一个没有被转义的浏览器,恕我直言。

我面临同样的问题,我用一个棘手的方式解决了这个问题。 首先制作全局variablesv1,v2和v3。 在onclick,发送一个指标,1,2或3,并在function检查1,2,3把v1,v2和v3,如:

 onclick="myfun(1)" onclick="myfun(2)" onclick="myfun(3)" function myfun(var) { if (var ==1) alert(v1); if (var ==2) alert(v2); if (var ==3) alert(v3); }