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

267

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

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

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

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

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

html xhtml escaping Крис
источник

Как вы генерируете страницу?

SLaks 25.10.10

1

Что делать, если вы используете одинарные кавычки? <option value = '"asd'> test </ option>

Вим тен Бринк

5

Я должен указать, что ни один из этих ответов не говорит о том, как правильно экранировать строки для использования внутри атрибутов html

перенастроить

4

@reconbot Это будет зависеть от того, как генерировался HTML. Вопрос был о кавычках, поэтому технически принятый ответ отвечает на заданный вопрос. Что касается правильного экранирования строк, у меня нет ссылки, удобной для общего случая, но в PHP вы бы использовали htmlentities.

Мэтт Браун

возможный дубликат того, как иметь кавычки во входных значениях HTML

Ciro Santilli 法轮功冠状郝海东六四事件法轮功

344

" это правильный путь, третий из ваших тестов:

<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>

Энди Э
источник

17

Четвертая опция OP & # 34; также является допустимым способом экранирования кавычек. Преимущество использования числовых HTML-сущностей перед именованными сущностями заключается в том, что именованные сущности не охватывают все символы, в то время как числовые сущности это делают. Полный список HTML4 находится по адресу w3.org/TR/html4/sgml/entities.html .

atk

38

@atk: да, "сопоставляется с тем же символом, что и здесь ", но здесь нет преимущества использования числовой опции, потому что "это определенная именованная сущность. "также легче запомнить.

Энди Э

6

Я согласен. В этом конкретном случае проще использовать & quot ;. Я намеревался только указать на общий случай.

atk

4

@SIDU: изменить его &quot;a(заменить &с &)

Энди E

4

^ бесконечный цикл

Омар Меки

16

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

Лукаш Червинский
источник

2

просто их использования может быть недостаточно, попробуйте <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' />- убедитесь, что вы используете его с ENT_QUOTES, это безопасно: <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' /> но в дополнение к ENT_QUOTES вы должны также добавить ENT_SUBSTITUTE и ENT_DISALLOWED, лично я использовал эту оболочку годами:

function hhb_tohtml(string $str):string {     return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }

hanshenrik

12

В соответствии с синтаксисом 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

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

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

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

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

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

csonuryilmaz
источник

9

Но если значение содержит одинарные и двойные кавычки, это потерпит неудачу

Raptor

@Raptor Я сказал, что если значение содержит двойные кавычки, конвертируйте их в одинарные кавычки. Если значение содержит одинарные кавычки, то проблем не будет.

csonuryilmaz

1

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

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

Андрей
источник

0

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

Джим Манико
источник

3

Я знаю, что уже поздно, но почти все эти атрибуты устарели в HTML4.01 и удалены в 5. В любом случае это может не иметь значения, так как есть более эффективные способы защитить себя, просто указав на это.

trysis

1

Вопрос заключается в данных с символами кавычек, а не в ненадежных данных.

Квентин

-3

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

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

Miguel
источник

1

Ваше утверждение «Нет способа избежать кавычек в значении входного текста» совершенно неверно. Смотрите принятый ответ от 2010, который получил 276 голосов.

Квентин,

Извините, Квентин, но ЭТО ОТВЕТ говорит, что это невозможно. В нем говорится, что вы можете вставить HTML-кодированную двойную кавычку или использовать простую кавычку для разделения двойной кавычки, но невозможно вставить двойную кавычку в значение, определенное двойной кавычкой. Он предлагает альтернативу чему-то невозможному, что совпадает с тем, что я делаю

Мигель

Чтобы вставить двойную кавычку в значение, разделенное двойной кавычкой, используйте html-кодировку, как вы только что сказали.

Квентин

(Привет Квентин ... мы в сети) Я просто говорю, что значение этой строки не является двойной кавычкой, это & quot ;, это не то же самое.

Мигель

2

Если вы вставите & quot; в значение, и вы отправляете его, на сервере вы получаете 6 символов, от & до ;. Вы не получаете двойную цитату. Это не то же самое, и это не работает для меня

Мигель

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

Ответы: