Unescape HTML entities in JavaScript?

by

Most answers given here have a huge disadvantage: if the string you are trying to convert isn’t trusted then you will end up with a Cross-Site Scripting (XSS) vulnerability. For the function in the accepted answer, consider the following:

htmlDecode("<img src="https://stackoverflow.com/questions/3700326/dummy" onerror="alert(/xss/)">");

The string here contains an unescaped HTML tag, so instead of decoding anything the htmlDecode function will actually run JavaScript code specified inside the string.

This can be avoided by using DOMParser which is supported in all modern browsers:

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

console.log(  htmlDecode("&lt;img src="https://stackoverflow.com/questions/3700326/myimage.jpg"&gt;")  )    
// "<img src="https://stackoverflow.com/questions/3700326/myimage.jpg">"

console.log(  htmlDecode("<img src="https://stackoverflow.com/questions/3700326/dummy" onerror="alert(/xss/)">")  )  
// ""

This function is guaranteed to not run any JavaScript code as a side-effect. Any HTML tags will be ignored, only text content will be returned.

Compatibility note: Parsing HTML with DOMParser requires at least Chrome 30, Firefox 12, Opera 17, Internet Explorer 10, Safari 7.1 or Microsoft Edge. So all browsers without support are way past their EOL and as of 2017 the only ones that can still be seen in the wild occasionally are older Internet Explorer and Safari versions (usually these still aren’t numerous enough to bother).

More Related Contents:

  1. Unescape HTML entities in JavaScript?
  2. HTML-encoding lost when attribute read from input field
  3. What is the HtmlSpecialChars equivalent in JavaScript?
  4. How to convert characters to HTML entities using plain JavaScript
  5. How do I escape a single quote ( ‘ ) in JavaScript? [duplicate]
  6. How do I escape a string inside JavaScript code inside an onClick handler?
  7. Escaping HTML entities in JavaScript string literals within the block
  8. javascript function doesn’t work when link is clicked
  9. How to save an image to localStorage and display it on the next page?
  10. Is it wrong to place the tag after the tag?
  11. How to check whether a Storage item is set?
  12. How to add line breaks to an HTML textarea
  13. Using an HTML button to call a JavaScript function
  14. How can I get the DOM element which contains the current selection?
  15. Why is deprecated and what is the best alternative?
  16. Set active tab style with AngularJS
  17. HTML5 FileReader how to return result?
  18. how to disable DIV element and everything inside [duplicate]
  19. D3 Bar Graph example not working locally
  20. jQuery position DIV fixed at top on scroll
  21. Can I just make up attributes on my HTML tags?
  22. JavaScript window.location does not set referer in the request header
  23. Change tag using javascript [duplicate]
  24. Why does querySelector only select the first element and how can I fix this?
  25. How can I set preview of video file, selecting from input type=’file’
  26. Change form action on select option
  27. How to insert HTML as Text
  28. How do I dynamically adjust css stylesheet based on browser width?
  29. Display Spreadsheet Data to HTML Table
  30. How can I calculate the difference between two times that are in 24 hour format?

Leave a Comment