Comment échapper à une chaîne de code JavaScript dans un gestionnaire onClick?

Question

Peut-être que je réfléchis trop à cela, mais j'ai du mal à savoir ce qu'il faut utiliser pour échapper sur une chaîne dans du code JavaScript à l'intérieur du gestionnaire onClick d'un lien. Exemple:

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

Les <%itemid%> et <%itemname%> sont les endroits où la substitution de modèle se produit. Mon problème est que le nom de l'élément peut contenir n'importe quel caractère, y compris les guillemets simples et doubles. Actuellement, s’il contient des guillemets simples, le code JavaScript est cassé.

Ma première pensée a été d'utiliser la fonction du langage modèle pour JavaScript en évitant le nom de l'élément, ce qui échappe simplement aux guillemets. Cela ne résoudra pas le cas de la chaîne contenant des guillemets doubles qui casse le code HTML du lien. Comment ce problème est-il normalement traité? Dois-je utiliser HTML pour échapper à l'intégralité du gestionnaire onClick?

Si tel est le cas, cela paraîtrait vraiment étrange, car la fonction d'échappement du langage de template pour cela HTMLifierait également les parenthèses, les guillemets et les points-virgules ...

Ce lien est généré pour chaque résultat dans une page de résultats de recherche. Il est donc impossible de créer une méthode distincte au sein d'une balise JavaScript, car je devrais en générer une par résultat.

De plus, j'utilise un moteur de création de modèles créé par la société pour laquelle je travaille. Les solutions spécifiques aux outils ne me seront d'aucune utilité.

Answer 1

En JavaScript, vous pouvez coder des guillemets simples sous la forme " \ x27 " et des guillemets doubles sous la forme " \ x22 " ;. Par conséquent, avec cette méthode, vous pouvez, une fois que vous vous trouvez à l'intérieur des guillemets (doubles ou simples) d'un littéral JavaScript, utiliser \ x27 \ x22 en toute impunité, sans craindre les guillemets & "; Éclater " de votre ficelle.

\ xXX est pour les caractères < 127, et \ uXXXX pour Unicode , ce qui vous permet de créer un robuste JSEncode pour tous les caractères ne figurant pas dans la liste blanche habituelle.

Par exemple,

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

Answer 2

En fonction de la langue côté serveur, vous pouvez utiliser l'un des types suivants:

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

Answer 3

Utilisez des plages masquées, une pour chacun des paramètres <%itemid%> et <%itemname%>, et écrivez leurs valeurs à l'intérieur.

Par exemple, l'intervalle pour <span id='itemid' style='display:none'><%itemid%></span> ressemblerait à SelectSurveyItem et dans la fonction javascript innerHTML pour sélectionner les arguments de ces étendues '<=>.

Answer 4

Essayez d'éviter d'utiliser des littéraux de chaîne dans votre code HTML et utilisez JavaScript pour lier des événements JavaScript.

Évitez également "href = #" à moins que vous sachiez vraiment ce que vous faites. Il brise tellement la convivialité pour les médiateurs exigeants (ouvre-tabulation).

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

Ma bibliothèque JavaScript préférée est jQuery:

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

Si vous rendez une liste de liens de ce type, vous pouvez le faire:

<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

S'il s'agit d'un attribut HTML, vous devez coder HTML (au minimum: > à &gt; < à &lt et à " à "), et échappent aux guillemets simples (avec une barre oblique inverse) pour ne pas nuire à vos citations en javascript.

La meilleure façon de le faire est d'utiliser votre système de templates (en l'étendant si nécessaire), mais vous pouvez simplement créer quelques fonctions d'échappement / encodage et les envelopper toutes les données qui y sont contenues.

Et oui, il est parfaitement valide (correct, même) d’échapper en HTML tout le contenu de vos attributs HTML, même s'ils contiennent du javascript.

Answer 6

Une autre solution intéressante pourrait être la suivante:

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

Vous pouvez ensuite utiliser un codage HTML standard sur les deux variables, sans avoir à vous soucier de la complication supplémentaire de la citation JavaScript.

Oui, cela crée un code HTML strictement invalide. Cependant, c'est une technique valide, et tous les navigateurs modernes la supportent.

Si c’était le mien, j’irais probablement à ma première suggestion et veillerais à ce que les valeurs soient codées en HTML et sans les guillemets simples.

Answer 7

Déclarez des fonctions séparées dans le < head > section et invoquez ceux de votre méthode onClick. Si vous en avez beaucoup, vous pouvez utiliser un schéma de dénomination qui les numérote ou transmettre un entier dans votre onClicks et avoir une grosse instruction switch dans la fonction.

Answer 8

J'ai également rencontré ce problème. J'ai créé un script pour convertir les guillemets simples en guillemets d'échappement échappés sans casser le code HTML.

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

Answer 9

Utilisez la Bibliothèque Microsoft Anti-XSS qui inclut un code JavaScript.

Answer 10

Tout d'abord, il serait plus simple de configurer le gestionnaire onclick de la manière suivante:

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

</script>

Ensuite, itemid et itemname doivent être protégés pour JavaScript (autrement dit, " devient \", etc.).

Si vous utilisez Java côté serveur, consultez la classe StringEscapeUtils à partir de common-lang de jakarta. Sinon, l'écriture de votre propre méthode 'escapeJavascript' ne devrait pas être trop longue.

Answer 11

Les réponses ici sont-elles que vous ne pouvez pas échapper des guillemets à l'aide de JavaScript et que vous devez commencer par des chaînes échappées.

Par conséquent. Il n’existe aucun moyen pour JavaScript de gérer la chaîne 'Marge a dit & «Je dirais que c'était &»; à Peter 'et vous avez besoin de nettoyer vos données avant de les proposer au script?

Answer 12

Tout bon moteur de gabarit digne de ce nom aura un & "quotation d'échappement" & "; une fonction. Le nôtre (aussi de chez moi, où je travaille) a aussi une fonction pour échapper des guillemets au javascript. Dans les deux cas, la variable de modèle est alors simplement ajoutée avec _esc ou _js_esc, selon ce que vous voulez. Vous ne devriez jamais transmettre le contenu généré par l'utilisateur à un navigateur qui n'a pas été échappé, IMHO.

Answer 13

J'ai rencontré le même problème et je l'ai résolu de manière délicate. Commencez par créer les variables globales, v1, v2 et v3. Et dans le onclick, envoyez un indicateur, 1, 2 ou 3 et dans la vérification de la fonction pour 1, 2, 3 pour mettre les v1, v2 et v3 comme:

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