it-swarm.com.de

Wie kann ich eine Zeichenfolge in JavaScript-Code innerhalb eines onClick-Handlers fliehen?

Vielleicht denke ich nur zu sehr darüber nach, aber ich habe ein Problem damit, herauszufinden, wie man sich in einem JavaScript-Code innerhalb des onClick-Handlers eines Links für eine Zeichenfolge entscheiden kann. Beispiel:

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

In <%itemid%> und <%itemname%> erfolgt die Ersetzung von Vorlagen. Mein Problem ist, dass der Elementname ein beliebiges Zeichen enthalten kann, einschließlich einfacher und doppelter Anführungszeichen. Wenn es einfache Anführungszeichen enthält, bricht es derzeit den JavaScript-Code.

Mein erster Gedanke war, die Funktion der Vorlagensprache zu verwenden, um den Namen des Objekts durch JavaScript zu umgehen, wodurch die Anführungszeichen nur knapp sind. Das wird den Fall der Zeichenfolge, die doppelte Anführungszeichen enthält, nicht beheben, wodurch der HTML-Code des Links gebrochen wird. Wie wird dieses Problem normalerweise angegangen? Muss ich den gesamten onClick-Handler mit einem HTML-Code umgehen?

Wenn ja, würde das wirklich merkwürdig aussehen, da die Escape-Funktion der Vorlagensprache auch die Klammern, Anführungszeichen und Semikolons HTMLify machen würde.

Dieser Link wird für jedes Ergebnis auf einer Suchergebnisseite generiert. Daher ist das Erstellen einer separaten Methode in einem JavaScript-Tag nicht möglich, da ich pro Ergebnis eine generieren müsste.

Außerdem verwende ich eine Templatier-Engine, die in meinem Unternehmen selbst entwickelt wurde. Toolkit-spezifische Lösungen sind für mich daher nicht von Nutzen.

63
rmeador

In JavaScript können Sie einfache Anführungszeichen als "\ x27" und doppelte Anführungszeichen als "\ x22" kodieren. Daher können Sie mit dieser Methode, wenn Sie sich innerhalb der (doppelten oder einfachen) Anführungszeichen eines JavaScript-Zeichenfolgenlitals befinden, die\x27\x22 ungestraft verwenden, ohne befürchten zu müssen, dass eingebettete Anführungszeichen aus Ihrer Zeichenfolge herausbrechen. 

\ xXX steht für Zeichen <127 und\uXXXX für Unicode . Mit diesem Wissen können Sie also eine robuste Funktion JSEncode für alle Zeichen erstellen, die sich außerhalb der üblichen Whitelist befinden.

Zum Beispiel,

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

Abhängig von der serverseitigen Sprache können Sie eine der folgenden verwenden:

.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) %>
20

Verwenden Sie ausgeblendete Felder, jeweils einen für jeden der Parameter <%itemid%> und <%itemname%>, und geben Sie deren Werte ein.

Zum Beispiel würde die Spanne für <%itemid%> wie <span id='itemid' style='display:none'><%itemid%></span> aussehen und in der Javascript-Funktion SelectSurveyItem die Argumente aus dieser Spanne 'innerHTML' auswählen.

10
Shyam

Vermeiden Sie die Verwendung von String-Literalen in Ihrem HTML und verwenden Sie JavaScript, um JavaScript-Ereignisse zu binden.

Vermeiden Sie auch 'href = #', es sei denn, Sie wirklich wissen, was Sie tun. Es bricht so viel Usability für zwanghafte Middleclicker (Tab Opener).

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

Meine JavaScript-Bibliothek der Wahl ist zufällig jQuery:

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

Wenn Sie zufällig eine Liste solcher Links rendern, können Sie dies tun:

<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

Wenn es sich um ein HTML-Attribut handelt, müssen Sie sowohl HTML-encode (mindestens: > bis &gt;< bis &lt und " bis &quot;), und Escape-Anführungszeichen (mit einem Backslash) verwenden Sie stören nicht Ihre Javascript-Zitate. 

Am besten tun Sie dies mit Ihrem Templating-System (ggf. erweitern), aber Sie können einfach ein paar Escape/Encoding-Funktionen erstellen und beide um die dort vorhandenen Daten wickeln.

Und ja, es ist vollkommen richtig (sogar richtig), den gesamten Inhalt Ihrer HTML-Attribute mit HTML zu entgehen, selbst wenn diese Javascript enthalten.

8
Dan

Eine andere interessante Lösung könnte sein, dies zu tun:

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

Dann können Sie eine Standard-HTML-Codierung für beide Variablen verwenden, ohne sich um die zusätzliche Komplikation der Javascript-Anführungszeichen kümmern zu müssen.

Ja, dies tut erzeugt HTML, das absolut ungültig ist. Es ist jedoch ist eine gültige Technik und wird von allen modernen Browsern unterstützt.

Wenn es meine wäre, würde ich wahrscheinlich mit meinem ersten Vorschlag fortfahren und sicherstellen, dass die Werte HTML-codiert sind nd einfache Anführungszeichen sind ausgeblendet.

3
Dan

Deklarieren Sie separate Funktionen im Abschnitt <head> und rufen Sie diese in Ihrer onClick-Methode auf. Wenn Sie über Lots verfügen, können Sie ein Benennungsschema verwenden, das sie nummeriert, oder eine Ganzzahl in Ihren onClicks übergeben und in der Funktion eine dicke switch-Anweisung verwenden. 

1
moonshadow

Verwenden Sie die Microsoft Anti-XSS-Bibliothek , die eine JavaScript-Kodierung enthält.

1
blowdart

Erstens wäre es einfacher, wenn der Onclick-Handler folgendermaßen eingestellt wäre:

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

</script>

Dann müssen itemid und itemname für JavaScript mit Escapezeichen versehen werden (dh " wird zu \" usw.).

Wenn Sie Java auf dem Server verwenden, können Sie einen Blick auf die Klasse StringEscapeUtils aus jakartas common-lang werfen. Andernfalls sollte es nicht zu lange dauern, eine eigene "escapeJavascript" -Methode zu schreiben.

1

Ich bin auch mit diesem Problem konfrontiert. Ich habe ein Skript erstellt, um einfache Anführungszeichen in doppelte Anführungszeichen umzuwandeln, die den HTML-Code nicht beschädigen.

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

Jede gute Templatiermaschine, die ihr Salz wert ist, hat eine "Escape-Quotes" -Funktion. Unsere (auch selbst gewachsene, wo ich arbeite) hat auch eine Funktion, um Anführungszeichen für Javascript zu umgehen. In beiden Fällen wird die Vorlagenvariable dann je nach Wunsch mit _esc oder _js_esc angehängt. Sie sollten niemals benutzergenerierte Inhalte in einem Browser ausgeben, der noch nicht gesichert wurde, IMHO.

0
livingtech

Ist die Antwort hier, dass Sie Anführungszeichen nicht mithilfe von JavaScript schützen können und dass Sie mit Escape-Zeichenfolgen beginnen müssen.

Deshalb. Es gibt keine Möglichkeit, dass JavaScript mit der Zeichenfolge umgehen kann. "Marge sagte:" Ich würde so aussehen, als wäre das für Peter "und Sie müssen Ihre Daten bereinigen, bevor Sie sie dem Skript anbieten.

0
Steve Perks

Ich stand vor demselben Problem und löste es auf knifflige Weise. Erstellen Sie zuerst die globalen Variablen v1, v2 und v3. Senden Sie im Onclick einen Indikator 1, 2 oder 3 und in der Funktionsprüfung nach 1, 2, 3, um v1, v2 und v3 wie folgt zu setzen:

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