Escapar de cadenas HTML con jQuery

¿Alguien sabe de una manera fácil de escapar de HTML de cadenas en jQuery ? Necesito poder pasar una cadena arbitraria y hacer que se escape correctamente para mostrarla en una página HTML (evitando ataques de inyección de JavaScript / HTML). Estoy seguro de que es posible extender jQuery para hacer esto, pero no sé lo suficiente sobre el marco en este momento para lograr esto.

Como está utilizando jQuery , puede establecer la textpropiedad del 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;

También existe la solución 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];
  });
}

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

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

Si está escapando para HTML, solo hay tres que puedo pensar que serían realmente necesarios:

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

Dependiendo de su caso de uso, es posible que también tenga que hacer cosas como "a ". Si la lista se volviera lo suficientemente grande, solo usaría una matriz:

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() solo se escapará para las URL, no para HTML.

Suficientemente fácil de usar subrayado:

_.escape(string) 

El subrayado es una biblioteca de utilidades que proporciona muchas características que no proporciona js nativo. También hay lodash, que es la misma API que el subrayado, pero fue reescrito para ser más eficiente .

Escribí una pequeña y pequeña función que hace esto. Sólo se escapa ", &, <y >(por lo general, pero eso es todo lo que necesita de todos modos). Es un poco más elegante que las soluciones propuestas anteriormente, ya que solo usa una .replace() para hacer toda la conversión. ( EDITAR 2: complejidad de código reducida que hace que la función sea aún más pequeña y ordenada, si tiene curiosidad sobre el código original, vea el final de esta respuesta).

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

Esto es Javascript simple, no se utiliza jQuery.

Escapando /y 'también

Edite en respuesta al comentario de mklement .

La función anterior se puede ampliar fácilmente para incluir cualquier carácter. Para especificar más caracteres para escapar, simplemente insértelos en la clase de caracteres en la expresión regular (es decir, dentro de /[...]/g) y como una entrada en el chrobjeto. ( EDIT 2: también acortó esta función, de la misma manera).

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

Tenga en cuenta el uso anterior de 'para apóstrofo (la entidad simbólica 'podría haberse utilizado en su lugar; está definida en XML, pero originalmente no se incluyó en la especificación HTML y, por lo tanto, podría no ser compatible con todos los navegadores. Ver: artículo de Wikipedia sobre codificaciones de caracteres HTML ) También recuerdo haber leído en alguna parte que usar entidades decimales es más ampliamente compatible que usar hexadecimal, pero parece que no puedo encontrar la fuente para eso ahora. (Y no puede haber muchos navegadores que no sean compatibles con las entidades hexadecimales).

Nota: Agregar /y 'a la lista de caracteres escapados no es tan útil, ya que no tienen ningún significado especial en HTML y no es necesario que se escapen.

escapeHtmlFunción original

EDIT 2: la función original utilizaba una variable ( chr) para almacenar el objeto necesario para la .replace()devolución de llamada. Esta variable también necesitaba una función anónima adicional para abarcarla, haciendo que la función (innecesariamente) sea un poco más grande y más compleja.

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

No he probado cuál de las dos versiones es más rápida. Si lo hace, no dude en agregar información y enlaces al respecto aquí.

Me doy cuenta de lo tarde que llego a esta fiesta, pero tengo una solución muy fácil que no requiere jQuery.

escaped = new Option(unescaped).innerHTML;

Editar: Esto no escapa a las comillas. El único caso en el que las comillas tendrían que escaparse es si el contenido se va a pegar en línea en un atributo dentro de una cadena HTML. Me resulta difícil imaginar un caso en el que hacerlo sea un buen diseño.

Edición 3: para la solución más rápida, verifique la respuesta anterior de Saram. Este es el más corto.

Aquí hay una función limpia y clara de JavaScript. Se escapará de texto como "unos pocos <muchos" a "unos pocos & lt; muchos".

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

Después de las últimas pruebas, puedo recomendar la solución javaScript (DOM) nativa compatible con el navegador más rápida y completamente compatible :

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

Si lo repite muchas veces, puede hacerlo con variables una vez preparadas:

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

Mira mi comparación de rendimiento final ( pregunta de pila ).

Prueba Underscore.string lib, funciona con jQuery.

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

salida:

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

He mejorado el ejemplo de bigote.js agregando el escapeHTML()método al objeto de cadena.

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

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

De esa manera es bastante fácil de usar. "Some <text>, more Text&Text".escapeHTML()

escape() y unescape() están destinados a codificar / decodificar cadenas para URL, no HTML.

En realidad, utilizo el siguiente fragmento para hacer el truco que no requiere ningún marco:

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

Si tiene underscore.js, use _.escape(más eficiente que el método jQuery publicado anteriormente):

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

Si va por la ruta de expresiones regulares, hay un error en el ejemplo anterior de tghw.

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

Este es un buen ejemplo seguro ...

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

Puedes hacerlo fácilmente con vanilla js.

Simplemente agregue un nodo de texto al documento. Será escapado por el navegador.

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

Sin variables globales, algo de optimización de memoria. Uso:

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

el resultado es:

"some<tag>and&symbol©"

2 métodos simples que NO requieren JQUERY ...

Puede codificar todos los caracteres en su cadena de esta manera:

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

O simplemente apuntar a los personajes principales que preocuparse &, saltos de línea, <, >, "y ', como:

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>

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

Funciona de maravilla

Esta respuesta proporciona los métodos jQuery y JS normales, pero esto es más corto sin usar el DOM:

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

Cadena escapada: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Si los espacios escapados te molestan, prueba:

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

Cadena escapada: It%27s %3E 20%25 less complicated this way.

Desafortunadamente, la escape()función fue obsoleta en JavaScript versión 1.5 . encodeURI()o encodeURIComponent()son alternativas, pero ignoran ', por lo que la última línea de código se convertiría en esto:

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

Todos los principales navegadores aún admiten el código corto, y dada la cantidad de sitios web antiguos, dudo que eso cambie pronto.

ES6 one liner para la solución de mustache.js

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

Si está guardando esta información en una base de datos , es incorrecto escapar de HTML utilizando un script del lado del cliente , esto debe hacerse en el servidor . De lo contrario, es fácil eludir su protección XSS.

Para aclarar mi punto, aquí hay un ejemplo usando una de las respuestas:

Digamos que está utilizando la función escapeHtml para escapar del Html de un comentario en su blog y luego publicarlo en su servidor.

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

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

El usuario podría:

• Edite los parámetros de solicitud POST y reemplace el comentario con código javascript.
• Sobrescriba la función escapeHtml usando la consola del navegador.

Si el usuario pega este fragmento en la consola, pasará por alto la validación XSS:

function escapeHtml(string){
   return string
}

Todas las soluciones son inútiles si no prevenir la re-escape, por ejemplo, la mayoría de las soluciones mantendrían escapar &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] + ";";
        }
    ) : "";
};