Citer escape mindblow - JavaScript

Question

Je suis bloqué sur un problème d'échappement de devis pour la dernière heure (en JavaScript). Ici, il est:

var injectScript = function() { 

    var scriptToInject = "" + 
    "secretFunction(secretElement.setSecretAttribute('<button class=&#x27;button-default&#x27;>MyButton</button>'));"; 

    secretService.sendRequest(scriptToInject); 
} 

Donc, le but de ma fonction injectScript() est d'injecter du code JavaScript. Cela fonctionne habituellement mais avec cet exemple particulier, ce n'est pas le cas.

Sur le code que j'ai inclus, vous pouvez voir que j'essaie d'injecter la fonction secretFunction(). Cette fonction modifie simplement certains attributs d'éléments dans une page HTML.

Mais dans la console Chrome, le code de mon élément est le suivant:

<button class="'button-default'">MyButton</button> 

Je ne sais pas pourquoi il est à la fois »et » Le résultat que je pense est:.

<button class="button-default">MyButton</button> 

J'ai essayé beaucoup d'astuces d'échappement (\ ", \ ', etc.), mais non fonctionnent .. Des idées?

Answer 1

En supposant setSecretAttribute ne munge pas la chaîne d'une certaine façon, il suffit d'utiliser \" au sein de votre " chaîne entre guillemets, et retirez le errante ;:

var injectScript = function() { 

    var scriptToInject = "" + 
    "secretFunction(secretElement.setSecretAttribute('<button class=\"button-default\">MyButton</button>'));"; 
    // -------------------------------------------------------------^^--------------^^^ 

    secretService.sendRequest(scriptToInject); 
} 

La chaîne qui définit est

secretFunction(secretElement.setSecretAttribute('<button class="button-default">MyButton</button>') 

... et la chaîne que définit est

<button class="button-default">MyButton</button> 

---

Side note: Il n'y a pas besoin pour le "" + après scriptToInject =.

Answer 2

Vous essayez d'utiliser la référence d'entité HTML pour un guillemet simple comme délimiteur pour votre attribut de classe. Lorsque le navigateur rencontre l'entité HTML, il ne la considère pas comme un délimiteur et la traitera donc comme du HTML malformé. Il essaie d'être utile et de résoudre ce problème en travaillant sur ce qu'il pense que la valeur de l'attribut est censée être, et en l'enveloppant entre guillemets. Lorsque vous affichez la console, l'entité HTML est en cours de décodage, ce qui masque le problème.

Vous êtes mieux juste en utilisant des guillemets et leur échapper de manière appropriée:

"secretFunction(secretElement.setSecretAttribute('<button class=\"button-default\">MyButton</button>'));";