Escaping di stringhe HTML con jQuery

Qualcuno sa un modo semplice per sfuggire all'HTML dalle stringhe in jQuery ? Devo essere in grado di passare una stringa arbitraria e farla sfuggire correttamente per la visualizzazione in una pagina HTML (evitando attacchi di iniezione JavaScript / HTML). Sono sicuro che è possibile estendere jQuery per farlo, ma al momento non so abbastanza del framework per farlo.

Dato che stai usando jQuery , puoi semplicemente impostare la textproprietà dell'elemento :

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

C'è anche la soluzione da 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"

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

Se stai scappando per HTML, ce ne sono solo tre che posso pensare che sarebbe davvero necessario:

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

A seconda del caso d'uso, si potrebbe anche bisogno di fare cose come "a ". Se l'elenco diventasse abbastanza grande, utilizzerei solo un array:

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() lo sfuggirà solo per gli URL, non per HTML.

Abbastanza facile da usare il trattino basso:

_.escape(string) 

Underscore è una libreria di utilità che fornisce molte funzionalità che js nativo non fornisce. C'è anche lodash che è la stessa API del trattino basso ma è stato riscritto per essere più performante.

Ho scritto una piccola funzione che fa questo. Sfugge solo ", &, <e >(ma di solito questo è tutto quello che in ogni caso bisogno). È leggermente più elegante delle soluzioni proposte in precedenza in quanto ne utilizza solo una .replace() per fare tutta la conversione. ( EDIT 2: complessità del codice ridotta che rende la funzione ancora più piccola e più ordinata, se sei curioso del codice originale vedi fine di questa risposta.)

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

Questo è Javascript semplice, non utilizzato jQuery.

Escaping /e 'troppo

Modifica in risposta al commento di mklement .

La funzione sopra può essere facilmente espansa per includere qualsiasi carattere. Per specificare più caratteri da scappare, è sufficiente inserirli entrambi nella classe di caratteri nell'espressione regolare (ovvero all'interno di /[...]/g) e come una voce chrnell'oggetto. ( EDIT 2: abbreviata anche questa funzione, allo stesso modo.)

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

Nota l'uso sopra di 'per apostrofo (l'entità simbolica 'potrebbe essere stata usata invece - è definita in XML, ma originariamente non era inclusa nelle specifiche HTML e potrebbe quindi non essere supportata da tutti i browser. Vedi: Articolo di Wikipedia sulle codifiche di caratteri HTML ). Ricordo anche di aver letto da qualche parte che l'uso di entità decimali è più ampiamente supportato rispetto all'uso di esadecimali, ma non riesco a trovare l'origine per quello ora. (E non ci possono essere molti browser là fuori che non supportano le entità esadecimali.)

Nota: aggiungere /e 'all'elenco dei caratteri di escape non è poi così utile, poiché non hanno alcun significato speciale in HTML e non devono essere sottoposti a escape.

escapeHtmlFunzione originale

EDIT 2: la funzione originale utilizzava una variabile ( chr) per memorizzare l'oggetto necessario per il .replace()callback. Questa variabile necessitava anche di una funzione anonima aggiuntiva per la sua portata, rendendola (inutilmente) un po 'più grande e complessa.

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

Non ho testato quale delle due versioni sia più veloce. In tal caso, sentiti libero di aggiungere informazioni e collegamenti al riguardo qui.

Mi rendo conto di quanto sono in ritardo per questa festa, ma ho una soluzione molto semplice che non richiede jQuery.

escaped = new Option(unescaped).innerHTML;

Modifica: questo non sfugge alle virgolette. L'unico caso in cui è necessario eseguire l'escape delle virgolette è se il contenuto verrà incollato in linea in un attributo all'interno di una stringa HTML. È difficile per me immaginare un caso in cui fare questo sarebbe un buon design.

Modifica 3: per la soluzione più veloce, controlla la risposta sopra da Saram. Questo è il più corto.

Ecco una funzione JavaScript pulita e chiara. Sfuggirà a testi come "pochi <molti" in "pochi & molti".

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

Dopo gli ultimi test, posso consigliare la soluzione javaScript (DOM) nativa più veloce e completamente compatibile con browser :

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

Se lo ripeti più volte puoi farlo con variabili una volta preparate:

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

Guarda il mio confronto finale delle prestazioni ( domanda sullo stack ).

Prova Underscore.string lib, funziona con jQuery.

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

produzione:

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

Ho migliorato l'esempio mustache.js aggiungendo il escapeHTML()metodo all'oggetto stringa.

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

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

In questo modo è abbastanza facile da usare "Some <text>, more Text&Text".escapeHTML()

escape()e unescape()intendono codificare / decodificare stringhe per URL, non HTML.

In realtà, uso il seguente frammento per fare il trucco che non richiede alcun framework:

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

Se hai underscore.js, usa _.escape(più efficiente del metodo jQuery pubblicato sopra):

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

Se stai seguendo la rotta regex, c'è un errore nell'esempio sopra riportato.

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

Questo è un bell'esempio sicuro ...

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

Puoi farlo facilmente con js alla vaniglia.

Aggiungi semplicemente un nodo di testo al documento. Sarà evaso dal browser.

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

Nessuna variabile globale, qualche ottimizzazione della memoria. Uso:

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

il risultato è:

"some<tag>and&symbol©"

2 metodi semplici che richiedono NO JQUERY ...

Puoi codificare tutti i caratteri nella tua stringa in questo modo:

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

O semplicemente indirizzare i personaggi principali di cui preoccuparsi &, interruzioni di linea, <, >, "e 'come:

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>

Esempio di escape JavaScript semplice:

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

funziona come un fascino

Questa risposta fornisce i metodi jQuery e JS normali, ma questa è la più breve senza usare il DOM:

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

Stringa con escape: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Se gli spazi di escape ti danno fastidio, prova:

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

Stringa con escape: It%27s %3E 20%25 less complicated this way.

Sfortunatamente, la escape()funzione era obsoleta in JavaScript versione 1.5 . encodeURI()o encodeURIComponent()sono alternative, ma ignorano ', quindi l'ultima riga di codice si trasformerebbe in questo:

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

Tutti i principali browser supportano ancora il codice funzione e, dato il numero di vecchi siti Web, dubito che cambierà presto.

ES6 un liner per la soluzione da moustache.js

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

Se stai salvando queste informazioni in un database , è sbagliato sfuggire all'HTML usando uno script sul lato client , questo dovrebbe essere fatto nel server . Altrimenti è facile bypassare la protezione XSS.

Per chiarire il mio punto, ecco un esempio usando una delle risposte:

Diciamo che stai usando la funzione escapeHtml per sfuggire all'Html da un commento nel tuo blog e quindi pubblicarlo sul tuo server.

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

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

L'utente potrebbe:

• Modifica i parametri della richiesta POST e sostituisci il commento con il codice javascript.
• Sovrascrivi la funzione escapeHtml utilizzando la console del browser.

Se l'utente incolla questo frammento nella console, ignorerebbe la convalida XSS:

function escapeHtml(string){
   return string
}

Tutte le soluzioni sono inutili se non prevenire una nuova fuga, ad esempio, la maggior parte delle soluzioni avrebbero continuato la fuga &a &.

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