Как мне избежать строки внутри кода 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 невозможно, потому что мне нужно будет создать один на результат.



кроме того, я использую шаблонный движок, который был выращен в компании, в которой я работаю, поэтому конкретные решения для инструментария мне не понадобятся.

621   13  

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> и в функции JavaScript SelectSurveyItem чтобы выбрать аргументы из этих промежутков 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-кодировать (как минимум:> до &gt;< до &lt и " до &quot;) он, и экранируйте одинарные кавычки (с обратной косой чертой), чтобы они не мешали вашему цитированию 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

    Ничего не найдено.