How do I properly escape quotes inside HTML attributes?

302
votes

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?

6
htmlxhtmlescaping
How are you generating the page? – SLaks
What if you use single quotes? <option value='"asd'>test</option> – Wim ten Brink
I have to point out none of these answers say how to properly escape strings for use inside html attributes – reconbot
@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
possible duplicate of how to have quotation marks in html input values – Ciro Santilli 新疆再教育营六四事件法轮功郝海东

6 Answers

382
votes

&quot; 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>
24
votes

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

19
votes

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.

8
votes

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.

3
votes

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

1
votes

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