Escaping HTML strings with jQuery

Question

Does anyone know of an easy way to escape HTML from strings in jQuery   I need to be able to pass an arbitrary string and have it properly escaped for display in an HTML page  preventing JavaScript HTML injection attacks    I m sure it s possible to extend jQuery to do this  but I don t know enough about the framework at the moment to accomplish this

User · Answer

function htmlEscape str        var stringval           each str  function  i  element            alert element           stringval    element              replace   amp  g    amp amp                 replace    g    amp quot                 replace    g    amp  39                 replace   lt  g    amp lt                 replace   gt  g    amp gt                 replace       -                replace       -                replace       -                replace       -                replace       -                alert stringval       return String stringval

User · Answer

This answer provides the jQuery and normal JS methods  but this is shortest without using the DOM   unescape escape  It s  gt  20  less complicated this way       Escaped string  It 27s 20 3E 2020 25 20less 20complicated 20this 20way   If the escaped spaces bother you  try   unescape escape  It s  gt  20  less complicated this way    replace   20 g          Escaped string  It 27s  3E 20 25 less complicated this way   Unfortunately  the escape   function was deprecated in JavaScript version 1 5  encodeURI   or encodeURIComponent   are alternatives  but they ignore    so the last line of code would turn into this   decodeURI encodeURI  It s  gt  20  less complicated this way    replace   20 g       replace        27      All major browsers still support the short code  and given the number of old websites  i doubt that will change soon

User · Answer

If your re going the regex route  there s an error in tghw s example above    lt  -- WON T WORK -  item 0  is an index  not an item -- gt   var escaped   html   var findReplace       amp  g    amp amp        lt  g    amp lt        gt  g   amp gt         g    amp quot      for var item in findReplace         escaped   escaped replace item 0   item 1            lt  -- WORKS - findReplace item    correctly references contents -- gt   var escaped   html  var findReplace       amp  g    amp amp        lt  g    amp lt        gt  g    amp gt         g    amp quot      for var item in findReplace         escaped   escaped replace findReplace item 0    findReplace item 1

User · Answer

If you have underscore js  use   escape  more efficient than the jQuery method posted above      escape  Curly  Larry  amp  Moe       returns  Curly  Larry  amp amp  Moe

User · Answer

I wrote a tiny little function which does this  It only escapes     amp    lt  and  gt   but usually that s all you need anyway   It is slightly more elegant then the earlier proposed solutions in that it only uses one  replace   to do all the conversion   EDIT 2  Reduced code complexity making the function even smaller and neater  if you re curious about the original code see end of this answer    function escapeHtml text         use strict       return text replace      amp  lt  gt   g  function  a            return          amp quot      amp      amp amp      lt      amp lt      gt      amp gt     a               This is plain Javascript  no jQuery used   Escaping   and   too  Edit in response to mklement s comment   The above function can easily be expanded to include any character  To specify more characters to escape  simply insert them both in the character class in the regular expression  i e  inside the        g  and as an entry in the chr object   EDIT 2  Shortened this function too  in the same way    function escapeHtml text         use strict       return text replace      amp     lt  gt   g  function  a            return                      amp quot      amp      amp amp           amp  39                       amp  47       lt      amp lt       gt      amp gt             a               Note the above use of  amp  39  for apostrophe  the symbolic entity  amp apos  might have been used instead     it is defined in XML  but was originally not included in the HTML spec and might therefore not be supported by all browsers  See  Wikipedia article on HTML character encodings   I also recall reading somewhere that using decimal entities is more widely supported than using hexadecimal  but I can t seem to find the source for that now though   And there cannot be many browsers out there which does not support the hexadecimal entities    Note  Adding   and   to the list of escaped characters isn t all that useful  since they do not have any special meaning in HTML and do not need to be escaped   Original escapeHtml Function  EDIT 2  The original function used a variable  chr  to store the object needed for the  replace   callback  This variable also needed an extra anonymous function to scope it  making the function  needlessly  a little bit bigger and more complex   var escapeHtml    function           use strict       var chr            amp quot      amp      amp amp      lt      amp lt      gt      amp gt          return function  text            return text replace      amp  lt  gt   g  function  a    return chr a                      I haven t tested which of the two versions are faster  If you do  feel free to add info and links about it here

User · Answer

Since you re using jQuery  you can just set the element s text property      before      lt div class  someClass  gt text lt  div gt  var someHtmlString     lt script gt alert  hi     lt  script gt        set a DIV s text     div someClass   text someHtmlString      after       lt div class  someClass  gt  amp lt script amp gt alert  hi     amp lt  script amp gt  lt  div gt      get the text in a string  var escaped       lt div gt    text someHtmlString  html       value       amp lt script amp gt alert  hi     amp lt  script amp gt

User · Answer

2 simple methods that require NO JQUERY     You can encode all characters in your string like this   function encode e  return e replace      g function e  return  amp    e charCodeAt 0           Or just target the main characters to worry about  amp   line breaks   lt    gt     and   like    x000D   x000D  function encode r   x000D  return r replace    x26 x0A  lt  gt     g function r  return  amp    r charCodeAt 0        x000D    x000D   x000D  var myString  Encode HTML entities  n Safe  escape  lt script gt  lt     script gt   amp  other tags    x000D   x000D  test value encode myString   x000D   x000D  testing innerHTML encode myString   x000D   x000D                 x000D     x26 is  amp ampersand  it has to be first   x000D     x0A is newline  x000D                 x000D   lt p gt  lt b gt What JavaScript Generated  lt  b gt  lt  p gt  x000D   x000D   lt textarea id test rows  3  cols  55  gt  lt  textarea gt  x000D   x000D   lt p gt  lt b gt What It Renders Too In HTML  lt  b gt  lt  p gt  x000D   x000D   lt div id  testing  gt www WHAK com lt  div gt  x000D   x000D   x000D

User · Answer

If you re escaping for HTML  there are only three that I can think of that would be really necessary   html replace   amp  g    amp amp    replace   lt  g    amp lt    replace   gt  g    amp gt       Depending on your use case  you might also need to do things like   to  amp quot    If the list got big enough  I d just use an array   var escaped   html  var findReplace       amp  g    amp amp        lt  g    amp lt        gt  g    amp gt         g    amp quot     for var item in findReplace      escaped   escaped replace findReplace item  0   findReplace item  1      encodeURIComponent   will only escape it for URLs  not for HTML

User · Answer

A speed-optimized version   x000D   x000D  function escapeHtml s       let out          let p2   0     for  let p   0  p  lt  s length  p            let r        switch  s charCodeAt p              case 34  r     amp quot    break                 case 38  r     amp amp     break       amp           case 39  r     amp  39     break                 case 60  r     amp lt      break       lt           case 62  r     amp gt      break       gt           default  continue                if  p2  lt  p             out    s substring p2  p                 out    r        p2   p   1          if  p2    0          return s          if  p2  lt  s length          out    s substring p2           return out     const s    Hello  lt World gt     document write escapeHtml s    console log escapeHtml s    x000D   x000D   x000D

User · Answer

Easy enough to use underscore     escape string     Underscore is a utility library that provides a lot of features that native js doesn t provide  There s also lodash which is the same API as underscore but was rewritten to be more performant

User · Answer

If you are saving this information in a database  its wrong to escape HTML using a client-side script  this should be done in the server  Otherwise its easy to bypass your XSS protection   To make my point clear  here is a exemple using one of the answers   Lets say you are using the function escapeHtml to escape the Html from a comment in your blog and then posting it to your server   var entityMap           amp      amp amp          lt      amp lt          gt      amp gt               amp quot               amp  39               amp  x2F           function escapeHtml string        return String string  replace    amp  lt  gt       g  function  s          return entityMap s                 The user could    Edit the POST request parameters and replace the comment with javascript code  Overwrite the escapeHtml function using the browser console    If the user paste this snippet in the console it would bypass the XSS validation   function escapeHtml string      return string

User · Answer

lt div  gt    text  This is fun  amp  stuff   html        This is fun  amp amp  stuff    Source  http   debuggable com posts encode-html-entities-with-jquery 480f4dd6-13cc-4ce9-8071-4710cbdd56cb

User · Answer

All solutions are useless if you dont prevent re-escape  e g  most solutions would keep escaping  amp  to  amp amp    escapeHtml   function  s        return s   s replace             amp  lt  gt     g          function  c  offset  str                if  c       amp                      var substr   str substring offset  offset   6                   if    amp  amp lt gt apos quot    test substr                            already escaped  do not re-escape                     return c                                              return   amp                         amp     amp                     lt     lt                     gt     gt                         apos                         quot                c

User · Answer

Plain JavaScript escaping example   function escapeHtml text        var div   document createElement  div        div innerText   text      return div innerHTML     escapeHtml   lt script gt alert  hi     lt  script gt         amp lt script amp gt alert  hi     amp lt  script amp gt

User · Answer

Try Underscore string lib  it works with jQuery     str escapeHTML   lt div gt Blah blah blah lt  div gt      output     amp lt div amp gt Blah blah blah amp lt  div amp gt

User · Answer

You can easily do it with vanilla js   Simply add a text node the document   It will be escaped by the browser   var escaped   document createTextNode   lt HTML TO ESCAPE  gt    document getElementById   PARENT NODE    appendChild escaped

User · Answer

function undefined       var charsToReplace               amp      amp amp              lt      amp lt              gt      amp gt               var replaceReg   new RegExp       Object keys charsToReplace  join             g        var replaceFn   function tag   return charsToReplace tag     tag          var replaceRegF   function replaceMap            return  new RegExp       Object keys charsToReplace  concat Object keys replaceMap   join             gi                var replaceFnF   function replaceMap            return function tag   return replaceMap tag     charsToReplace tag     tag                 String prototype htmlEscape   function replaceMap            if  replaceMap     undefined  return this replace replaceReg  replaceFn           return this replace replaceRegF replaceMap   replaceFnF replaceMap                   No global variables  some memory optimization  Usage     some lt tag gt and amp symbol    htmlEscape          amp copy       result is     some amp lt tag amp gt and amp amp symbol amp copy

User · Answer

escape   and unescape   are intended to encode   decode strings for URLs  not HTML   Actually  I use the following snippet to do the trick that doesn t require any framework   var escapedHtml   html replace   amp  g    amp amp                           replace   gt  g    amp gt                           replace   lt  g    amp lt                           replace    g    amp quot                           replace    g    amp apos

User · Answer

function htmlDecode t      if  t  return     lt div   gt    html t  text        works like a charm

User · Answer

I ve enhanced the mustache js example adding the escapeHTML   method to the string object   var   entityMap           amp      amp amp          lt      amp lt          gt      amp gt               amp quot               amp  39               amp  x2F       String prototype escapeHTML   function         return String this  replace    amp  lt  gt       g  function  s            return   entityMap s               That way it is quite easy to use  Some  lt text gt   more Text amp Text  escapeHTML

User · Answer

Here is a clean  clear JavaScript function  It will escape text such as  a few  lt  many  into  a few  amp lt  many    function escapeHtmlEntities  str      if  typeof jQuery      undefined            Create an empty div to use as a container         then put the raw text in and get the HTML        equivalent out      return jQuery   lt div  gt    text str  html              No jQuery  so use string replace    return str      replace   amp  g    amp amp         replace   gt  g    amp gt         replace   lt  g    amp lt         replace    g    amp quot         replace    g    amp apos

User · Answer

This is a nice safe example     function escapeHtml str        if  typeof str      string            try              var newStr                   var nextCode   0              for  var i   0 i  lt  str length i                     nextCode   str charCodeAt i                   if  nextCode  gt  0  amp  amp  nextCode  lt  128                       newStr      amp    nextCode                                        else                      newStr                                                       return newStr                    catch err                       else          return str

User · Answer

ES6 one liner for the solution from mustache js  const escapeHTML   str   gt   str     replace    amp  lt  gt         g  s   gt      amp      amp amp     lt      amp lt     gt      amp gt          amp quot          amp  39          amp  x2F          amp  x60          amp  x3D     s

User · Answer

There is also the solution from mustache js  var entityMap         amp      amp amp        lt      amp lt        gt      amp gt             amp quot             amp  39             amp  x2F             amp  x60             amp  x3D       function escapeHtml  string      return String string  replace    amp  lt  gt         g  function  s        return entityMap s

User · Answer

After last tests I can recommend fastest and completely cross browser compatible native javaScript  DOM  solution   function HTMLescape html       return document createElement  div            appendChild document createTextNode html            parentNode          innerHTML     If you repeat it many times you can do it with once prepared variables     prepare variables var DOMtext   document createTextNode  test    var DOMnative   document createElement  span    DOMnative appendChild DOMtext      main work for each case function HTMLescape html     DOMtext nodeValue   html    return DOMnative innerHTML     Look at my final performance comparison  stack question

User · Answer

I realize how late I am to this party  but I have a very easy solution that does not require jQuery   escaped   new Option unescaped  innerHTML    Edit  This does not escape quotes  The only case where quotes would need to be escaped is if the content is going to be pasted inline to an attribute within an HTML string  It is hard for me to imagine a case where doing this would be good design   Edit 3  For the fastest solution  check the answer above from Saram  This one is the shortest

[javascript] Escaping HTML strings with jQuery

Examples related to javascript

Examples related to jquery

Examples related to string

Examples related to escaping