How do I properly escape quotes inside HTML attributes?

Question

I have a drop down on a web page which is breaking when the value string contains a quote.

The value is "asd, but in the DOM it always appears as an empty string.

I have tried every way I know to escape the string properly, but to no avail.

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

How do I render this on the page so the postback message contains the correct value?

I have to point out none of these answers say how to properly escape strings for use inside html attributes — reconbot, Feb 06 '13 at 18:46
@reconbot That would depend on how the HTML was being generated. The question was about quotes, so technically the accepted answer answers the question asked. As to how to properly escape strings, I don't have a link handy for the general case, but in PHP you'd use `htmlentities`. — Matt Browne, Feb 25 '13 at 16:50
possible duplicate of [how to have quotation marks in html input values](http://stackoverflow.com/questions/1593800/how-to-have-quotation-marks-in-html-input-values) — Ciro Santilli OurBigBook.com, Jul 28 '14 at 16:24
possible duplicate of [How to escape double quotes in title attribute](http://stackoverflow.com/questions/3752769/how-to-escape-double-quotes-in-title-attribute) — Beetle, Apr 09 '15 at 17:04
@Chris Can you remember what browser you were testing with when you found that those bottom two examples resulted in ""? — Mr Lister, Nov 10 '19 at 14:57

score 422 · Accepted Answer · edited May 21 '18 at 17:43

422

" is the correct way, the third of your tests:

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

You can see this working below, or on 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>

Alternatively, you can delimit the attribute value with single quotes:

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

edited May 21 '18 at 17:43

jpaugh

6,634
4
38
90

answered Oct 25 '10 at 14:11

Andy E

338,112
86
474
445

21

OP's fourth option, ", is also a valid way to escape quotes. There's a benefit to using numeric html entities over named entities, in that named entities do not cover all characters, while numeric entities do. The full HTML4 list is at http://www.w3.org/TR/html4/sgml/entities.html . – atk Oct 25 '10 at 14:42
46

@atk: yes, `"` maps to the same character as `"`, but there's no benefit of using the numeric option here because `"` is a defined named entity. `"` is also easier to remember. – Andy E Oct 25 '10 at 14:45
7

I agree. In this particular case, it's easier to use ". I intended only to point out the general case. – atk Oct 25 '10 at 17:05
I agree with atk's answer – Jeff Voss Mar 07 '14 at 00:22
I tested the use of the single quotes for the html attribute, specifically in native IE8 (as this was the main html validation problem). This worked. I would suggest doing a replace in the attribute value instead though, as suggested by the first option with the named entity. Thanks! – Ben Sewards Apr 22 '15 at 16:06
My Question is reverse. Howto make value=""a" displayed as "a instead of "a? – SIDU Jan 02 '17 at 23:02
4

@SIDU: change it to `"a` (replace the `&` with `&`) – Andy E Jan 03 '17 at 13:52
5

^ infinite loop – Omar Meky Feb 01 '17 at 17:36

aij · Answer 2 · 2016-01-19T16:40:52.567

Per HTML syntax, and even HTML5, the following are all valid options:

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

Note that if you are using XML syntax the quotes (single or double) are required.

Here's a jsfiddle showing all of the above working.

score 26 · Answer 3 · answered Jun 13 '13 at 12:36

26

If you are using PHP, try calling htmlentities or htmlspecialchars function.

answered Jun 13 '13 at 12:36

Lukasz Czerwinski

13,499
10
55
65

2

just using them may not be enough, try `````` - make sure you use it with ENT_QUOTES, this is safe: `````` , but in addition to ENT_QUOTES you should also add ENT_SUBSTITUTE and ENT_DISALLOWED, personally i've used this wrapper for years: ```function hhb_tohtml(string $str):string { return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }``` – hanshenrik Dec 23 '19 at 00:08
Don't understand this comment. – David Spector Jul 07 '23 at 19:06

score 11 · Answer 4 · answered Nov 27 '12 at 09:00

11

Another option is replacing double quotes with single quotes if you don't mind whatever it is. But I don't mention this one:

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

I mention this one:

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

In my case I used this solution.

answered Nov 27 '12 at 09:00

csonuryilmaz

1,715
24
24

14

But if the value contains single & double quotes, this will fail – Raptor Oct 10 '14 at 08:29
@Raptor I said if the value contains double quotes, convert them to single quotes. If the value contains single quotes, then it will be no problem. – csonuryilmaz Oct 12 '14 at 20:23

score 2 · Answer 5 · edited Jun 15 '21 at 22:09

2

If you are using JavaScript and Lodash, then you can use _.escape(), which escapes ", ', <, >, and &.

edited Jun 15 '21 at 22:09

Peter Mortensen

30,738
21
105
131

answered Nov 14 '19 at 23:33

Andrew

2,368
1
23
30

score 2 · Answer 6 · answered Nov 20 '11 at 02:12

You really should only allow untrusted data into a whitelist of good attributes like: align, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, coords, dir, face, height, hspace, ismap, lang, marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, scrolling, shape, span, summary, tabindex, title, usemap, valign, value, vlink, vspace, width

You really want to keep untrusted data out of javascript handlers as well as id or name attributes (they can clobber other elements in the DOM).

Also, if you are putting untrusted data into a SRC or HREF attribute, then its really a untrusted URL so you should validate the URL, make sure its NOT a javascript: URL, and then HTML entity encode.

More details on all of there here: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

I know this is late, but almost all of those attributes are deprecated in HTML4.01 and removed in 5. It may not matter now anyway, as there are better ways to protect yourself, just pointing it out. — trysis, Jun 15 '14 at 19:41
The question is asking about data with quote characters in it, not about untrusted data. — Quentin, May 16 '16 at 10:52

How do I properly escape quotes inside HTML attributes?

6 Answers6

Linked

Related