Экранирование строк HTML с помощью jQuery
605896 просмотра
24 ответа
Кто-нибудь знает простой способ избежать HTML из строк в jQuery ? Мне нужно иметь возможность передавать произвольную строку и правильно экранировать ее для отображения на странице HTML (предотвращая атаки с использованием JavaScript / HTML-инъекций). Я уверен, что для этого можно расширить jQuery, но в настоящий момент я недостаточно разбираюсь в фреймворке, чтобы этого добиться.
Автор: Page Источник Размещён: 17.05.2019 02:34Ответы (24)
415 плюса
Поскольку вы используете jQuery , вы можете просто установить text
свойство элемента :
// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";
// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after:
// <div class="someClass"><script>alert('hi!');</script></div>
// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value:
// <script>alert('hi!');</script>
Автор: travis
Размещён: 24.08.2008 05:22
556 плюса
Также есть решение от mustache.js
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escapeHtml (string) {
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
Автор: Tom Gruner
Размещён: 20.08.2012 08:21
179 плюса
$('<div/>').text('This is fun & stuff').html(); // "This is fun & stuff"
Источник: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
Автор: Henrik N Размещён: 17.12.2008 10:2859 плюса
Если вы переходите на HTML, я думаю, что есть только три, которые действительно необходимы:
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
В зависимости от вашего случая использования, вы можете также должны делать вещи , как "
к "
. Если бы список стал достаточно большим, я бы просто использовал массив:
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
encodeURIComponent()
будет избегать его только для URL, а не для HTML.
36 плюса
Я написал крошечную маленькую функцию, которая делает это. Он только убегает "
, &
, <
и >
(но , как правило, это все , что вам нужно в любом случае). Это немного более элегантно, чем ранее предложенные решения в том, что он использует только одно, .replace()
чтобы сделать все преобразования. ( РЕДАКТИРОВАТЬ 2: Сниженная сложность кода, делающая функцию еще меньше и удобнее, если вам интересно узнать об исходном коде, см. Конец этого ответа.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
Это простой Javascript, jQuery не используется.
Убегая /
и '
тоже
Отредактируйте в ответ на комментарий mklement .
Вышеуказанная функция может быть легко расширена для включения любого символа. Чтобы указать больше символов для экранирования, просто вставьте их как в класс символов в регулярном выражении (то есть внутри /[...]/g
), так и в виде записи в chr
объекте. ( РЕДАКТИРОВАТЬ 2: Аналогичным образом сократили эту функцию.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
Обратите внимание на вышеупомянутое использование '
для апострофа ( '
вместо этого можно было использовать символическую сущность - она определена в XML, но изначально не была включена в спецификацию HTML и поэтому могла поддерживаться не всеми браузерами. См. Статью Википедии о кодировках символов HTML). ). Я также вспоминаю, что где-то читал, что использование десятичных сущностей более широко поддерживается, чем использование шестнадцатеричных, но сейчас я не могу найти источник для этого. (И не может быть много браузеров, которые не поддерживают шестнадцатеричные сущности.)
Примечание. Добавление /
и '
в список экранированных символов не так уж и полезно, поскольку они не имеют никакого особого значения в HTML и не требуют экранирования.
Оригинальная escapeHtml
функция
РЕДАКТИРОВАНИЕ 2: Исходная функция использовала переменную ( chr
) для хранения объекта, необходимого для .replace()
обратного вызова. Эта переменная также нуждалась в дополнительной анонимной функции для ее расширения, что делало функцию (без необходимости) немного больше и сложнее.
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
Я не проверял, какая из двух версий быстрее. Если вы это сделаете, не стесняйтесь добавлять информацию и ссылки об этом здесь.
Автор: zrajm Размещён: 14.11.2012 12:3934 плюса
Достаточно легко использовать подчеркивание:
_.escape(string)
Underscore - это служебная библиотека, которая предоставляет множество функций, которые не предоставляет нативный js. Есть также lodash, который является тем же API, что и подчеркивание, но был переписан для большей производительности.
Автор: chovy Размещён: 12.09.2013 05:3032 плюса
Я понимаю, как поздно я на этой вечеринке, но у меня есть очень простое решение, которое не требует jQuery.
escaped = new Option(unescaped).innerHTML;
Изменить: это не избежать кавычек. Единственный случай, когда необходимо экранировать кавычки, - это если содержимое будет вставлено внутри атрибута в строке HTML. Мне трудно представить себе случай, когда это было бы хорошим дизайном.
Редактировать 2: Если производительность имеет решающее значение, решение с самой высокой производительностью (примерно на 50%) по-прежнему представляет собой серию регулярных выражений. Современные браузеры обнаружат, что регулярные выражения не содержат операторов, только строку, и свернут все в одну операцию.
Автор: Adam Leggett Размещён: 01.03.2016 10:5530 плюса
Вот простая и понятная функция JavaScript. Это будет экранировать текст, такой как «несколько <многие» в «несколько & lt; многие».
function escapeHtmlEntities (str) {
if (typeof jQuery !== 'undefined') {
// Create an empty div to use as a container,
// then put the raw text in and get the HTML
// equivalent out.
return jQuery('<div/>').text(str).html();
}
// No jQuery, so use string replace.
return str
.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
Автор: intrepidis
Размещён: 30.05.2012 11:46
26 плюса
После последних тестов я могу порекомендовать самое быстрое и полностью совместимое с браузером нативное решение javaScript (DOM):
function HTMLescape(html){
return document.createElement('div')
.appendChild(document.createTextNode(html))
.parentNode
.innerHTML
}
Если вы повторите это много раз, вы можете сделать это с подготовленными переменными:
//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);
//main work for each case
function HTMLescape(html){
DOMtext.nodeValue = html;
return DOMnative.innerHTML
}
Посмотрите на мое окончательное сравнение производительности ( вопрос стека ).
Автор: Saram Размещён: 09.07.2013 10:4424 плюса
Попробуйте Underscore.string lib, он работает с jQuery.
_.str.escapeHTML('<div>Blah blah blah</div>')
выход:
'<div>Blah blah blah</div>'
Автор: Nikita Koksharov
Размещён: 20.08.2012 07:36
15 плюса
Я улучшил пример mustache.js, добавив escapeHTML()
метод к строковому объекту.
var __entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
String.prototype.escapeHTML = function() {
return String(this).replace(/[&<>"'\/]/g, function (s) {
return __entityMap[s];
});
}
Таким образом, это довольно легко использовать "Some <text>, more Text&Text".escapeHTML()
15 плюса
escape()
и unescape()
предназначены для кодирования / декодирования строк для URL, а не HTML.
На самом деле, я использую следующий фрагмент, чтобы выполнить трюк, который не требует каких-либо рамок:
var escapedHtml = html.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
Автор: NicolasBernier
Размещён: 25.05.2012 12:39
10 плюса
Если у вас есть underscore.js, используйте _.escape
(более эффективно, чем метод jQuery, опубликованный выше):
_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe
Автор: ronnbot
Размещён: 04.09.2014 05:15
5 плюса
Если вы собираетесь использовать регулярное выражение, в приведенном выше примере с tghw есть ошибка.
<!-- WON'T WORK - item[0] is an index, not an item -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g,">"], [/"/g,
"""]]
for(var item in findReplace) {
escaped = escaped.replace(item[0], item[1]);
}
<!-- WORKS - findReplace[item[]] correctly references contents -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace) {
escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}
Автор: Wayne
Размещён: 21.05.2011 09:18
4 плюса
Это хороший безопасный пример ...
function escapeHtml(str) {
if (typeof(str) == "string"){
try{
var newStr = "";
var nextCode = 0;
for (var i = 0;i < str.length;i++){
nextCode = str.charCodeAt(i);
if (nextCode > 0 && nextCode < 128){
newStr += "&#"+nextCode+";";
}
else{
newStr += "?";
}
}
return newStr;
}
catch(err){
}
}
else{
return str;
}
}
Автор: amrp
Размещён: 31.10.2012 01:08
3 плюса
Вы можете легко сделать это с ванильным JS.
Просто добавьте текстовый узел документа. Это будет экранировано браузером.
var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)
Автор: raam86
Размещён: 29.01.2015 04:34
2 плюса
(function(undefined){
var charsToReplace = {
'&': '&',
'<': '<',
'>': '>'
};
var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
var replaceFn = function(tag){ return charsToReplace[tag] || tag; };
var replaceRegF = function(replaceMap) {
return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
};
var replaceFnF = function(replaceMap) {
return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
};
String.prototype.htmlEscape = function(replaceMap) {
if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
};
})();
Нет глобальных переменных, некоторая оптимизация памяти. Использование:
"some<tag>and&symbol©".htmlEscape({'©': '©'})
результат:
"some<tag>and&symbol©"
Автор: Gheljenor
Размещён: 13.05.2013 11:21
1 плюс
function htmlEscape(str) {
var stringval="";
$.each(str, function (i, element) {
alert(element);
stringval += element
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(' ', '-')
.replace('?', '-')
.replace(':', '-')
.replace('|', '-')
.replace('.', '-');
});
alert(stringval);
return String(stringval);
}
Автор: Katharapu Ramana
Размещён: 27.06.2012 03:15
1 плюс
2 простых метода, которые не требуют JQUERY ...
Вы можете закодировать все символы в вашей строке следующим образом:
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
Или просто цель главных героев , чтобы беспокоиться о том &
, разрывы строк, <
, >
, "
и , '
как:
function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}
var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';
test.value=encode(myString);
testing.innerHTML=encode(myString);
/*************
* \x26 is &ersand (it has to be first),
* \x0A is newline,
*************/
<p><b>What JavaScript Generated:</b></p>
<textarea id=test rows="3" cols="55"></textarea>
<p><b>What It Renders Too In HTML:</b></p>
<div id="testing">www.WHAK.com</div>
1 плюс
Простой JavaScript-экранирующий пример:
function escapeHtml(text) {
var div = document.createElement('div');
div.innerText = text;
return div.innerHTML;
}
escapeHtml("<script>alert('hi!');</script>")
// "<script>alert('hi!');</script>"
Автор: Andrew Luca
Размещён: 11.10.2017 09:52
0 плюса
function htmlDecode(t){
if (t) return $('<div />').html(t).text();
}
работает как шарм
Автор: d-_-b Размещён: 03.06.2013 02:480 плюса
Этот ответ предоставляет jQuery и обычные методы JS, но это самый короткий путь без использования DOM:
unescape(escape("It's > 20% less complicated this way."))
Экранированная строка: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.
Если сбежавшие места мешают вам, попробуйте:
unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))
Экранированная строка: It%27s %3E 20%25 less complicated this way.
К сожалению, эта escape()
функция устарела в JavaScript версии 1.5 . encodeURI()
или encodeURIComponent()
являются альтернативами, но они игнорируют '
, поэтому последняя строка кода будет выглядеть так:
decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))
Все основные браузеры все еще поддерживают короткий код, и, учитывая количество старых сайтов, я сомневаюсь, что это скоро изменится.
Автор: Cees Timmerman Размещён: 18.09.2012 08:45-2 плюса
Если вы сохраняете эту информацию в базе данных , неправильно экранировать HTML с помощью клиентского скрипта, это должно быть сделано на сервере . В противном случае легко обойти защиту XSS.
Чтобы прояснить мою точку зрения, вот пример, использующий один из ответов:
Допустим, вы используете функцию escapeHtml, чтобы убрать Html из комментария в своем блоге и затем опубликовать его на своем сервере.
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}
Пользователь может:
- Отредактируйте параметры запроса POST и замените комментарий кодом JavaScript.
- Перезаписать функцию escapeHtml с помощью консоли браузера.
Если пользователь вставит этот фрагмент в консоль, он пропустит проверку XSS:
function escapeHtml(string){
return string
}
Автор: Kauê Gimenes
Размещён: 06.03.2015 06:55
-2 плюса
Все решения бесполезны, если вы не помешаете повторному выходу, например, большинство решений будут продолжать &
выходить на &
.
escapeHtml = function (s) {
return s ? s.replace(
/[&<>'"]/g,
function (c, offset, str) {
if (c === "&") {
var substr = str.substring(offset, offset + 6);
if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
// already escaped, do not re-escape
return c;
}
}
return "&" + {
"&": "amp",
"<": "lt",
">": "gt",
"'": "apos",
'"': "quot"
}[c] + ";";
}
) : "";
};
Автор: C Nimmanant
Размещён: 26.05.2015 07:52
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- string В чем разница между строкой и строкой в ??C #?
- string Почему в Ruby нет реального StringBuffer или StringIO?
- string Преобразовать строку в перечисление в C #
- string Преобразование списка <Integer> в список <String>
- string Самый эффективный способ объединения строк?
- escaping Как избежать <и> внутри тегов <pre>
- escaping Как экранировать текст для регулярного выражения в Java
- escaping How to replace a character by a newline in Vim
- escaping Передать строку PHP в переменную JavaScript (и экранировать символы новой строки)