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    lt option value   asd  gt test lt  option gt   lt option value    asd  gt test lt  option gt   lt option value   amp quot asd  gt test lt  option gt   lt option value   amp  34 asd  gt test lt  option gt    How do I render this on the page so the postback message contains the correct value

User · Answer

If you are using PHP  try calling htmlentities or htmlspecialchars function

User · Answer

amp quot  is the correct way  the third of your tests    lt option value   amp quot asd  gt test lt  option gt    You can see this working below  or on jsFiddle    x000D   x000D  alert    option   0  value   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select gt  x000D     lt option value   amp quot asd  gt Test lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Alternatively  you can delimit the attribute value with single quotes    lt option value   asd  gt test lt  option gt

User · Answer

Another option is replacing double quotes with single quotes if you don t mind whatever it is  But I don t mention this one    lt option value   asd  gt test lt  option gt    I mention this one    lt option value   asd  gt test lt  option gt    In my case I used this solution

User · Answer

If you are using Javascript and Lodash  then you can use   escape    which escapes        lt      and  amp    See here  https   lodash com docs  escape

User · Answer

Per HTML syntax  and even HTML5  the following are all valid options    lt option value   amp quot asd  gt test lt  option gt   lt option value   amp  34 asd  gt test lt  option gt   lt option value   asd  gt test lt  option gt   lt option value   amp quot asd  gt test lt  option gt   lt option value   amp  34 asd  gt test lt  option gt   lt option value  amp quot asd gt test lt  option gt   lt option value  amp  34 asd gt test lt  option gt    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

User · Answer

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

[html] How do I properly escape quotes inside HTML attributes?

Examples related to html

Examples related to xhtml

Examples related to escaping