Blog de Blank: http://www.planabc.net/
El uso de atributos innerhtml es muy popular porque proporciona una forma simple de reemplazar completamente el contenido de un elemento HTML. Otro método es utilizar la API DOM Nivel 2 (RemoVeChild, CreateElement, AppendChild). Pero es obvio que usar InnerHTML para modificar el árbol DOM es una forma muy fácil y efectiva. Sin embargo, debe saber que InnerHTML tiene algunos problemas con los suyos:
Hay varias otras desventajas menores, que vale la pena mencionar:
Estoy más preocupado por los problemas de seguridad y memoria relacionados con el uso de propiedades InnerHTML. Obviamente, este no es un problema nuevo, y ya hay personas que han encontrado formas de evitar algunos de estos problemas.
Douglas Crockford escribe una función de limpieza que aborta algunas referencias de bucle causadas por las funciones de manejo de eventos de registro de elementos HTML y permite que el recolector de basura sea la memoria libre asociada con estos elementos HTML.
Eliminar etiquetas de script de cadenas HTML no es tan fácil como parece. Una expresión regular puede lograr el efecto deseado, aunque es difícil saber si todas las posibilidades están cubiertas. Aquí está mi solución:
/<script [^>]*> [/s/s]*? <// script [^>]*>/igg
Ahora, combinemos las dos técnicas en una función setInnerHtml separada y vinculemos la función setInnerHtml a yahoo.util.dom en yui:
Yahoo.util.dom.setinnerhtml = function (el, html) {
el = yahoo.util.dom.get (el);
if (! el || typeof html! == 'string') {
regresar nulo;
}
// abortar referencia circular
(función (o) {
var a = o.Attributes, i, l, n, c;
if (a) {
l = A.Length;
para (i = 0; i <l; i = 1) {
n = a [i] .name;
if (typeof o [n] === 'function') {
o [n] = nulo;
}
}
}
a = o.childnodes;
if (a) {
l = A.Length;
para (i = 0; i <l; i = 1) {
c = o.childnodes [i];
// Blear Nodes Nodos
argumentos.callee (c);
// Eliminar a todos los oyentes registrados con elementos a través de AddListener de YUI
Yahoo.util.event.purgeelement (c);
}
}
}) (El);
// Eliminar el script de la cadena HTML y establecer la propiedad InnerHTML
el.innerhtml = html.replace (/<script [^>]*> [/s/s]*? <// script [^>]*>/ig,);
// devuelve la referencia al primer nodo infantil
regresar el.firstchild;
};
Si esta función debería tener algo más o algo que falta en el Regex, hágamelo saber.
Obviamente, hay muchas otras formas de inyectar código malicioso en la página web. La función setInnerHTML solo puede normalizar el comportamiento de ejecución de las etiquetas <script> en todos los navegadores de grado A. Si está listo para inyectar el código HTML en el que no puede confiar, asegúrese de filtrar primero en el lado del servidor, y ya hay muchas bibliotecas que pueden hacer esto.
Texto original: "The Problem With Innerhtml" de Julien Lecomte "