Добавить html к элементу jQuery без запуска скриптов внутри html

Question

Я написал некоторый код, который берет строку html и удаляет из нее любой уродливый HTML, используя jQuery (см. Ранний прототип в этом вопросе ).Это работает довольно хорошо, но я наткнулся на проблему:

При использовании .append () для переноса html в div все элементы сценария в коде оцениваются и запускаются (см. этот ответ SO для объяснения, почему это происходит).Я не хочу этого, я просто хочу, чтобы они были удалены, но я могу справиться с этим позже, если они не будут запущены.

Я использую этот код:

var wrapper = $('<div/>').append($(html));

Вместо этого я попытался сделать это следующим образом:

var wrapper = $('<div>' + html + '</div>');

Но это просто вызывает ошибку «Отказано в доступе» в IE, которую исправляет функция append () (см. Ответ, на который я ссылался выше).

Я думаю, что я мог бы переписать свой код, чтобы не требовать обертки вокруг HTML, но я не уверен, и я хотел бы знать, возможно ли добавить HTML без запуска сценариев в нем,в любом случае.

Мои вопросы:

• Как мне обернуть кусок неизвестного html, не запуская в нем скрипты, желательно полностью их удалив?

• Должен ли я выбросить jQuery из окна и сделать это с помощью простых манипуляций с JavaScript и DOM?Поможет ли это?

Что я не пытаюсь сделать:

Я не пытаюсь создать какой-то уровень безопасности на стороне клиента.Я очень хорошо понимаю, что это было бы бессмысленно.

Обновление: предложение Джеймса

Джеймс предложил мне отфильтровать элементы сценария, но посмотрите на эти два примера (сначала оригинал ипредложение Джеймса):

jQuery("<p/>").append("<br/>hello<script type='text/javascript'>console.log('gnu!'); </script>there")

сохраняет текстовые узлы, но пишет gnu!

jQuery("<p/>").append(jQuery("<br/>hello<script type='text/javascript'>console.log('gnu!'); </script>there").not('script'))`

Не пишет gnu !, но также теряет текстовые узлы.

Обновление 2:

Джеймс обновил свой ответ, и я принял его.Смотрите мой последний комментарий к его ответу.

Answer 1

Как насчет удаления сценариев в первую очередь?

var wrapper = $('<div/>').append($(html).not('script'));

• Создать контейнер div
• Используйте обычный JS, чтобы поместить html в div
• Удалить все элементы скрипта в div

Предположим, что элементы сценария в html не вложены в другие элементы:

var wrapper = document.createElement('div');
wrapper.innerHTML = html;
$(wrapper).children().remove('script');

var wrapper = document.createElement('div');
wrapper.innerHTML = html;
$(wrapper).find('script').remove();

Это работает для случая, когда html - это просто текст, а html - это текст вне каких-либо элементов.

Answer 2

Ниже представлен альтернативный способ запрета выполнения скриптов в загруженном html:

function preventJS(html) {
     return html.replace(/<script(?=(\s|>))/i, '<script type="text/xml" ');
}

Подробно это описано здесь - JavaScript: Как предотвратить выполнение JavaScript внутри HTML, добавляемого в DOM . Возможно, это решение кому-нибудь пригодится.

Answer 3

Вы должны удалить элементы script:

var wrapper = $('<div/>').append($(html).remove("script"));

Вторая попытка:

node-validator можно использовать в браузере: https://github.com/chriso/node-validator

var str = sanitize(large_input_str).xss();

В качестве альтернативы, PHPJS имеет функцию strip_tags (на основе регулярных выражений / зла): http://phpjs.org/functions/strip_tags:535