How do I properly escape quotes inside HTML attributes?

Question 1

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?

Question 2

How are you generating the page?

Question 3

What if you use single quotes? <option value='"asd'>test</option>

Question 4

I have to point out none of these answers say how to properly escape strings for use inside html attributes

Question 5

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

Question 6

possible duplicate of how to have quotation marks in html input values

Question 7

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

Question 8

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 w3.org/TR/html4/sgml/entities.html .

Question 9

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

Question 10

I agree. In this particular case, it's easier to use ". I intended only to point out the general case.

Question 11

@SIDU: change it to &quot;a (replace the & with &)

Question 12

^ infinite loop

Question 13

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.

Question 14

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

Question 15

just using them may not be enough, try <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' /> - make sure you use it with ENT_QUOTES, this is safe: <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' /> , 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); }

Question 16

Don't understand this comment.

Question 17

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.

Question 18

But if the value contains single & double quotes, this will fail

Question 19

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

Question 20

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

Question 21

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, and 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 it’s really a untrusted URL, so you should validate the URL. Make sure it’s 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

Question 22

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.

Question 23

The question is asking about data with quote characters in it, not about untrusted data.

Question 24

The www.owasp.org link is broken: "404 - Not Found"

Andy E 346k86 gold badges482 silver badges452 bronze badges · Accepted Answer · 2010-10-25 14:11:06Z

446

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

Share

Improve this answer

edited May 21, 2018 at 17:43

jpaugh's user avatar

jpaugh

7,1845 gold badges46 silver badges94 bronze badges

answered Oct 25, 2010 at 14:11

Andy E's user avatar

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

atk

atk Over a year ago

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 w3.org/TR/html4/sgml/entities.html .

2010年10月25日T14:42:26.44Z+00:00

Andy E

Andy E Over a year ago

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

2010年10月25日T14:45:08.653Z+00:00

atk

atk Over a year ago

I agree. In this particular case, it's easier to use ". I intended only to point out the general case.

2010年10月25日T17:05:48.72Z+00:00

Andy E

Andy E Over a year ago

@SIDU: change it to &quot;a (replace the & with &)

2017年01月03日T13:52:57.617Z+00:00

Omar Meky

Omar Meky Over a year ago

^ infinite loop

2017年02月01日T17:36:55.583Z+00:00

|

CollectivesTM on Stack Overflow

How do I properly escape quotes inside HTML attributes?

6 Answers 6

8 Comments

Comments

2 Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

6 Answers 6

8 Comments

Comments

2 Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related