如何在onClick处理程序中转义JavaScript代码中的字符串？

Question

也许我只是在考虑这个问题,但是我在查找链接的onClick处理程序中某些JavaScript代码中的字符串转义时遇到了什么问题.例:

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

该<%itemid%>和<%itemname%>在哪里模板替换发生.我的问题是项目名称可以包含任何字符,包括单引号和双引号.目前,如果它包含单引号,则会破坏JavaScript代码.

我的第一个想法是使用模板语言的函数来JavaScript转义项目名称,它只是逃避引号.这不会修复包含双引号的字符串的情况,该双引号会破坏链接的HTML.这个问题通常是如何解决的？我是否需要HTML-escape整个onClick处理程序？

如果是这样,那看起来真的很奇怪,因为模板语言的转义函数也会使括号,引号和分号HTML化......

正在为搜索结果页面中的每个结果生成此链接,因此无法在JavaScript标记内创建单独的方法,因为我需要为每个结果生成一个.

此外,我正在使用我工作的公司本土化的模板引擎,因此特定于工具包的解决方案对我来说毫无用处.

Answer 1

在JavaScript中,您可以将单引号编码为"\ x27",将双引号编码为"\ x22".因此,使用此方法,您可以在JavaScript字符串文字的(双重或单个)引号内使用\ x27\x22而不用担心任何嵌入式引号"突破"您的字符串.

\ xXX用于字符<127,而\ uXXXX用于Unicode,因此您可以使用这些知识为所有超出常规白名单的字符创建强大的JSEncode函数.

例如,

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

Answer 2

根据服务器端语言,您可以使用以下方法之一:

.NET 4.0

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

Java的

import org.apache.commons.lang.StringEscapeUtils;
...

String result = StringEscapeUtils.escapeJavaScript(jsString);

蟒蛇

import json
result = json.dumps(jsString)

PHP

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

Ruby on Rails

<%= escape_javascript(jsString) %>

Answer 3

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

例如,跨度<%itemid%>看起来就像<span id='itemid' style='display:none'><%itemid%></span>在javascript函数SelectSurveyItem中一样从这些跨度中选择参数innerHTML.

Answer 4

尽量避免在HTML中使用字符串文字,并使用JavaScript绑定JavaScript事件.

另外,除非你真的知道自己在做什么,否则请避免使用'href =#' .它打破了强制性middleclickers(开瓶器)的可用性.

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

我选择的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>

Answer 5

如果它进入一个HTML属性,你就需要在两个HTML编码(至少包括:>到&gt; <到&lt和"到")它,并逃脱单引号(用反斜杠),所以它们不会与你的JavaScript引用干扰.

最好的方法是使用你的模板系统(必要时扩展它),但你可以简单地制作几个转义/编码函数,并将它们包装在那里的任何数据周围.

是的,它完全有效(正确,甚至)HTML转义HTML属性的全部内容,即使它们包含javascript.