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

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

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

Я старался изо всех сил, как я знаю, избежать этой строки, но безрезультатно.

<option value=""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>

Вы можете увидеть это работает ниже, или на 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>

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

В соответствии с синтаксисом 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, показывающий все вышеперечисленное .

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

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

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

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

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

Если вы используете Javascript и Lodash, то вы можете использовать _.escape (), который экранирует ", ', <,> и &.

Смотрите здесь: https://lodash.com/docs/#escape

Вы действительно должны разрешить только ненадежные данные в белый список хороших атрибутов, таких как: 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

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

<input type="input" name="myinput" id="myinput" value="" />
<script>document.getElementById("myinput").value="This input has a [\"]";</script>