Échapper aux chaînes HTML avec jQuery

Question

Quelqu'un connaît-il un moyen facile d'échapper à l'HTML à partir de chaînes de caractères dans le fichier jQuery ? J'ai besoin de pouvoir passer une chaîne arbitraire et qu'elle soit correctement échappée pour être affichée dans une page HTML (pour éviter les attaques par injection JavaScript/HTML). Je suis sûr qu'il est possible d'étendre jQuery pour faire cela, mais je ne connais pas assez le framework pour le moment pour réaliser cela.

Answer 1

Il y a également la solution de mustache.js

var entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

Answer 2

Puisque vous utilisez jQuery vous pouvez simplement définir l'élément text propriété :

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;

Answer 3

$('<div/>').text('This is fun & stuff').html(); // "This is fun &amp; stuff"

Source : http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

Answer 4

Si vous vous évadez pour le HTML, il n'y en a que trois auxquels je pense qui seraient vraiment nécessaires :

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

En fonction de votre cas d'utilisation, vous pouvez également avoir besoin de faire des choses comme " a " . Si la liste était assez grande, j'utiliserais simplement un tableau :

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent() ne l'échappera que pour les URL, pas pour le HTML.

Answer 5

J'ai écrit une toute petite fonction qui fait cela. Elle n'échappe que " , & , < y > (mais c'est généralement tout ce dont vous avez besoin de toute façon). Elle est légèrement plus élégante que les solutions proposées précédemment car elle n'utilise que la fonction un .replace() pour faire toute la conversion. ( EDIT 2 : Réduction de la complexité du code, ce qui rend la fonction encore plus petite et plus nette. Si vous êtes curieux de connaître le code original, voir la fin de cette réponse).

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

Il s'agit d'un simple Javascript, sans jQuery.

Échapper à / y ' trop

Modifier en réponse à mklement commentaire.

La fonction ci-dessus peut facilement être étendue pour inclure n'importe quel caractère. Pour spécifier plus de caractères à échapper, il suffit de les insérer tous les deux dans la classe de caractères de l'expression régulière (c'est-à-dire à l'intérieur du champ /[...]/g ) et comme entrée dans le chr objet. ( EDIT 2 : J'ai également raccourci cette fonction, de la même manière).

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

Notez l'utilisation ci-dessus de ' pour apostrophe (l'entité symbolique ' aurait pu être utilisé à la place - il est défini en XML, mais n'était pas inclus à l'origine dans la spécification HTML et pourrait donc ne pas être pris en charge par tous les navigateurs. Voir : Article Wikipedia sur les codages de caractères HTML ). Je me souviens également avoir lu quelque part que l'utilisation d'entités décimales est mieux supportée que l'utilisation d'entités hexadécimales, mais je ne parviens pas à trouver la source de cette information. (Et il ne doit pas y avoir beaucoup de navigateurs qui ne supportent pas les entités hexadécimales).

Note : Ajout de / y ' à la liste des caractères échappés n'est pas si utile, puisqu'ils n'ont pas de signification particulière en HTML et ne sont pas besoin de pour s'échapper.

Original escapeHtml Fonction

EDIT 2 : La fonction originale utilisait une variable ( chr ) pour stocker l'objet nécessaire à la .replace() callback. Cette variable avait également besoin d'une fonction anonyme supplémentaire pour l'étendre, ce qui rendait la fonction (inutilement) un peu plus grande et plus complexe.

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

Je n'ai pas testé laquelle des deux versions est la plus rapide. Si vous le faites, n'hésitez pas à ajouter des informations et des liens à ce sujet ici.