Échapper des chaînes HTML avec jQuery

Quelqu'un connaît-il un moyen simple d'échapper le HTML aux chaînes dans jQuery ? Je dois pouvoir passer une chaîne arbitraire et la faire correctement échapper pour l'afficher dans une page HTML (empêchant les attaques par injection JavaScript / HTML). Je suis sûr qu'il est possible d'étendre jQuery pour ce faire, mais je ne connais pas suffisamment le framework pour le moment.

Puisque vous utilisez jQuery , vous pouvez simplement définir la textpropriété de l'élément :

// 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;

Il y a aussi la solution de moustache.js

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

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

$('<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

Si vous vous échappez pour HTML, il n'y en a que trois qui pourraient être vraiment nécessaires:

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

En fonction de votre cas d'utilisation, vous pourriez aussi avoir besoin de faire des choses comme "à ". Si la liste était suffisamment 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() n'y échappera que pour les URL, pas pour HTML.

Suffisamment simple à utiliser:

_.escape(string) 

Underscore est une bibliothèque d'utilitaires qui fournit de nombreuses fonctionnalités que ne fournit pas js natif. Il y a aussi lodash qui est la même API que le trait de soulignement mais a été réécrit pour être plus performant.

J'ai écrit une toute petite fonction qui fait ça. Il échappe seulement ", &, <et >(mais généralement ce dont vous avez besoin est de toute façon tout). Il est légèrement plus élégant que les solutions proposées précédemment en ce qu'il n'en utilise qu'une .replace() pour effectuer toute la conversion. ( EDIT 2: complexité du code réduite rendant la fonction encore plus petite et plus nette, si vous êtes curieux du code d'origine, voir la fin de cette réponse.)

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

C'est du Javascript simple, pas de jQuery utilisé.

Échapper /et 'aussi

Modifier en réponse au commentaire de mklement .

La fonction ci-dessus peut facilement être étendue pour inclure n'importe quel caractère. Pour spécifier plus de caractères à échapper, insérez-les simplement dans la classe de caractères de l'expression régulière (c'est-à-dire à l'intérieur de /[...]/g) et en tant qu'entrée dans l' chrobjet. ( EDIT 2: raccourci également 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 'pour l'apostrophe (l'entité symbolique 'peut avoir été utilisée à la place - elle est définie en XML, mais n'était pas à l'origine incluse dans la spécification HTML et pourrait donc ne pas être prise en charge par tous les navigateurs. Voir: Article Wikipedia sur les encodages de caractères HTML ). Je me souviens également d'avoir lu quelque part que l'utilisation d'entités décimales est plus largement prise en charge que l'utilisation d'hexadécimal, mais je n'arrive pas à trouver la source de cela maintenant. (Et il ne peut pas y avoir beaucoup de navigateurs qui ne prennent pas en charge les entités hexadécimales.)

Remarque: L'ajout de /et 'à la liste des caractères d'échappement n'est pas très utile, car ils n'ont pas de signification particulière en HTML et n'ont pas besoin d'être échappés.

escapeHtmlFonction d' origine

EDIT 2: La fonction d'origine a utilisé une variable ( chr) pour stocker l'objet nécessaire au .replace()rappel. Cette variable avait également besoin d'une fonction anonyme supplémentaire pour l'étendre, rendant 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.

Je me rends compte à quel point je suis en retard à cette fête, mais j'ai une solution très simple qui ne nécessite pas jQuery.

escaped = new Option(unescaped).innerHTML;

Edit: Cela n'échappe pas aux guillemets. Le seul cas où les guillemets devraient être échappés est si le contenu doit être collé en ligne dans un attribut dans une chaîne HTML. Il m'est difficile d'imaginer un cas où cela serait une bonne conception.

Edit 3: Pour la solution la plus rapide, vérifiez la réponse ci-dessus de Saram. Celui-ci est le plus court.

Voici une fonction JavaScript claire et claire. Il échappera du texte tel que "quelques <plusieurs" à "quelques-uns & lt; plusieurs".

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

Après les derniers tests, je peux recommander une solution javaScript native (DOM) native la plus rapide et entièrement compatible avec les navigateurs :

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

Si vous le répétez plusieurs fois, vous pouvez le faire avec des variables une fois préparées:

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

Regardez ma comparaison finale de performance ( question de pile ).

Essayez la bibliothèque Underscore.string , cela fonctionne avec jQuery.

_.str.escapeHTML('<div>Blah blah blah</div>')

production:

'<div>Blah blah blah</div>'

J'ai amélioré l'exemple mustache.js en ajoutant la escapeHTML()méthode à l'objet chaîne.

var __entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

De cette façon, il est assez facile à utiliser "Some <text>, more Text&Text".escapeHTML()

escape()et unescape()sont destinés à encoder / décoder des chaînes pour les URL, pas HTML.

En fait, j'utilise l'extrait de code suivant pour faire l'astuce qui ne nécessite aucun cadre:

var escapedHtml = html.replace(/&/g, '&')
                      .replace(/>/g, '>')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

Si vous avez underscore.js, utilisez _.escape(plus efficace que la méthode jQuery publiée ci-dessus):

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe

Si vous suivez la route des expressions rationnelles, il y a une erreur dans l'exemple de tghw ci-dessus.

<!-- WON'T WORK -  item[0] is an index, not an item -->

var escaped = html; 
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(item[0], item[1]);   
}


<!-- WORKS - findReplace[item[]] correctly references contents -->

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

Ceci est un bel exemple sûr ...

function escapeHtml(str) {
    if (typeof(str) == "string"){
        try{
            var newStr = "";
            var nextCode = 0;
            for (var i = 0;i < str.length;i++){
                nextCode = str.charCodeAt(i);
                if (nextCode > 0 && nextCode < 128){
                    newStr += "&#"+nextCode+";";
                }
                else{
                    newStr += "?";
                }
             }
             return newStr;
        }
        catch(err){
        }
    }
    else{
        return str;
    }
}

Vous pouvez facilement le faire avec vanilla js.

Ajoutez simplement un nœud de texte au document. Il sera échappé par le navigateur.

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

(function(undefined){
    var charsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    };

    var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
    var replaceFn = function(tag){ return charsToReplace[tag] || tag; };

    var replaceRegF = function(replaceMap) {
        return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
    };
    var replaceFnF = function(replaceMap) {
        return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
    };

    String.prototype.htmlEscape = function(replaceMap) {
        if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
        return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
    };
})();

Aucune variable globale, une certaine optimisation de la mémoire. Usage:

"some<tag>and&symbol©".htmlEscape({'©': '&copy;'})

le résultat est:

"some<tag>and&symbol©"

2 méthodes simples qui ne nécessitent AUCUN JQUERY ...

Vous pouvez encoder tous les caractères de votre chaîne comme ceci:

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Ou tout simplement cibler les personnages principaux à se soucier &, les sauts de ligne, <, >, "et 'comme:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<p><b>What JavaScript Generated:</b></p>

<textarea id=test rows="3" cols="55"></textarea>

<p><b>What It Renders Too In HTML:</b></p>

<div id="testing">www.WHAK.com</div>

Exemple d'échappement JavaScript simple:

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}

function htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

fonctionne comme un charme

Cette réponse fournit les méthodes jQuery et JS normales, mais c'est la plus courte sans utiliser le DOM:

unescape(escape("It's > 20% less complicated this way."))

Chaîne échappée: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Si les espaces échappés vous dérangent, essayez:

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

Chaîne échappée: It%27s %3E 20%25 less complicated this way.

Malheureusement, la escape()fonction était obsolète dans JavaScript version 1.5 . encodeURI()ou encodeURIComponent()sont des alternatives, mais ils ignorent ', donc la dernière ligne de code se transformerait en ceci:

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

Tous les principaux navigateurs prennent toujours en charge le code court, et compte tenu du nombre d'anciens sites Web, je doute que cela changera bientôt.

ES6 un liner pour la solution de moustache.js

const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;','`': '&#x60;','=': '&#x3D;'})[s]);

Si vous enregistrez ces informations dans une base de données , il est incorrect d'échapper au HTML à l'aide d'un script côté client , cela doit être fait sur le serveur . Sinon, il est facile de contourner votre protection XSS.

Pour clarifier mon propos, voici un exemple utilisant l'une des réponses:

Supposons que vous utilisez la fonction escapeHtml pour échapper le HTML d'un commentaire dans votre blog, puis le publier sur votre serveur.

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

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

L'utilisateur pourrait:

• Modifiez les paramètres de la requête POST et remplacez le commentaire par du code javascript.
• Remplacez la fonction escapeHtml à l'aide de la console du navigateur.

Si l'utilisateur colle cet extrait dans la console, il contourne la validation XSS:

function escapeHtml(string){
   return string
}

Toutes les solutions sont inutiles si vous ne re-fuite empêcher, par exemple la plupart des solutions garderaient échapper &à &.

escapeHtml = function (s) {
    return s ? s.replace(
        /[&<>'"]/g,
        function (c, offset, str) {
            if (c === "&") {
                var substr = str.substring(offset, offset + 6);
                if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
                    // already escaped, do not re-escape
                    return c;
                }
            }
            return "&" + {
                "&": "amp",
                "<": "lt",
                ">": "gt",
                "'": "apos",
                '"': "quot"
            }[c] + ";";
        }
    ) : "";
};