Как правильно экранировать кавычки внутри атрибутов HTML? - PullRequest
Новая
       36

Как правильно экранировать кавычки внутри атрибутов HTML?

226 голосов
/ 25 октября 2010

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

Значение равно "asd, но в DOM всегда отображается как пустая строка.

Я пытался всеми способами, которые я знаю, правильно избежать строки, но безрезультатно.

<option value=""asd">test</option>
<option value="\"asd">test</option>
<option value="&quot;asd">test</option>
<option value="&#34;asd">test</option>

Есть идеи, как отобразить это на странице, чтобы сообщение обратной передачи содержало правильное значение?

Ответы [ 6 ]

305 голосов
/ 25 октября 2010

&quot; - правильный путь, третий из ваших тестов: 

<option value="&quot;asd">test</option>

Вы можете увидеть это ниже или на jsFiddle . 

alert($("option")[0].value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="&quot;asd">Test</option>
</select>

Кроме того, вы можете разделить значение атрибута одинарными кавычками: 

<option value='"asd'>test</option>
14 голосов
/ 13 июня 2013

Если вы используете PHP, попробуйте вызвать функцию htmlentities или htmlspecialchars.

9 голосов
/ 19 января 2016

Per Синтаксис HTML и даже HTML5 , допустимы следующие параметры: 

<option value="&quot;asd">test</option>
<option value="&#34;asd">test</option>
<option value='"asd'>test</option>
<option value='&quot;asd'>test</option>
<option value='&#34;asd'>test</option>
<option value=&quot;asd>test</option>
<option value=&#34;asd>test</option>

Обратите внимание, что если вы используете синтаксис XML , кавычки (одинарные или двойные) обязательны.

Вот jsfiddle, показывающий все вышеописанные рабочие .

7 голосов
/ 27 ноября 2012

Другой вариант - заменить двойные кавычки на одинарные, если вы не возражаете против того, что это такое. Но я не упоминаю этот: 

<option value='"asd'>test</option>

Я упоминаю об этом: 

<option value="'asd">test</option>

В моем случае я использовал это решение.

0 голосов
/ 10 сентября 2018

Нет способа избежать кавычек в значении входного текста ... но вы можете использовать javascript (или jquery): 

<input type="input" name="myinput" id="myinput" value="" />
<script>document.getElementById("myinput").value="This input has a [\"]";</script>
0 голосов
/ 20 ноября 2011

Вы действительно должны разрешить только ненадежные данные в белый список хороших атрибутов, таких как: align, alink, alt, bgcolor, border, cellpadding, cellspacing, класс, цвет, cols, colspan, координаты, dir, face, height, hspace,ismap, lang, marginheight, marginwidth, несколько, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, прокрутка, форма, диапазон, сводка, tabindex, title, usemap, valign, значение, vlink, vspace,width

Вы действительно хотите сохранить ненадежные данные в обработчиках javascript, а также в атрибутах id или name (они могут перекрыть другие элементы в DOM).

Кроме того, если вы помещаете ненадежные данныев атрибут SRC или HREF, то это действительно ненадежный URL, поэтому вы должны проверить URL, убедиться, что это НЕ javascript: URL, а затем кодировать HTML-сущность.

Подробнее обо всем этом здесь: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

...