Comment décoder les entités HTML à l'aide de jQuery ?

Question

Comment utiliser jQuery pour décoder les entités HTML dans une chaîne de caractères ?

Answer 1

Note de sécurité : l'utilisation de cette réponse (conservée dans sa forme originale ci-dessous) peut introduire une Vulnérabilité XSS dans votre application. Vous ne devez pas utiliser cette réponse. Lire la réponse de lucascaro pour une explication des vulnérabilités dans cette réponse, et utiliser l'approche de cette réponse ou La réponse de Mark Amery à la place.

En fait, essayez

var encodedStr = "This is fun & stuff";
var decoded = $("<div/>").html(encodedStr).text();
console.log(decoded);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div/>

Answer 2

Sans aucun jQuery :

function decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

console.log(decodeEntities('1 & 2')); // '1 & 2'

Cela fonctionne de la même manière que le réponse acceptée mais peut être utilisé en toute sécurité avec des entrées utilisateur non fiables.

---

Questions de sécurité dans des approches similaires

Comme noté par Mike Samuel en faisant cela avec un <div> au lieu d'un <textarea> avec une entrée utilisateur non fiable est une vulnérabilité XSS, même si la <div> n'est jamais ajouté au DOM :

function decodeEntities(encodedString) {
  var div = document.createElement('div');
  div.innerHTML = encodedString;
  return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

Cependant, cette attaque n'est pas possible contre un <textarea> parce qu'il n'y a pas d'éléments HTML dont le contenu est autorisé dans un fichier de type <textarea> . Par conséquent, toutes les balises HTML encore présentes dans la chaîne "encodée" seront automatiquement codées en entités par le navigateur.

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

Avertissement : Faire cela en utilisant la méthode de jQuery .html() y .val() au lieu d'utiliser les méthodes .innerHTML y .value est également peu sûr* pour certaines versions de jQuery, même en utilisant un textarea . En effet, les anciennes versions de jQuery seraient évaluer délibérément et explicitement les scripts. contenue dans la chaîne de caractères passée à .html() . Ainsi, un code comme celui-ci affiche une alerte dans jQuery 1.8 :

//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(1337);</script>")
.text();

//-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

_{* Merci à <a href="https://stackoverflow.com/users/2377920/eru-penkman">Eru Penkman </a>pour avoir détecté cette vulnérabilité.}

Answer 3

Comme l'a dit Mike Samuel, n'utilisez pas jQuery.html().text() pour décoder les entités html car ce n'est pas sûr.

Au lieu de cela, utilisez un modèle de rendu comme Mustache.js o decodeEntities du commentaire de @VyvIT.

Underscore.js La bibliothèque utility-belt est livrée avec escape y unescape mais elles ne sont pas sûres pour les entrées utilisateur :

_.escape(string)

_.unescape(string)

Answer 4

Je pense que vous confondez les méthodes texte et HTML. Regardez cet exemple, si vous utilisez le HTML interne d'un élément comme texte, vous obtiendrez des balises HTML décodées (deuxième bouton). Mais si vous les utilisez en tant que HTML, vous obtiendrez la vue formatée en HTML (premier bouton).

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

Le premier bouton écrit : voici un HTML contenu.

Le deuxième bouton écrit : voici un contenu <B>HTML</B>.

Au fait, vous pouvez voir un plug-in que j'ai trouvé en Plugin jQuery - Décodage et encodage HTML qui encode et décode les chaînes HTML.

Answer 5

La question est limitée par "avec jQuery" mais cela pourrait aider certains de savoir que le code jQuery donné dans la meilleure réponse ici fait ce qui suit en dessous... cela fonctionne avec ou sans jQuery :

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}