Кто-нибудь знает простой способ избежать HTML из строк в jQuery ? Мне нужно иметь возможность передавать произвольную строку и правильно экранировать ее для отображения на странице HTML (предотвращая атаки с использованием JavaScript / HTML-инъекций). Я уверен, что для этого можно расширить jQuery, но на данный момент я недостаточно разбираюсь в фреймворке, чтобы этого добиться.
javascript
jquery
string
escaping
страница
источник
источник
Ответы:
Поскольку вы используете jQuery , вы можете просто установить
text
свойство элемента :источник
$(element2).attr("some-attr", $(element1).html());
См. этот пример: jsbin.com/atibig/1/editТакже есть решение от mustache.js
источник
'
отображается на объект в десятичном формате, тогда как/
используется шестнадцатеричный формат.\n
на<br>
?Источник: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
источник
attr()
метод jQuery (по крайней мере с 1.8.3) выполняет свою собственную кодировку, так что незакодированные строки могут передаваться напрямую ; Например:$('<div/>').attr('test-attr', '\'Tis "fun" & stuff')[0].outerHTML
$('<div/>')
создает новыйdiv
элемент, который не присоединен к DOM. Так что это не изменит существующие элементы. Это немного сбивает с толку, как jQuery использует одну и ту же$()
функцию как для поиска элементов ($('div')
), так и для их создания, а также для некоторых других вещей, кроме… :)Если вы переходите на HTML, я думаю, что есть только три, которые действительно необходимы:
В зависимости от вашего случая использования, вы можете также должны делать вещи , как
"
к"
. Если бы список стал достаточно большим, я бы просто использовал массив:encodeURIComponent()
будет избегать его только для URL, а не для HTML.источник
var
чтобы объявитьitem
локально; в любом случае, не используйтеfor … in
цикл при циклическом просмотре массива!for
Вместо этого используйте обычный цикл. О, и этоencodeURIComponent
не такescapeURIComponent
.é
; Вот список html-сущностей для справки: w3schools.com/tags/ref_entities.aspДостаточно легко использовать подчеркивание:
Underscore - это служебная библиотека, которая предоставляет множество функций, которые не предоставляет нативный js. Есть также lodash, который является тем же API, что и подчеркивание, но был переписан для большей производительности.
источник
Я написал крошечную функцию, которая делает это. Он только убегает
"
,&
,<
и>
(но , как правило, это все , что вам нужно в любом случае). Это немного более элегантно, чем ранее предложенные решения в том, что он использует только одно,.replace()
чтобы сделать все преобразования. ( РЕДАКТИРОВАТЬ 2: Снижение сложности кода, что делает функцию еще меньше и удобнее, если вам интересно узнать об исходном коде, см. Конец этого ответа.)Это простой Javascript, jQuery не используется.
Убегая
/
и'
тожеОтредактируйте в ответ на комментарий mklement .
Вышеуказанная функция может быть легко расширена для включения любого символа. Чтобы указать больше символов для экранирования, просто вставьте их как в класс символов в регулярном выражении (то есть внутри
/[...]/g
), так и в виде записи вchr
объекте. ( РЕДАКТИРОВАТЬ 2: Точно так же сократил эту функцию.)Обратите внимание на вышеупомянутое использование
'
для апострофа ('
вместо этого можно было использовать символическую сущность - она определена в XML, но изначально не была включена в спецификацию HTML и поэтому могла поддерживаться не всеми браузерами. См. Статью Википедии о кодировках символов HTML). ). Я также вспоминаю, что где-то читал, что использование десятичных сущностей более широко поддерживается, чем использование шестнадцатеричных, но сейчас я не могу найти источник для этого. (И не может быть много браузеров, которые не поддерживают шестнадцатеричные сущности.)Примечание. Добавление
/
и'
в список экранированных символов не так уж и полезно, поскольку они не имеют никакого особого значения в HTML и не требуют экранирования.Оригинальная
escapeHtml
функцияРЕДАКТИРОВАНИЕ 2: Исходная функция использовала переменную (
chr
) для хранения объекта, необходимого для.replace()
обратного вызова. Эта переменная также нуждалась в дополнительной анонимной функции для ее расширения, что делало функцию (без необходимости) немного больше и сложнее.Я не проверял, какая из двух версий быстрее. Если вы это сделаете, не стесняйтесь добавлять информацию и ссылки об этом здесь.
источник
mustache.js
иunderscore.js
делать? Говоря о последнем: он распознает только числовые объекты (представляющие'
и/
'), в заглавной шестнадцатеричной форме, когда не экранирует. Таким образом, текст ускользнул вmustache.js
- который с любопытством использует смесь гекса. и десятичные форматы - не будут правильно удалены вunderscore.js
. Интересно, как другие популярные библиотеки справляются с этим.'
есть какая-то зарезервированная функция в XML (и, следовательно, XHTML, я так понимаю?), Поэтому у XML (но не HTML) есть именованная сущность'
. Точно, почему или каким образом это «зарезервировано», я не знаю. - Косые черты - это особые URL-адреса, но это на самом деле не гарантирует их включение в экранирующий HTML (поскольку кодирование URL-адреса является чем-то совершенно другим).'
: правильно: безопасное использование только в XHTML ; прямо из уст краудсорсинга - подчеркиваю: «(...) чтение с помощью соответствующего HTML- процессора, (...) использование« или ссылки на собственные объекты могут не поддерживаться (...) »- на практике : современные браузеры поддерживают его даже в HTML . Re регистр в шестнадцатеричных числах. (тот же источник; выделение мое): «Символ x должен быть строчным в документах XML. […] hhhh может смешивать прописные и строчные буквы, хотя прописные буквы - это обычный стиль ». Оставляет нас удивляться, кто решил закодировать слэши; возможно на самом деле просто путаница между кодировкой URI и HTML?/
не нужно, но кодирование'
все еще кажется полезным для безопасной обработки случая, когда закодированная строка используется в качестве значения атрибута, заключенного в одинарные кавычки .Я понимаю, как поздно я на этой вечеринке, но у меня есть очень простое решение, которое не требует jQuery.
Изменить: Это не избежать кавычек. Единственный случай, когда необходимо экранировать кавычки, - это если содержимое будет вставлено внутри атрибута в строке HTML. Мне трудно представить себе случай, когда это было бы хорошим дизайном.
Изменить 3: Для быстрого решения, проверьте ответ выше от Сарам. Этот самый короткий.
источник
<
и>
, экранировать кавычки также не имеет смысла, если только целью сгенерированного контента не является переход в атрибут.Вот простая и понятная функция JavaScript. Это будет экранировать текст, такой как «несколько <многие» в «несколько & lt; многие».
источник
После последних тестов я могу порекомендовать самое быстрое и полностью совместимое с браузером нативное решение javaScript (DOM):
Если вы повторите это много раз, вы можете сделать это с подготовленными переменными:
Посмотрите на мое окончательное сравнение производительности ( вопрос стека ).
источник
var p = document.createElement('p'); p.textContent = html; return p.innerHTML;
textContent
функция поддерживается только Chrome 1+, Firefox 2, IE9, Opera 9.64 и Safari 3 (последние два аннотированы «возможно раньше»). Это, таким образом, нарушило бы требование OP «полностью совместимо с браузерами».p.innerText = html; return p.innerHTML
Попробуйте Underscore.string lib, он работает с jQuery.
вывод:
источник
_.escape()
полезности.Я улучшил пример mustache.js, добавив
escapeHTML()
метод к строковому объекту.Таким образом, это довольно легко использовать
"Some <text>, more Text&Text".escapeHTML()
источник
__entityMap
в функцию локальной области видимости. И завернул все это вif (typeof String.prototype.escapeHTML !== 'function'){...}
escape()
иunescape()
предназначены для кодирования / декодирования строк для URL, а не HTML.На самом деле, я использую следующий фрагмент, чтобы выполнить трюк, который не требует каких-либо рамок:
источник
"
s, то вам нужно добавить хотя бы'
и `` к драке. Они нужны только для данных строковых тегов внутри элементов в html. Для самих данных html (внешних тегов) требуются только первые 3.Если у вас есть underscore.js, используйте
_.escape
(более эффективно, чем метод jQuery, опубликованный выше):источник
Если вы собираетесь использовать регулярное выражение, в приведенном выше примере с tghw есть ошибка.
источник
Это хороший безопасный пример ...
источник
Вы можете легко сделать это с ванильным JS.
Просто добавьте текстовый узел документа. Это будет экранировано браузером.
источник
Нет глобальных переменных, некоторая оптимизация памяти. Применение:
результат:
источник
2 простых метода, которые не требуют JQUERY ...
Вы можете закодировать все символы в вашей строке следующим образом:
Или просто цель главных героев , чтобы беспокоиться о том
&
, разрывы строк<
,>
,"
и ,'
как:источник
Простой JavaScript-экранирующий пример:
источник
источник
работает как шарм
источник
Этот ответ предоставляет jQuery и обычные методы JS, но это самый короткий путь без использования DOM:
Экранированная строка:
It%27s%20%3E%2020%25%20less%20complicated%20this%20way.
Если сбежавшие места мешают вам, попробуйте:
Экранированная строка:
It%27s %3E 20%25 less complicated this way.
К сожалению, эта
escape()
функция устарела в JavaScript версии 1.5 .encodeURI()
илиencodeURIComponent()
являются альтернативами, но они игнорируют'
, поэтому последняя строка кода будет выглядеть так:Все основные браузеры все еще поддерживают короткий код, и, учитывая количество старых сайтов, я сомневаюсь, что это скоро изменится.
источник
ES6 один лайнер для решения от mustache.js
источник
Если вы сохраняете эту информацию в базе данных , неправильно экранировать HTML с помощью клиентского скрипта, это должно быть сделано на сервере . В противном случае легко обойти защиту XSS.
Чтобы прояснить мою точку зрения, вот пример, использующий один из ответов:
Допустим, вы используете функцию escapeHtml, чтобы убрать Html из комментария в своем блоге и затем опубликовать его на своем сервере.
Пользователь может:
Если пользователь вставит этот фрагмент в консоль, он пропустит проверку XSS:
источник
Все решения бесполезны, если вы не помешаете повторному выходу, например, большинство решений будут продолжать
&
выходить на&
.источник