Échapper aux chaînes HTML avec jQuery

assez facile à utiliser underscore:

_.escape(string) 

Underscore est une bibliothèque utilitaire qui fournit beaucoup de fonctionnalités que JS native ne fournit pas. Il y a aussi lodash qui est la même API que underscore mais qui a été réécrite pour être plus performant.

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

escaped = new Option(unescaped).innerHTML;

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

Edit 2: si la performance est cruciale, la plus haute performance solution (environ 50%) est encore une série de regex remplace. Les navigateurs modernes détecteront que les expressions régulières ne contiennent aucun opérateur, juste une chaîne de caractères, et les effondreront toutes en une seule opération.

Voici une fonction JavaScript propre et claire. Il échappera à des textes tels que "quelques-uns < beaucoup" en "quelques-uns < beaucoup".

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

Essayer Trait De Soulignement.string lib, il fonctionne avec jQuery.

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

sortie:

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

après les derniers tests je peux recommander le plus rapide et complètement cross browser compatible JavaScript natif (DOM) solution:

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 préparées une fois:

//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 mon dernier spectacle comparaison ( "1519150920 pile" question ).

j'ai amélioré la moustache.js exemple ajouter la méthode escapeHTML() à l'objet string.

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 des URLs, pas HTML.

en fait, j'utilise l'extrait suivant pour faire le tour qui ne nécessite pas de 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 affichée ci-dessus):

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

si vous suivez la route regex, 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]]);
}

c'est un bel exemple de sécurité...

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.

il suffit d'ajouter un noeud de texte le document. Il sera remplacé 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));
    };
})();

pas de variables globales, optimisation de la mémoire. Usage:

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

résultat:

"some<tag>and&symbol©"

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

2 méthodes simples qui ne nécessitent pas de JQUERY...

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

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

Ou tout simplement cible les personnages principaux à vous inquiéter au sujet de & , 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>

pur exemple D'échappement JavaScript:

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 htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

fonctionne comme un charme

Cette réponse fournit le jQuery et normal JS méthodes, mais c'est plus court, sans l'utilisation de 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 ennuient, 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 fonction escape() était dépréciée dans la version JavaScript 1.5 . encodeURI() ou encodeURIComponent() sont des solutions de rechange, mais ils l'ignorent ' , de sorte que la dernière ligne de code serait à son tour tenu de ce:

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

tous les principaux navigateurs prennent encore en charge le code court, et compte tenu du nombre d'anciens sites web, Je doute que cela va changer bientôt.

si vous enregistrez ces informations dans une base de données , son erreur pour échapper HTML en utilisant un côté client script, cela doit être fait dans le serveur . Sinon, il est facile de contourner votre protection XSS.

pour clarifier mon point, voici un exemple en utilisant l'une des réponses:

disons que vous utilisez la fonction escapeHtml pour échapper au Html de un commentaire dans votre blog et ensuite le poster 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:

• Modifier les paramètres de la requête POST et remplacer le Commentaire par le code javascript.
• remplace la fonction escapeHtml à l'aide de la console du navigateur.

si l'utilisateur collait cet extrait dans la console, il contournerait la validation XSS:

function escapeHtml(string){
   return string
}

toutes les solutions sont inutiles si vous n'empêchez pas la ré-évasion, par exemple la plupart des solutions continueraient à é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] + ";";
        }
    ) : "";
};