Monday, July 2, 2018

javascript - HTML-encoding lost when attribute read from input field



I’m using JavaScript to pull a value out from a hidden field and display it in a textbox. The value in the hidden field is encoded.



For example,







gets pulled into






via some jQuery to get the value from the hidden field (it’s at this point that I lose the encoding):



$('#hiddenId').attr('value')



The problem is that when I read chalk & cheese from the hidden field, JavaScript seems to lose the encoding. I do not want the value to be chalk & cheese. I want the literal amp; to be retained.



Is there a JavaScript library or a jQuery method that will HTML-encode a string?


Answer



EDIT: This answer was posted a long ago, and the htmlDecode function introduced a XSS vulnerability. It has been modified changing the temporary element from a div to a textarea reducing the XSS chance. But nowadays, I would encourage you to use the DOMParser API as suggested in other anwswer.





I use these functions:




function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('