aplicación innerhtml

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:

Cuando una cadena HTML contiene una etiqueta de script (<Script Defer> ... </script>) marcada como diferida, si la propiedad interna se maneja incorrectamente, un ataque de inyección de script se causará en Internet Explorer. La configuración de InnerHTML destruirá los elementos HTML existentes que tienen controladores de eventos registrados, lo que puede causar posibles fugas de memoria en algunos navegadores.

Hay varias otras desventajas menores, que vale la pena mencionar:

No puede obtener referencias a los elementos que acaba de crear, debe agregar el código manualmente para obtener esas referencias (usando API DOM). No puede establecer atributos InnerHTML en todos los elementos HTML en todos los navegadores (por ejemplo, Internet Explorer no le permite establecer atributos innerHTML en elementos de fila de una tabla).

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 "