How do I escape a string inside JavaScript code inside an onClick handler

Question

Maybe I m just thinking about this too hard  but I m having a problem figuring out what escaping to use on a string in some JavaScript code inside a link s onClick handler  Example    lt a href     onclick  SelectSurveyItem   lt  itemid  gt      lt  itemname  gt     return false   gt Select lt  a gt    The  lt  itemid  gt  and  lt  itemname  gt  are where template substitution occurs  My problem is that the item name can contain any character  including single and double quotes  Currently  if it contains single quotes it breaks the JavaScript code   My first thought was to use the template language s function to JavaScript-escape the item name  which just escapes the quotes  That will not fix the case of the string containing double quotes which breaks the HTML of the link  How is this problem normally addressed  Do I need to HTML-escape the entire onClick handler   If so  that would look really strange since the template language s escape function for that would also HTMLify the parentheses  quotes  and semicolons     This link is being generated for every result in a search results page  so creating a separate method inside a JavaScript tag is not possible  because I d need to generate one per result   Also  I m using a templating engine that was home-grown at the company I work for  so toolkit-specific solutions will be of no use to me

User · Answer

Is the answers here that you can t escape quotes using JavaScript and that you need to start with escaped strings   Therefore   There s no way of JavaScript being able to handle the string  Marge said  I d look that was  to Peter  and you need your data be cleaned before offering it to the script

User · Answer

I have faced this problem as well  I made a script to convert single quotes into escaped double quotes that won t break the HTML   function noQuote text        var newtext           for  var i   0  i  lt  text length  i              if  text i                        newtext                            else               newtext    text i                       return newtext

User · Answer

Use hidden spans  one each for each of the parameters  lt  itemid  gt  and  lt  itemname  gt  and write their values inside them   For example  the span for  lt  itemid  gt  would look like  lt span id  itemid  style  display none  gt  lt  itemid  gt  lt  span gt  and in the javascript function SelectSurveyItem to pick the arguments from these spans  innerHTML

User · Answer

If it s going into an HTML attribute  you ll need to both HTML-encode  as a minimum   gt  to  amp gt   lt  to  amp lt and   to  amp quot   it  and escape single-quotes  with a backslash  so they don t interfere with your javascript quoting    Best way to do it is with your templating system  extending it  if necessary   but you could simply make a couple of escaping encoding functions and wrap them both around any data that s going in there   And yes  it s perfectly valid  correct  even  to HTML-escape the entire contents of your HTML attributes  even if they contain javascript

User · Answer

Use the Microsoft Anti-XSS library which includes a JavaScript encode

User · Answer

First  it would be simpler if the onclick handler was set this way    lt a id  someLinkId href     gt Select lt  a gt   lt script type  text javascript  gt    document getElementById  someLinkId   onClick       function           SelectSurveyItem   lt  itemid  gt      lt  itemname  gt     return false           lt  script gt    Then itemid and itemname need to be escaped for JavaScript  that is    becomes     etc     If you are using Java on the server side  you might take a look at the class StringEscapeUtils from jakarta s common-lang  Otherwise  it should not take too long to write your own  escapeJavascript  method

User · Answer

Depending on the server-side language  you could use one of these    NET 4 0  string result   System Web HttpUtility JavaScriptStringEncode  jsString     Java  import org apache commons lang StringEscapeUtils       String result   StringEscapeUtils escapeJavaScript jsString     Python  import json result   json dumps jsString    PHP   result   strtr  jsString  array        gt                gt               gt                                             r    gt     r     n    gt     n        Ruby on Rails   lt    escape javascript jsString    gt

User · Answer

Another interesting solution might be to do this    lt a href     itemid   lt  itemid  gt   itemname   lt  itemname  gt   onclick  SelectSurveyItem this itemid  this itemname   return false   gt Select lt  a gt    Then you can use a standard HTML-encoding on both the variables  without having to worry about the extra complication of the javascript quoting   Yes  this does create HTML that is strictly invalid  However  it is a valid technique  and all modern browsers support it   If it was my  I d probably go with my first suggestion  and ensure the values are HTML-encoded and have single-quotes escaped

User · Answer

Any good templating engine worth its salt will have an  escape quotes  function  Ours  also home-grown  where I work  also has a function to escape quotes for javascript  In both cases  the template variable is then just appended with  esc or  js esc  depending on which you want  You should never output user-generated content to a browser that hasn t been escaped  IMHO

User · Answer

Use the Microsoft Anti-XSS library which includes a JavaScript encode

User · Answer

Another interesting solution might be to do this    lt a href     itemid   lt  itemid  gt   itemname   lt  itemname  gt   onclick  SelectSurveyItem this itemid  this itemname   return false   gt Select lt  a gt    Then you can use a standard HTML-encoding on both the variables  without having to worry about the extra complication of the javascript quoting   Yes  this does create HTML that is strictly invalid  However  it is a valid technique  and all modern browsers support it   If it was my  I d probably go with my first suggestion  and ensure the values are HTML-encoded and have single-quotes escaped

User · Answer

Try avoid using string-literals in your HTML and use JavaScript to bind JavaScript events   Also  avoid  href    unless you really know what you re doing  It breaks so much usability for compulsive middleclickers  tab opener     lt a id  tehbutton  href  somewhereToGoWithoutWorkingJavascript com  gt Select lt  a gt    My JavaScript library of choice just happens to be jQuery    lt script type  text javascript  gt    lt  --  lt   CDATA  jQuery function            tehbutton   click function            SelectSurveyItem   lt  itemid  gt      lt  itemname  gt             return false                  gt -- gt  lt  script gt    If you happen to be rendering a list of links like that  you may want to do this    lt a id  link 1  href  foo  gt Bar lt  a gt   lt a id  link 2  href  foo2  gt Baz lt  a gt    lt script type  text javascript  gt     jQuery function             var l     1  Bar    2  Baz               l  each function k v                  link     v 0    click function                    SelectSurveyItem v 0  v 1                    return false                                      lt  script gt

User · Answer

First  it would be simpler if the onclick handler was set this way    lt a id  someLinkId href     gt Select lt  a gt   lt script type  text javascript  gt    document getElementById  someLinkId   onClick       function           SelectSurveyItem   lt  itemid  gt      lt  itemname  gt     return false           lt  script gt    Then itemid and itemname need to be escaped for JavaScript  that is    becomes     etc     If you are using Java on the server side  you might take a look at the class StringEscapeUtils from jakarta s common-lang  Otherwise  it should not take too long to write your own  escapeJavascript  method

User · Answer

Use the Microsoft Anti-XSS library which includes a JavaScript encode

User · Answer

Try avoid using string-literals in your HTML and use JavaScript to bind JavaScript events   Also  avoid  href    unless you really know what you re doing  It breaks so much usability for compulsive middleclickers  tab opener     lt a id  tehbutton  href  somewhereToGoWithoutWorkingJavascript com  gt Select lt  a gt    My JavaScript library of choice just happens to be jQuery    lt script type  text javascript  gt    lt  --  lt   CDATA  jQuery function            tehbutton   click function            SelectSurveyItem   lt  itemid  gt      lt  itemname  gt             return false                  gt -- gt  lt  script gt    If you happen to be rendering a list of links like that  you may want to do this    lt a id  link 1  href  foo  gt Bar lt  a gt   lt a id  link 2  href  foo2  gt Baz lt  a gt    lt script type  text javascript  gt     jQuery function             var l     1  Bar    2  Baz               l  each function k v                  link     v 0    click function                    SelectSurveyItem v 0  v 1                    return false                                      lt  script gt

User · Answer

Is the answers here that you can t escape quotes using JavaScript and that you need to start with escaped strings   Therefore   There s no way of JavaScript being able to handle the string  Marge said  I d look that was  to Peter  and you need your data be cleaned before offering it to the script

User · Answer

Declare separate functions in the  lt head gt  section and invoke those in your onClick method  If you have lots you could use a naming scheme that numbers them  or pass an integer in in your onClicks and have a big fat switch statement in the function

User · Answer

Use hidden spans  one each for each of the parameters  lt  itemid  gt  and  lt  itemname  gt  and write their values inside them   For example  the span for  lt  itemid  gt  would look like  lt span id  itemid  style  display none  gt  lt  itemid  gt  lt  span gt  and in the javascript function SelectSurveyItem to pick the arguments from these spans  innerHTML

User · Answer

If it s going into an HTML attribute  you ll need to both HTML-encode  as a minimum   gt  to  amp gt   lt  to  amp lt and   to  amp quot   it  and escape single-quotes  with a backslash  so they don t interfere with your javascript quoting    Best way to do it is with your templating system  extending it  if necessary   but you could simply make a couple of escaping encoding functions and wrap them both around any data that s going in there   And yes  it s perfectly valid  correct  even  to HTML-escape the entire contents of your HTML attributes  even if they contain javascript

User · Answer

Declare separate functions in the  lt head gt  section and invoke those in your onClick method  If you have lots you could use a naming scheme that numbers them  or pass an integer in in your onClicks and have a big fat switch statement in the function

User · Answer

Use the Microsoft Anti-XSS library which includes a JavaScript encode

User · Answer

Declare separate functions in the  lt head gt  section and invoke those in your onClick method  If you have lots you could use a naming scheme that numbers them  or pass an integer in in your onClicks and have a big fat switch statement in the function

User · Answer

In JavaScript you can encode single quotes as   x27  and double quotes as   x22   Therefore  with this method you can  once you re inside the  double or single  quotes of a JavaScript string literal  use the  x27  x22 with impunity without fear of any embedded quotes  breaking out  of your string     xXX is for chars  lt  127  and  uXXXX for Unicode  so armed with this knowledge you can create a robust JSEncode function for all characters that are out of the usual whitelist   For example    lt a href     onclick  SelectSurveyItem   lt   JSEncode itemid    gt      lt   JSEncode itemname    gt     return false   gt Select lt  a gt

User · Answer

Another interesting solution might be to do this    lt a href     itemid   lt  itemid  gt   itemname   lt  itemname  gt   onclick  SelectSurveyItem this itemid  this itemname   return false   gt Select lt  a gt    Then you can use a standard HTML-encoding on both the variables  without having to worry about the extra complication of the javascript quoting   Yes  this does create HTML that is strictly invalid  However  it is a valid technique  and all modern browsers support it   If it was my  I d probably go with my first suggestion  and ensure the values are HTML-encoded and have single-quotes escaped

User · Answer

I have faced this problem as well  I made a script to convert single quotes into escaped double quotes that won t break the HTML   function noQuote text        var newtext           for  var i   0  i  lt  text length  i              if  text i                        newtext                            else               newtext    text i                       return newtext

User · Answer

Another interesting solution might be to do this    lt a href     itemid   lt  itemid  gt   itemname   lt  itemname  gt   onclick  SelectSurveyItem this itemid  this itemname   return false   gt Select lt  a gt    Then you can use a standard HTML-encoding on both the variables  without having to worry about the extra complication of the javascript quoting   Yes  this does create HTML that is strictly invalid  However  it is a valid technique  and all modern browsers support it   If it was my  I d probably go with my first suggestion  and ensure the values are HTML-encoded and have single-quotes escaped

User · Answer

Any good templating engine worth its salt will have an  escape quotes  function  Ours  also home-grown  where I work  also has a function to escape quotes for javascript  In both cases  the template variable is then just appended with  esc or  js esc  depending on which you want  You should never output user-generated content to a browser that hasn t been escaped  IMHO

User · Answer

Try avoid using string-literals in your HTML and use JavaScript to bind JavaScript events   Also  avoid  href    unless you really know what you re doing  It breaks so much usability for compulsive middleclickers  tab opener     lt a id  tehbutton  href  somewhereToGoWithoutWorkingJavascript com  gt Select lt  a gt    My JavaScript library of choice just happens to be jQuery    lt script type  text javascript  gt    lt  --  lt   CDATA  jQuery function            tehbutton   click function            SelectSurveyItem   lt  itemid  gt      lt  itemname  gt             return false                  gt -- gt  lt  script gt    If you happen to be rendering a list of links like that  you may want to do this    lt a id  link 1  href  foo  gt Bar lt  a gt   lt a id  link 2  href  foo2  gt Baz lt  a gt    lt script type  text javascript  gt     jQuery function             var l     1  Bar    2  Baz               l  each function k v                  link     v 0    click function                    SelectSurveyItem v 0  v 1                    return false                                      lt  script gt

User · Answer

First  it would be simpler if the onclick handler was set this way    lt a id  someLinkId href     gt Select lt  a gt   lt script type  text javascript  gt    document getElementById  someLinkId   onClick       function           SelectSurveyItem   lt  itemid  gt      lt  itemname  gt     return false           lt  script gt    Then itemid and itemname need to be escaped for JavaScript  that is    becomes     etc     If you are using Java on the server side  you might take a look at the class StringEscapeUtils from jakarta s common-lang  Otherwise  it should not take too long to write your own  escapeJavascript  method

User · Answer

Use hidden spans  one each for each of the parameters  lt  itemid  gt  and  lt  itemname  gt  and write their values inside them   For example  the span for  lt  itemid  gt  would look like  lt span id  itemid  style  display none  gt  lt  itemid  gt  lt  span gt  and in the javascript function SelectSurveyItem to pick the arguments from these spans  innerHTML

User · Answer

In JavaScript you can encode single quotes as   x27  and double quotes as   x22   Therefore  with this method you can  once you re inside the  double or single  quotes of a JavaScript string literal  use the  x27  x22 with impunity without fear of any embedded quotes  breaking out  of your string     xXX is for chars  lt  127  and  uXXXX for Unicode  so armed with this knowledge you can create a robust JSEncode function for all characters that are out of the usual whitelist   For example    lt a href     onclick  SelectSurveyItem   lt   JSEncode itemid    gt      lt   JSEncode itemname    gt     return false   gt Select lt  a gt

User · Answer

Try avoid using string-literals in your HTML and use JavaScript to bind JavaScript events   Also  avoid  href    unless you really know what you re doing  It breaks so much usability for compulsive middleclickers  tab opener     lt a id  tehbutton  href  somewhereToGoWithoutWorkingJavascript com  gt Select lt  a gt    My JavaScript library of choice just happens to be jQuery    lt script type  text javascript  gt    lt  --  lt   CDATA  jQuery function            tehbutton   click function            SelectSurveyItem   lt  itemid  gt      lt  itemname  gt             return false                  gt -- gt  lt  script gt    If you happen to be rendering a list of links like that  you may want to do this    lt a id  link 1  href  foo  gt Bar lt  a gt   lt a id  link 2  href  foo2  gt Baz lt  a gt    lt script type  text javascript  gt     jQuery function             var l     1  Bar    2  Baz               l  each function k v                  link     v 0    click function                    SelectSurveyItem v 0  v 1                    return false                                      lt  script gt

User · Answer

First  it would be simpler if the onclick handler was set this way    lt a id  someLinkId href     gt Select lt  a gt   lt script type  text javascript  gt    document getElementById  someLinkId   onClick       function           SelectSurveyItem   lt  itemid  gt      lt  itemname  gt     return false           lt  script gt    Then itemid and itemname need to be escaped for JavaScript  that is    becomes     etc     If you are using Java on the server side  you might take a look at the class StringEscapeUtils from jakarta s common-lang  Otherwise  it should not take too long to write your own  escapeJavascript  method

User · Answer

In JavaScript you can encode single quotes as   x27  and double quotes as   x22   Therefore  with this method you can  once you re inside the  double or single  quotes of a JavaScript string literal  use the  x27  x22 with impunity without fear of any embedded quotes  breaking out  of your string     xXX is for chars  lt  127  and  uXXXX for Unicode  so armed with this knowledge you can create a robust JSEncode function for all characters that are out of the usual whitelist   For example    lt a href     onclick  SelectSurveyItem   lt   JSEncode itemid    gt      lt   JSEncode itemname    gt     return false   gt Select lt  a gt

User · Answer

I faced the same problem  and I solved it in a tricky way  First make global variables  v1  v2  and v3  And in the onclick  send an indicator  1  2  or 3 and in the function check for 1  2  3 to put the v1  v2  and v3 like   onclick  myfun 1   onclick  myfun 2   onclick  myfun 3    function myfun var        if  var   1          alert v1        if  var   2          alert v2        if  var   3          alert v3

User · Answer

If it s going into an HTML attribute  you ll need to both HTML-encode  as a minimum   gt  to  amp gt   lt  to  amp lt and   to  amp quot   it  and escape single-quotes  with a backslash  so they don t interfere with your javascript quoting    Best way to do it is with your templating system  extending it  if necessary   but you could simply make a couple of escaping encoding functions and wrap them both around any data that s going in there   And yes  it s perfectly valid  correct  even  to HTML-escape the entire contents of your HTML attributes  even if they contain javascript

User · Answer

If it s going into an HTML attribute  you ll need to both HTML-encode  as a minimum   gt  to  amp gt   lt  to  amp lt and   to  amp quot   it  and escape single-quotes  with a backslash  so they don t interfere with your javascript quoting    Best way to do it is with your templating system  extending it  if necessary   but you could simply make a couple of escaping encoding functions and wrap them both around any data that s going in there   And yes  it s perfectly valid  correct  even  to HTML-escape the entire contents of your HTML attributes  even if they contain javascript

User · Answer

In JavaScript you can encode single quotes as   x27  and double quotes as   x22   Therefore  with this method you can  once you re inside the  double or single  quotes of a JavaScript string literal  use the  x27  x22 with impunity without fear of any embedded quotes  breaking out  of your string     xXX is for chars  lt  127  and  uXXXX for Unicode  so armed with this knowledge you can create a robust JSEncode function for all characters that are out of the usual whitelist   For example    lt a href     onclick  SelectSurveyItem   lt   JSEncode itemid    gt      lt   JSEncode itemname    gt     return false   gt Select lt  a gt

User · Answer

Declare separate functions in the  lt head gt  section and invoke those in your onClick method  If you have lots you could use a naming scheme that numbers them  or pass an integer in in your onClicks and have a big fat switch statement in the function

User · Answer

I faced the same problem  and I solved it in a tricky way  First make global variables  v1  v2  and v3  And in the onclick  send an indicator  1  2  or 3 and in the function check for 1  2  3 to put the v1  v2  and v3 like   onclick  myfun 1   onclick  myfun 2   onclick  myfun 3    function myfun var        if  var   1          alert v1        if  var   2          alert v2        if  var   3          alert v3

User · Answer

Use hidden spans  one each for each of the parameters  lt  itemid  gt  and  lt  itemname  gt  and write their values inside them   For example  the span for  lt  itemid  gt  would look like  lt span id  itemid  style  display none  gt  lt  itemid  gt  lt  span gt  and in the javascript function SelectSurveyItem to pick the arguments from these spans  innerHTML

User · Answer

Depending on the server-side language  you could use one of these    NET 4 0  string result   System Web HttpUtility JavaScriptStringEncode  jsString     Java  import org apache commons lang StringEscapeUtils       String result   StringEscapeUtils escapeJavaScript jsString     Python  import json result   json dumps jsString    PHP   result   strtr  jsString  array        gt                gt               gt                                             r    gt     r     n    gt     n        Ruby on Rails   lt    escape javascript jsString    gt

[javascript] How do I escape a string inside JavaScript code inside an onClick handler?

Examples related to javascript

Examples related to html

Examples related to string

Examples related to escaping