Échapper au HTML en utilisant jQuery

Question

Je suis venu avec un bidouillage pour échapper à HTML en utilisant jQuery et je me demande si quelqu'un voit un problème avec cela.

 $('<i></i>').text(TEXT_TO_ESCAPE).html();
 

La balise <i> est juste une valeur factice, car jQuery a besoin d’un conteneur pour définir le texte.

Y at-il peut-être un moyen plus facile de faire cela? Notez que j'ai besoin du texte stocké dans une variable, pas pour l'affichage (sinon, je pourrais simplement appeler elem.text(TEXT_TO_ESCAPE); ).

Merci!

Answer 1

C'est un assez standard façon de le faire, ma version utilisé un <div> bien que:

return $('<div/>').text(t).html();

Ce n'est pas techniquement sûre à 100% mais comme Mike Samuel notes, mais il est probablement assez sûr dans la pratique.

L'actuel Prototype.js fait ceci:

function escapeHTML() {
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

Mais il l'habitude d'utiliser la fonction "insérer du texte dans un div et d'en extraire le code HTML" truc.

Il y a aussi _.escape de Souligner, qu'elle a fait comme ceci:

// List of HTML entities for escaping.
var htmlEscapes = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#x27;',
  '/': '&#x2F;'
};

// Regex containing the keys listed immediately above.
var htmlEscaper = /[&<>"'\/]/g;

// Escape a string for HTML interpolation.
_.escape = function(string) {
  return ('' + string).replace(htmlEscaper, function(match) {
    return htmlEscapes[match];
  });
};

C'est à peu près la même approche que celle du Prototype. La plupart du JavaScript je ne dernièrement a trait de Soulignement de disponible, donc j'ai tendance à utiliser _.escape ces jours-ci.

Answer 2

Il n'y a aucune garantie que l' html() sera complètement échappé de sorte que le résultat pourrait ne pas être en sécurité après concaténation.

html() est basé sur innerHTML, et un navigateur pourrait, sans violer beaucoup d'attentes, de mettre en oeuvre innerHTML afin $("<i></i>").text("1 <").html() est "1 <", et qu' $("<i></i>").text("b>").html() est "b>".

Alors si vous concaténer ces deux individuellement sûr des résultats, vous obtenez "1 <b>" qui ne sera évidemment la version HTML de la concaténation des deux en clair morceaux.

Ainsi, cette méthode n'est pas sûr par déduction à partir de principes premiers, et il n'y a pas largement suivie spécification innerHTML (bien que le HTML5 ne le résoudre).

La meilleure façon de vérifier si elle fait ce que vous voulez est de tester coin de tels cas.

Answer 3

Cela devrait fonctionner. C'est en gros comment la bibliothèque Prototype.js le fait, ou du moins comment elle le faisait auparavant. Je le fais généralement avec trois appels à ".replace ()" mais ce n'est généralement qu'une habitude.