Pregunta Escapar cadenas de HTML con jQuery


¿Alguien sabe de una manera fácil de escapar HTML de cadenas en jQuery? Necesito poder pasar una cadena arbitraria y tenerla escapada 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.


547
2017-08-24 02:52


origen


Respuestas:


Ya que estás usando jQuery, puedes simplemente configurar el elemento text propiedad:

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

391
2017-08-24 17:22



También hay la solución de mustache.js

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

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

530
2017-08-20 08:21



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


177
2017-12-17 10:28



Si escapas 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 deba hacer cosas como " a &quot;. Si la lista fuera lo suficientemente grande, 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 lo escapará para las URL, no para HTML.


57
2017-08-24 05:54



Escribí una pequeña función que hace esto. Solo escapa ", &, < y > (pero generalmente eso es todo lo que necesitas de todos modos). Es un poco más elegante que las soluciones propuestas anteriormente, ya que solo utiliza uno  .replace() para hacer toda la conversión (EDICION 2: La complejidad reducida del código hace que la función sea aún más pequeña y ordenada, si tiene curiosidad acerca del 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 simplemente Javascript, no jQuery usado.

Escapando / y ' también

Editar en respuesta a mklementEl comentario de

La función anterior se puede expandir 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 del /[...]/g) y como una entrada en el chr objeto. (EDICION 2: Acorté esta función tambié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 &#39; para apóstrofo (la entidad simbólica &apos; podría haberse usado en su lugar, está definido en XML, pero originalmente no estaba incluido en la especificación HTML y, por lo tanto, no podría 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 soportado que usar hexadecimal, pero parece que todavía no puedo encontrar la fuente para eso. (Y no puede haber muchos navegadores que no admitan las entidades hexadecimales).

Nota: Añadiendo / y ' a la lista de caracteres escapados no es tan útil, ya que no tienen ningún significado especial en HTML y no lo hacen necesitar ser escapado

Original escapeHtml Función

EDICION 2: La función original usó una variable (chr) para almacenar el objeto necesario para .replace() llamar de vuelta. Esta variable también necesitaba una función anónima adicional para delimitarla, haciendo que la función (innecesariamente) fuera 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, siéntase libre de agregar información y enlaces al respecto aquí.


35
2017-11-14 00:39



Lo suficientemente fácil de usar subrayado:

_.escape(string) 

Guion bajo es una biblioteca de utilidades que proporciona muchas funciones que js nativas no proporciona. También hay lodash que es la misma API que el guión bajo, pero se reescribió para ser más eficiente.


31
2017-09-12 05:30



Me doy cuenta de lo tarde que estoy en 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 citas deberían escaparse es si el contenido se pegará en línea con un atributo dentro de una cadena HTML. Es difícil para mí imaginar un caso en el que hacer esto sería un buen diseño.

Edición 2: si el rendimiento es crucial, la solución de mayor rendimiento (alrededor del 50%) sigue siendo una serie de reemplazos de expresiones regulares. Los navegadores modernos detectarán que las expresiones regulares no contienen operadores, solo una cadena, y colapsar todas ellas en una sola operación.


29
2018-03-01 22:55