innerhtml приложение

Блог Бланка: http://www.planabc.net/

Использование атрибутов Innerhtml очень популярно, потому что оно предоставляет простой способ полностью заменить содержание элемента HTML. Другим методом является использование API уровня DOM 2 (RemoveChild, Createlement, Appendchild). Но очевидно, что использование innerhtml для модификации дерева DOM является очень простым и эффективным способом. Тем не менее, вам нужно знать, что у Innerhtml есть некоторые проблемы с собственными:

Когда строка HTML содержит тег скрипта (<Script DEFER>… </script>), помеченная как DEFER, если свойство InnerHTML будет обработано, атака инъекции сценария будет вызвана для Internet Explorer. Установка Innerhtml уничтожит существующие HTML -элементы, которые имеют зарегистрированные обработчики событий, которые могут вызвать потенциальную утечку памяти в некоторых браузерах.

Есть несколько других небольших недостатков, которые стоит упомянуть:

Вы не можете получить ссылки на только что созданные элементы, вам нужно добавить код вручную, чтобы получить эти ссылки (с помощью DOM API). Вы не можете установить атрибуты innerhtml на все элементы HTML во всех браузерах (например, Internet Explorer не позволяет вам устанавливать атрибуты innerhtml на элементах строк таблицы).

Меня больше связана с проблемами безопасности и памяти, связанных с использованием свойств Innerhtml. Очевидно, что это не новая проблема, и уже есть люди, которые придумали способы обойти некоторые из этих проблем.

Дуглас Крокфорд пишет функцию очистки, которая прерывает некоторые циклы, вызванные функциями обработки событий регистрации элементов HTML, и позволяет коллекционеру мусора свободной памяти, связанной с этими элементами HTML.

Удалить теги сценария из строк HTML не так просто, как кажется. Регулярное выражение может достичь желаемого эффекта, хотя трудно понять, покрываются ли все возможности. Вот мое решение:

/<script [^>]*> [/s/s]*? <// script [^>]*>/ig

Теперь давайте объединим два метода в отдельную функцию setinnerhtml и связываем функцию setinnerhtml с yahoo.util.dom in yui:

Yahoo.util.dom.setinnerhtml = function (el, html) {

el = yahoo.util.dom.get (el);

if (! el || typeof html! == 'string') {

вернуть ноль;

}

// прерывать круговую ссылку

(function (o) {

var a = o.attributes, i, l, n, c;

if (a) {

l = A.Length;

for (i = 0; i <l; i = 1) {

n = a [i] .name;

if (typeof o [n] === 'function') {

o [n] = null;

}

}

}

a = o.childnodes;

if (a) {

l = A.Length;

for (i = 0; i <l; i = 1) {

c = O.ChildNodes [i];

// четкие детские узлы

Arguments.callee (c);

// Удалить всех слушателей, зарегистрированных в элементах через ui AddListener

Yahoo.util.event.purgeelement (c);

}

}

}) (el);

// Удалить скрипт с строки HTML и установить свойство innerhtml

el.innerhtml = html.replace (/<script [^>]*> [/s/s]*? <// script [^>]*>/ig,);

// вернуть ссылку на первый дочерний узел

вернуть El.firstchild;

};

Если в этой функции что -то еще или чего -то не хватает в включении, пожалуйста, дайте мне знать.

Очевидно, что есть много других способов вводить вредоносный код на веб -странице. Функция setinnerhtml может только нормализовать поведение выполнения тегов <cript> во всех браузерах A-класса. Если вы готовы внедрить HTML -код, которому вы не можете доверять, сначала обязательно отфильтроруйте на стороне сервера, и уже есть много библиотек, которые могут это сделать.

Оригинальный текст: «Проблема с innerhtml» Жюльена Лекомте "