Как мне избежать строки внутри кода JavaScript внутри обработчика onClick?
может быть, я просто думаю об этом слишком сложно, но у меня возникла проблема с выяснением того, что экранирование использовать в строке в некотором коде JavaScript внутри обработчика onClick ссылки. Пример:
<a href="#" onclick="SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false;">Select</a>
The <%itemid%> и <%itemname%> где происходит замена шаблона. Моя проблема заключается в том, что имя может содержать любые символы, включая одинарные и двойные кавычки. В настоящее время, если он содержит одинарные кавычки, он нарушает код JavaScript.
моя первая мысль была использовать функция языка шаблонов для JavaScript-экранировать имя элемента, которое просто экранирует кавычки. Это не исправит случай строки, содержащей двойные кавычки, которая нарушает HTML ссылки. Как эта проблема обычно решается? Нужно ли мне HTML-экранировать весь обработчик onClick?
Если это так, это будет выглядеть очень странно, так как функция escape языка шаблона для этого также будет HTMLify скобки, кавычки и точки с запятой...
эта ссылка генерируется для каждого результата на странице результатов поиска, поэтому создание отдельного метода внутри тега JavaScript невозможно, потому что мне нужно будет создать один на результат.
кроме того, я использую шаблонный движок, который был выращен в компании, в которой я работаю, поэтому конкретные решения для инструментария мне не понадобятся.
13 ответов:
в JavaScript вы можете кодировать одинарные кавычки как " \x27 "и двойные кавычки как"\x22". Таким образом, с помощью этого метода вы можете, как только вы находитесь внутри (двойных или одиночных) кавычек строкового литерала JavaScript, использовать \x27 \x22 безнаказанно, не опасаясь каких-либо встроенных кавычек, "вырывающихся" из вашей строки.
\xXX для символов Unicode, так вооружившись этим знанием вы сможете создать надежный 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 на Rails
<%= escape_javascript(jsString) %>
используйте скрытые промежутки, по одному для каждого из параметров
<%itemid%>и<%itemname%>и записать их значения внутри них.например, промежуток для
<%itemid%>будет выглядеть как<span id='itemid' style='display:none'><%itemid%></span>и в функции JavaScriptSelectSurveyItemчтобы выбрать аргументы из этих промежутковinnerHTML.
старайтесь избегать использования строковых литералов в вашем HTML и использовать JavaScript для привязки событий JavaScript.
кроме того, избегайте "href=#", если вы действительно знайте, что вы делаете. Это ломает так много юзабилити для компульсивных middleclickers (tab opener).
<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>
если он входит в атрибут HTML, вам нужно будет как HTML-кодировать (как минимум:
>до><до<и"до") он, и экранируйте одинарные кавычки (с обратной косой чертой), чтобы они не мешали вашему цитированию javascript.лучший способ сделать это-с помощью вашей системы шаблонов (при необходимости расширяя ее), но вы можете просто сделать пару функций экранирования / кодирования и обернуть их вокруг любых данных, которые входят там.
и да, это совершенно верно (правильно, даже), чтобы HTML-escape все содержимое ваших атрибутов HTML, даже если они содержат javascript.
еще одно интересное решение может заключаться в следующем:
<a href="#" itemid="<%itemid%>" itemname="<%itemname%>" onclick="SelectSurveyItem(this.itemid, this.itemname); return false;">Select</a>тогда вы можете использовать стандартную HTML-кодировку для обеих переменных, не беспокоясь о дополнительном усложнении цитирования javascript.
Да, это тут создать HTML, который является строго недопустимым. Однако это и действующий метод, и все современные браузеры поддерживают его.
Если бы это был мой, я бы, вероятно, пошел с моим первым предложением и обеспечил значения кодируются в HTML и есть одинарные кавычки экранированы.
объявите отдельные функции в разделе
и вызовите их в своем методе onClick. Если у вас есть много, вы можете использовать схему именования, которая их нумерует, или передать целое число в ваших onClicks и иметь большой оператор fat switch в функции.
Я тоже столкнулся с этой проблемой. Я сделал скрипт для преобразования одинарных кавычек в экранированные двойные кавычки, которые не будут нарушать HTML.
function noQuote(text) { var newtext = ""; for (var i = 0; i < text.length; i++) { if (text[i] == "'") { newtext += "\""; } else { newtext += text[i]; } } return newtext; }
использовать библиотека Microsoft Anti-XSS который включает в себя кодирование JavaScript.
во-первых, было бы проще, если бы обработчик 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 на стороне сервера, вы можете взглянуть на класс StringEscapeUtils из общего языка Джакарты. В противном случае, это не должно занять слишком много времени, чтобы написать свой собственный метод 'escapeJavascript'.
Это ответы здесь, что вы не можете избежать кавычек с помощью JavaScript и что вам нужно начать с экранированных строк.
любой хороший шаблонный движок стоит своей соли будет иметь функцию "escape quotes". Наш (также доморощенный, где я работаю) также имеет функцию экранирования кавычек для javascript. В обоих случаях переменная шаблона затем просто добавляется с _esc или _js_esc, в зависимости от того, что вы хотите. Вы никогда не должны выводить пользовательский контент в браузер, который не был экранирован, IMHO.
я столкнулся с той же проблемой, и я решил хитрым способом. Сначала сделайте глобальные переменные, v1, v2 и v3. И в onclick, отправить индикатор, 1, 2 или 3 и в функции проверки для 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); }
Comments