it-swarm-tr.com

Bir onClick işleyicisinin içindeki JavaScript kodundaki bir dizeden nasıl kaçarım?

Belki de bunu çok zor düşünüyorum, ancak bir linkin onClick işleyicisinin içindeki bazı JavaScript kodlarında bir ipte kaçan ne olduğunu bulmakta sorun yaşıyorum. Örnek:

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

<%itemid%> ve <%itemname%>, şablon değişiminin gerçekleştiği yerdir. Benim sorunum, öğe adının, tek ve çift tırnak dahil olmak üzere herhangi bir karakter içerebilmesidir. Şu anda, tek tırnak içeriyorsa, JavaScript kodunu kırar.

İlk düşüncem, şablon dilin işlevini kullanarak sadece tırnaklardan kaçan öğe adının JavaScriptten çıkmasını sağlamaktı. Bu, bağlantının HTML'sini kıran çift tırnak içeren dizenin durumunu düzeltmez. Bu sorun normal olarak nasıl çözülür? Tüm onClick işleyicisinin HTML-kaçışına ihtiyacım var mı?

Öyleyse, şablon dilinin bunun için kaçış işlevi parantezleri, tırnakları ve noktalı virgülleri HTML hale getireceğinden bu gerçekten garip görünür.

Bu bağlantı, arama sonuçları sayfasındaki her sonuç için oluşturulmaktadır, bu nedenle JavaScript etiketi içinde ayrı bir yöntem oluşturmak mümkün değildir, çünkü sonuç başına bir tane oluşturmam gerekir.

Ayrıca, çalıştığım şirkette evde yetiştirilen tempolu bir motor kullanıyorum, bu yüzden araç setine özel çözümler benim için işe yaramayacak.

63
rmeador

JavaScript’te tek tırnak işaretlerini "\ x27" ve çift tırnak işaretlerini "\ x22" olarak kodlayabilirsiniz. Bu nedenle, bu yöntemle, bir JavaScript dize değişmezinin (çift veya tek) tırnaklarına girdikten sonra, dizginizden "çıkma" herhangi bir gömülü tırnak korkusuyla\x27\x22 cezasızlıkla kullanabilirsiniz. 

\ xXX, <127 karakterleri ve Unicode için\uXXXX karakterleri içindir, bu nedenle bu bilgiyle donanmış normal beyaz listedeki tüm karakterler için sağlam bir JSEncode işlevi oluşturabilirsiniz.

Örneğin,

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

Sunucu tarafı diline bağlı olarak, şunlardan birini kullanabilirsiniz:

.NET 4.0

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

Java

import org.Apache.commons.lang.StringEscapeUtils;
...

String result = StringEscapeUtils.escapeJavaScript(jsString);

Piton

import json
result = json.dumps(jsString)

PHP

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

Raylar üzerinde yakut

<%= escape_javascript(jsString) %>
20

<%itemid%> ve <%itemname%> parametrelerinin her biri için birer tane olan gizli açıklıklar kullanın ve değerlerini içlerine yazın.

Örneğin, <%itemid%> için olan yayılma alanı <span id='itemid' style='display:none'><%itemid%></span> gibi gözükür ve javascript işlevinde SelectSurveyItem şeklinde görünür ve bu alanların innerHTML öğesinden argümanları alır.

10
Shyam

HTML'nizde string değişmezleri kullanmaktan kaçının ve JavaScript olaylarını bağlamak için JavaScript kullanın.

Ayrıca, ne yaptığınızı bilmiyorsanız gerçekten sürece 'href = #' komutundan kaçının. Zorunlu orta katmanların (sekme açacağı) çok fazla kullanılabilirliğini kırıyor.

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

JavaScript seçim kütüphanem sadece jQuery olur:

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

Böyle bir bağlantı listesi oluşturuyorsanız, bunu yapmak isteyebilirsiniz:

<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>
9
Kent Fredric

Bir HTML özniteliğine giriyorsa, hem HTML kodlamasını (en azından: > - &gt;< - &lt ve " - &quot;) __, ve - tek tırnaklar (ters eğik çizgi)) javascript alıntılarınızı engellemiyorlar. 

Bunu yapmanın en iyi yolu şablonlama sisteminizdir (gerekirse genişletme), ancak birkaç kaçma/kodlama işlevini yapabilir ve bunları içeri giren her veri etrafına sarabilirsiniz.

Ve evet, HTML özniteliklerinin tüm içeriğini, javascript olsalar bile, HTML'den kaçmak için (doğru) bile geçerlidir.

8
Dan

Başka bir ilginç çözüm bunu yapmak olabilir:

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

Ardından, javascript alıntılama işleminin ek karmaşıklığı hakkında endişelenmenize gerek kalmadan her iki değişkende de standart bir HTML kodlaması kullanabilirsiniz.

Evet, bu does kesinlikle geçersiz bir HTML oluşturun. Ancak,geçerli bir tekniktir ve tüm modern tarayıcılar onu destekler.

Eğer öyleysem, muhtemelen ilk önerime uyacağım ve değerlerin HTML kodlu ve olduğundan tek tırnakların kaçmasını sağladım.

3
Dan

<head> bölümünde ayrı işlevler bildirin ve onClick yönteminizde bunları çağırın. Çok sayıda varsa, onları numaralandıran bir adlandırma düzenini kullanabilir veya onClicks'inizde bir tamsayı geçirebilir ve fonksiyonda büyük bir yağ anahtarı ifadesi kullanabilirsiniz. 

1
moonshadow

JavaScript kodunu içeren Microsoft Anti-XSS kitaplığını kullanın.

1
blowdart

Öncelikle, onclick işleyicisinin bu şekilde ayarlanması daha basit olur:

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

</script>

Ardından itemid ve itemname'in JavaScript için kaçması gerekir (yani, ", \", vb. Olur).

Java'yı sunucu tarafında kullanıyorsanız, jakarta'nın ortak dilinden StringEscapeUtils sınıfına bir göz atabilirsiniz. Aksi takdirde, kendi 'escapeJavascript' yönteminizi yazmak çok uzun sürmemelidir.

1

Ben de bu problemle karşılaştım. Tek tırnakları, HTML'yi kıramayan kaçık tırnaklara dönüştürmek için bir komut dosyası yaptım.

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

Tuzuna değecek herhangi bir şablonlama motorunun "kaçış tırnak" işlevi vardır. Bizim (aynı zamanda evde yetiştirilen, çalıştığım yer) javascript için alıntılardan kaçma işlevine de sahiptir. Her iki durumda da, şablon değişkeni istediğinize bağlı olarak, sadece _esc veya _js_esc ile eklenir. IMHO, kullanıcı tarafından oluşturulan içeriği hiçbir zaman erişilmemiş bir tarayıcıya göndermemelisiniz.

0
livingtech

Buradaki cevaplar JavaScript kullanarak tırnaklardan kaçamayacağınız ve kaçan dizelerle başlamanız gereken cevaplar.

Bu nedenle. 'Marge, "Ben de Peter demiştim" dedi ve senaryoyu sunmadan önce verilerinizin temizlenmesi mi gerekiyor?

0
Steve Perks

Aynı sorunla karşılaştım ve zor bir şekilde çözdüm. İlk önce global değişkenler, v1, v2 ve v3 yapın. Ve onclick'e, 1, 2 veya 3 göstergesini gönderin ve v1, v2 ve v3 'e benzer şekilde koymak için 1, 2, 3 fonksiyonunu kontrol edin:

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);
}
0
AhmedGamal