Я создаю строку для вставки в таблицу с помощью jQuery, создавая строку html, т.е.
var row = "";
row += "<tr>";
row += "<td>Name</td>";
row += "<td><input value='"+data.name+"'/></td>";
row += "</tr>";
data.name - строка, возвращаемая вызовом ajax, который может содержать любые символы. Если он содержит одну кавычку, ', он разбивает HTML, определяя конец значения атрибута.
Как я могу гарантировать правильность отображения строки в браузере?
Вам просто нужно поменять символы ' на эквивалентный код символа объекта HTML:
data.name.replace(/'/g, "'");
В качестве альтернативы вы можете создать все это с помощью методов манипуляции JQuery DOM:
var row = $("<tr>").append("<td>Name</td><td></td>");
$("<input>", { value: data.name }).appendTo(row.children("td:eq(1)"));
На самом деле вам может понадобиться одна из этих двух функций (это зависит от контекста использования). Эти функции обрабатывают все виды строковых кавычек, а также защищают от синтаксиса HTML/XML.
quoteattr() для встраивания текста в HTML/XML:Функция quoteattr() используется в контексте, где результат не будет оцениваться javascript, но должен интерпретироваться синтаксическим анализатором XML или HTML, и он должен абсолютно исключать нарушение синтаксиса атрибута элемента.
Символы новой строки сохраняются при создании содержимого текстовых элементов. Однако, если вы генерируете значение атрибута, это назначенное значение будет нормализовано DOM, как только оно будет установлено, поэтому все пробелы (SPACE, TAB, CR, LF) будут сжаты, удаляя начальные и конечные пробелы и сокращение всех средних последовательностей пробелов в одном ПРОСТРАНСТВЕ.
Но есть исключение: символ CR будет сохранен и не будет считаться пробелом, только, если он представлен с помощью числовой ссылки на символ! Результат будет действительным для всех атрибутов элемента, за исключением атрибутов типа NMTOKEN или ID или NMTOKENS: наличие ссылочного CR сделает присвоенное значение недействительным для этих атрибутов (например, id = "..." атрибут элементов HTML): это значение, являющееся недействительным, будет игнорироваться DOM. Но в других атрибутах (типа CDATA) все символы CR, представленные числовой символьной ссылкой, будут сохранены и не нормализованы. Обратите внимание, что этот прием не будет работать для сохранения других пробелов (SPACE, TAB, LF), даже если они представлены NCR, поскольку нормализация всех пробелов (за исключением NCR в CR) является обязательной в всех атрибуты.
Обратите внимание, что эта функция сама по себе не выполняет нормализацию пробелов в HTML/XML, поэтому она остается безопасной при создании содержимого текстового элемента (не передавайте второй параметр preserveCR для такого случая).
Поэтому, если вы передадите необязательный второй параметр (значение по умолчанию будет обрабатываться так, как если бы он был ложным), и если этот параметр оценивается как истина, новые строки будут сохранены с использованием этого NCR, когда вы захотите сгенерировать буквальное значение атрибута, и этот атрибут будет типа CDATA (например, атрибут title= "..."), а не типа ID, IDLIST, NMTOKEN или NMTOKENS (например, атрибут id = "...").
function quoteattr(s, preserveCR) {
preserveCR = preserveCR ? ' ' : '\n';
return ('' + s) /* Forces the conversion to string. */
.replace(/&/g, '&') /* This MUST be the 1st replacement. */
.replace(/'/g, ''') /* The 4 other predefined entities, required. */
.replace(/"/g, '"')
.replace(/</g, '<')
.replace(/>/g, '>')
/*
You may add other replacements here for HTML only
(but it not necessary).
Or for XML, only if the named entities are defined in its DTD.
*/
.replace(/\r\n/g, preserveCR) /* Must be before the next replacement. */
.replace(/[\r\n]/g, preserveCR);
;
}
Предупреждение! Эта функция по-прежнему не проверяет исходную строку (которая в Javascript представляет собой неограниченный поток 16-битных кодовых единиц) на предмет ее действительности в файле, который должен быть допустимым источником простого текста и также как действительный источник для документа HTML/XML.
Обратите внимание, что эта функция, как она реализована (если она дополнена для исправления ограничений, отмеченных в приведенном выше предупреждении), может также безопасно использоваться для цитирования также содержимого буквального текстового элемента в HTML/XML (чтобы избежать некоторые интерпретируемые элементы HTML/XML из исходного значения строки), а не только содержимое буквального значения атрибута! Так что его лучше назвать quoteml(); имя quoteattr() сохранилось только по традиции.
Это случай в вашем примере:
data.value = "It just a \"sample\" <test>.\n\tTry & see yourself!";
var row = '';
row += '<tr>';
row += '<td>Name</td>';
row += '<td><input value="' + quoteattr(data.value) + '" /></td>';
row += '</tr>';
quoteattr(), использующая только API DOM:Альтернатива, если генерируемый вами HTML-код будет частью текущего HTML-документа, состоит в том, чтобы создавать каждый HTML-элемент индивидуально, используя методы документа DOM, так что вы можете устанавливать значения его атрибутов непосредственно через API DOM вместо вставка полного содержимого HTML с использованием свойства innerHTML одного элемента:
data.value = "It just a \"sample\" <test>.\n\tTry & see yourself!";
var row = document.createElement('tr');
var cell = document.createElement('td');
cell.innerText = 'Name';
row.appendChild(cell);
cell = document.createElement('td');
var input = document.createElement('input');
input.setAttribute('value', data.value);
cell.appendChild(input);
tr.appendChild(cell);
/*
The HTML code is generated automatically and is now accessible in the
row.innerHTML property, which you are not required to insert in the
current document.
But you can continue by appending tr into a 'tbody' element object, and then
insert this into a new 'table' element object, which ou can append or insert
as a child of a DOM object of your document.
*/
Обратите внимание, что эта альтернатива не пытается сохранить символы новой строки, присутствующие в data.value, потому что вы генерируете содержимое текстового элемента, а не значение атрибута. Если вы действительно хотите сгенерировать значение атрибута, сохраняя символы новой строки, используя , см. начало раздела 1 и код в quoteattr() выше.
escape() для встраивания в буквенную строку javascript/JSON:В других случаях вы будете использовать нижеприведенную функцию escape(), когда намереваетесь заключить в кавычки строку, которая будет частью сгенерированного фрагмента кода JavaScript, который вы также хотите сохранить (который может быть необязательно). также сначала должен быть проанализирован синтаксическим анализатором HTML/XML, в который может быть вставлен больший код javascript):
function escape(s) {
return ('' + s) /* Forces the conversion to string. */
.replace(/\\/g, '\\\\') /* This MUST be the 1st replacement. */
.replace(/\t/g, '\\t') /* These 2 replacements protect whitespaces. */
.replace(/\n/g, '\\n')
.replace(/\u00A0/g, '\\u00A0') /* Useful but not absolutely necessary. */
.replace(/&/g, '\\x26') /* These 5 replacements protect from HTML/XML. */
.replace(/'/g, '\\x27')
.replace(/"/g, '\\x22')
.replace(/</g, '\\x3C')
.replace(/>/g, '\\x3E')
;
}
Предупреждение! Этот исходный код не проверяет действительность закодированного документа как действительного простого текста. Однако он не должен никогда вызывать исключение (за исключением состояния нехватки памяти): исходные строки Javascript/JSON являются просто неограниченными потоками 16-битных кодовых единиц и не должны быть действительными в виде простого текста или не ограничено синтаксисом документа HTML/XML. Это означает, что код неполон, и его также следует заменить:
Обратите внимание, что 5 последних замен не являются действительно необходимыми. Но если вы их не включите, вам иногда потребуется использовать "хак" совместимости <![CDATA[ ... ]]> в некоторых случаях, например, для дальнейшего включения сгенерированного JavaScript в HTML или XML (см. пример ниже, где этот "хак" используется в элементе HTML <script>...</script>.
Функция escape() имеет то преимущество, что она не вставляет любую ссылку на символ HTML/XML, результат сначала будет интерпретирован Javascript, и он будет позже сохранять во время выполнения точную длину строки, когда полученная строка будет быть оценены движком JavaScript. Это избавляет вас от необходимости управлять смешанным контекстом в коде вашего приложения (см. последний раздел о них и о связанных с этим вопросах безопасности). В частности, потому что, если вы используете quoteattr() в этом контексте, javascript, оцененный и выполненный позже, должен будет явно обрабатывать ссылки на символы, чтобы перекодировать их, что не подходит. Случаи использования включают в себя:
var title = "It a \"title\"!";
var msg = "Both strings contain \"quotes\" & 'apostrophes'...";
setTimeout(
'__forceCloseDialog("myDialog", "' +
escape(title) + '", "' +
escape(msg) + '")',
2000);
var msg =
"It just a \"sample\" <test>.\n\tTry & see yourself!";
/* This is similar to the above, but this JavaScript code will be reinserted below: */
var scriptCode =
'alert("' +
escape(msg) + /* important here!, because part of a JS string literal */
'");';
/* First case (simple when inserting in a text element): */
document.write(
'<script type="text/javascript">' +
'\n//<![CDATA[\n' + /* (not really necessary but improves compatibility) */
scriptCode +
'\n//]]>\n' + /* (not really necessary but improves compatibility) */
'</script>');
/* Second case (more complex when inserting in an HTML attribute value): */
document.write(
'<span onclick="' +
quoteattr(scriptCode) + /* important here, because part of an HTML attribute */
'">Click here !</span>');
Во втором примере вы видите, что обе функции кодирования одновременно используются для части сгенерированного текста, встроенного в литералы JavasSript (используя escape()), с сгенерированным кодом JavaScript ( содержащий сгенерированный строковый литерал), который сам снова внедряется и перекодируется с использованием quoteattr(), поскольку этот код JavaScript вставляется в атрибут HTML (во втором случае).
Итак, в итоге,
quotattr() должна использоваться при генерации константы литерала атрибута HTML/XML, где окружающие кавычки добавляются извне в конкатенации для получения полного кода HTML/XML.escape() должна использоваться при генерации содержимого строкового константа JavaScript, где окружающие кавычки добавляются извне в конкатенации для получения полного кода HTML/XML.Эти функции безопасны только в этих строгих контекстах (т.е. только значения атрибутов HTML/XML для quoteattr() и только строковые литералы Javascript для escape()).
Существуют другие контексты, использующие различные механизмы цитирования и экранирования (например, строковые литералы SQL или строковые литералы Visual Basic, литералы регулярных выражений, или текстовые поля файлов данных CSV, или значения заголовков MIME), для которых каждый потребуется их собственная отдельная экранирующая функция использовала только в следующих контекстах:
quoteattr() или escape() будут безопасны или не изменят семантику экранированной строки, прежде чем проверять сначала, что синтаксис (соответственно) значений атрибутов HTML/XML или литералов строки JavaScript будет изначально понят и поддержан в этих контекстах.escape(), также является подходящим и изначально поддерживается в двух других контекстах строковых литералов, используемых в исходном коде программирования Java, или текстовых значений в данных JSON.Но обратное не всегда верно. Например:
eval() для декодирования тех сгенерированных строковых литералов, которые не были экранированы с использованием escape(), потому что эти другие строковые литералы могут содержать другие специальные символы, сгенерированные специально для этих других начальных контекстов, которые будут неправильно интерпретироваться Javascript, это может включать дополнительные побеги, такие как "\Uxxxxxxxx" или "\e", или "${var}" и "$$", или включение дополнительных операторов конкатенации, таких как ' + ", которые изменяют стиль цитирования, или из "прозрачных" разделителей, таких как "<!--" и "-->" или "<[DATA[" и "]]>" (которые могут быть найдены и безопасны в другом только сложном контексте, поддерживающем несколько синтаксисов экранирования: см. ниже последний абзац этого раздела о смешанных контекстах).eval() строковых литералов, которые были сгенерированы только для безопасного включения в литералы атрибутов HTML/XML с использованием quotteattr(), что не будет безопасным, поскольку контексты были неправильно смешаны.escape(), что не будет безопасным, потому что контексты также были неправильно смешаны.Если вы хотите декодировать или интерпретировать строковые литералы в контекстах, в которых декодированные результирующие строковые значения будут использоваться взаимозаменяемо и нечетко, без изменения в другом контексте, так называемых смешанных контекстах (включая, например, присвоение имен идентификаторам в HTML/XML с помощью строковых литералов на начальном этапе) с надежной кодировкой quotteattr(), присвоение имен программным переменным для Javascript из строк, изначально безопасно закодированных с помощью escape() и т.д.), вам необходимо подготовить и использовать новую функцию экранирования (которая также проверит правильность строкового значения перед его кодированием, отклонением или усечением/упрощением/фильтрацией), а также новой функцией декодирования (которая также тщательно избегает интерпретации допустимых, но небезопасных последовательностей, только принятых внутренне, но неприемлемых для небезопасных внешних источников), что также означает, что для декодирования источников данных JSON необходимо абсолютно исключить такую функцию декодирования, как eval() в javascript, для чего вам потребуется использовать более безопасный собственный JSON-декодер; ve JSON-декодер не будет интерпретировать допустимые последовательности Javascript, такие как включение разделителей в кавычках в буквальное выражение, операторы или последовательности, такие как "{$var}"), для обеспечения безопасности такого отображения!
Эти последние соображения о декодировании литералов в смешанных контекстах, которые были надежно закодированы только с помощью любого синтаксиса для передачи данных, чтобы быть безопасным только в более ограниченном единственном контексте, абсолютно необходимы для безопасности вашего приложения или веб-службы. Никогда не смешивайте эти контексты между местом кодирования и местом декодирования, если эти места не принадлежат одной и той же области безопасности (но даже в этом случае использование смешанных контекстов всегда очень опасно, это очень трудно точно отслеживать в своем коде.
По этой причине я рекомендую вам никогда не использовать и не предполагать смешанные контексты в любом месте вашего приложения: вместо этого напишите безопасную функцию кодирования и декодирования для единственного точного контекста, который имеет точные правила длины и допустимости для значений декодированной строки, и правила точной длины и допустимости строковых литералов в кодированной строке. Запретите эти смешанные контексты: для каждого изменения контекста используйте другую подходящую пару функций кодирования/декодирования (какая функция используется в этой паре зависит от того, какой контекст встроен в другой контекст; и от пары сопоставления функции также специфичны для каждой пары контекстов).
Это означает, что:
quoteattr(), вы должны '' 'не' '' предполагать, что он был закодирован с использованием других именованных объектов, значение которых будет зависеть от определенного DTD, определяющего его. Вы должны вместо этого инициализировать анализатор HTML/XML для поддержки только нескольких именованных символьных сущностей по умолчанию, сгенерированных quoteattr(), и, необязательно, числовых символьных сущностей (которые также безопасны в таком контексте: функция quoteattr() генерирует только несколько из них, но может генерировать больше этих числовых ссылок на символы, но не должно генерировать другие именованные объекты символов, которые не предопределены в DTD по умолчанию). Все другие именованные объекты должны быть отклонены вашим анализатором как недопустимые в исходном строковом литерале для декодирования. В качестве альтернативы вы получите более высокую производительность, определив функцию unquoteattr (которая будет отклонять любое присутствие буквенных кавычек в исходной строке, а также неподдерживаемых именованных сущностей).escape(), вы должны использовать безопасную функцию JavaScript unescape(), но не небезопасно Функция Javascript eval()!Ниже приведены примеры этих двух связанных функций безопасного декодирования.
unquoteattr() для анализа текста, встроенного в текстовые элементы HTML/XML или литералы значений атрибутов:function unquoteattr(s) {
/*
Note: this can be implemented more efficiently by a loop searching for
ampersands, from start to end of ssource string, and parsing the
character(s) found immediately after after the ampersand.
*/
s = ('' + s); /* Forces the conversion to string type. */
/*
You may optionally start by detecting CDATA sections (like
'<![CDATA[' ... ']]>'), whose contents must not be reparsed by the
following replacements, but separated, filtered out of the CDATA
delimiters, and then concatenated into an output buffer.
The following replacements are only for sections of source text
found *outside* such CDATA sections, that will be concatenated
in the output buffer only after all the following replacements and
security checkings.
This will require a loop starting here.
The following code is only for the alternate sections that are
not within the detected CDATA sections.
*/
/* Decode by reversing the initial order of replacements. */
s = s
.replace(/\r\n/g, '\n') /* To do before the next replacement. */
.replace(/[\r\n]/, '\n')
.replace(/ /g, '\n') /* These 3 replacements keep whitespaces. */
.replace(/[03];/g, '\n')
.replace(/	/g, '\t')
.replace(/>/g, '>') /* The 4 other predefined entities required. */
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, "'")
;
/*
You may add other replacements here for predefined HTML entities only
(but it not necessary). Or for XML, only if the named entities are
defined in *your* assumed DTD.
But you can add these replacements only if these entities will *not*
be replaced by a string value containing *any* ampersand character.
Do not decode the '&' sequence here !
If you choose to support more numeric character entities, their
decoded numeric value *must* be assigned characters or unassigned
Unicode code points, but *not* surrogates or assigned non-characters,
and *not* most C0 and C1 controls (except a few ones that are valid
in HTML/XML text elements and attribute values: TAB, LF, CR, and
NL='\x85').
If you find valid Unicode code points that are invalid characters
for XML/HTML, this function *must* reject the source string as
invalid and throw an exception.
In addition, the four possible representations of newlines (CR, LF,
CR+LF, or NL) *must* be decoded only as if they were '\n' (U+000A).
See the XML/HTML reference specifications !
*/
/* Required check for security! */
var found = /&[^;]*;?/.match(s);
if (found.length >0 && found[0] != '&')
throw 'unsafe entity found in the attribute literal content';
/* This MUST be the last replacement. */
s = s.replace(/&/g, '&');
/*
The loop needed to support CDATA sections will end here.
This is where you'll concatenate the replaced sections (CDATA or
not), if you have splitted the source string to detect and support
these CDATA sections.
Note that all backslashes found in CDATA sections do NOT have the
semantic of escapes, and are *safe*.
On the opposite, CDATA sections not properly terminated by a
matching ']]>' section terminator are *unsafe*, and must be rejected
before reaching this final point.
*/
return s;
}
Обратите внимание, что эта функция не анализирует окружающие кавычки, которые используются
окружить значения атрибута HTML. Эта функция может фактически декодировать любой текстовый элемент HTML/XML, возможно, содержащий буквенные кавычки, которые являются безопасными. Это ваша ответственность за анализ HTML-кода для извлечения строк в кавычках, используемых в атрибутах HTML/XML, и для удаления соответствующих разделителей кавычек перед вызовом функции unquoteattr().
unescape() для анализа текстового содержимого, встроенного в литералы Javascript/JSON:function unescape(s) {
/*
Note: this can be implemented more efficiently by a loop searching for
backslashes, from start to end of source string, and parsing and
dispatching the character found immediately after the backslash, if it
must be followed by additional characters such as an octal or
hexadecimal 7-bit ASCII-only encoded character, or an hexadecimal Unicode
encoded valid code point, or a valid pair of hexadecimal UTF-16-encoded
code units representing a single Unicode code point.
8-bit encoded code units for non-ASCII characters should not be used, but
if they are, they should be decoded into a 16-bit code units keeping their
numeric value, i.e. like the numeric value of an equivalent Unicode
code point (which means ISO 8859-1, not Windows 1252, including C1 controls).
Note that Javascript or JSON does NOT require code units to be paired when
they encode surrogates; and Javascript/JSON will also accept any Unicode
code point in the valid range representable as UTF-16 pairs, including
NULL, all controls, and code units assigned to non-characters.
This means that all code points in \U00000000..\U0010FFFF are valid,
as well as all 16-bit code units in \u0000..\uFFFF, in any order.
It up to your application to restrict these valid ranges if needed.
*/
s = ('' + s) /* Forces the conversion to string. */
/* Decode by reversing the initial order of replacements */
.replace(/\\x3E/g, '>')
.replace(/\\x3C/g, '<')
.replace(/\\x22/g, '"')
.replace(/\\x27/g, "'")
.replace(/\\x26/g, '&') /* These 5 replacements protect from HTML/XML. */
.replace(/\\u00A0/g, '\u00A0') /* Useful but not absolutely necessary. */
.replace(/\\n/g, '\n')
.replace(/\\t/g, '\t') /* These 2 replacements protect whitespaces. */
;
/*
You may optionally add here support for other numerical or symbolic
character escapes.
But you can add these replacements only if these entities will *not*
be replaced by a string value containing *any* backslash character.
Do not decode to any doubled backslashes here !
*/
/* Required check for security! */
var found = /\\[^\\])?/.match(s);
if (found.length > 0 && found[0] != '\\\\')
throw 'Unsafe or unsupported escape found in the literal string content';
/* This MUST be the last replacement. */
return s.replace(/\\\\/g, '\\');
}
Обратите внимание, что эта функция не анализирует окружающие кавычки, которые используются
окружать Javascript или JSON строки буквально. Это ваша ответственность разбирать исходный код Javascript или JSON для извлечения строковых литералов в кавычках и для удаления этих соответствующих разделителей кавычек перед вызовом функции unescape().
" = " or "
' = '
Примеры:
<div attr="Tim "The Toolman" Taylor"
<div attr='Tim "The Toolman" Taylor'
<div attr="Tim 'The Toolman' Taylor"
<div attr='Tim 'The Toolman' Taylor'
В строках JavaScript вы используете \, чтобы избежать символа кавычки:
var s = "Tim \"The Toolman\" Taylor";
var s = 'Tim \'The Toolman\' Taylor';
Итак, укажите ваши значения атрибутов с помощью "и используйте такую функцию:
function escapeAttrNodeValue(value) {
return value.replace(/(&)|(")|(\u00A0)/g, function(match, amp, quote) {
if (amp) return "&";
if (quote) return """;
return " ";
});
}
Мой ответ частично основан на Andy E, и я по-прежнему рекомендую читать то, что написал verdy_p, но здесь он
$("<a>", { href: 'very<script>\'b"ad' }).text('click me')[0].outerHTML
Отказ от ответственности: это ответ не на точный вопрос, а просто "как избежать атрибута"
Данные ответы кажутся довольно сложными, поэтому для моего случая использования я попробовал встроенный encodeURIComponent и decodeURIComponent и обнаружил, что они работали хорошо, а за комментарии этого не избежать ', но для этого вы можете использовать escape() и unescape() в unescape() методах вместо.
Я думаю, вы могли бы сделать:
var row = "";
row += "<tr>";
row += "<td>Name</td>";
row += "<td><input value=\""+data.name+"\"/></td>";
row += "</tr>";
Если вас беспокоит в data.name, который является существующей одинарной цитатой.
В лучшем случае вы можете создать элемент INPUT, а затем setValue(data.name) для него.
Используя Lodash:
const serialised = _.escape("Here a string that could break HTML");
// Add it into data-attr in HTML
<a data-value-serialised=" + serialised + " onclick="callback()">link</a>
// and then at JS where this value will be read:
function callback(e) {
$(e.currentTarget).data('valueSerialised'); // with a bit of help from jQuery
const originalString = _.unescape(serialised); // can be used as part of a payload or whatever.
}