How to decode HTML entities using jQuery?

Question

How do I use jQuery to decode HTML entities in a string?

Answer 1

You can use the code given below without any jQuery:

function decodeEntities(encodedString) {

  var textArea = document.createElement('textarea');

  textArea.innerHTML = encodedString;

  return textArea.value;

}

console.log(decodeEntities('1 & 2')); // '1 & 2'

You can use <div> instead of <textarea> with untrusted user input is an XSS vulnerability, even if the <div> is never added to the DOM:

function decodeEntities(encodedString) {

  var div = document.createElement('div');

  div.innerHTML = encodedString;

  return div.textContent;

}

// Shows an alert

decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

However, this attack is not possible against a <textarea> because there are no HTML elements that are permitted content of a <textarea>. Consequently, any HTML tags still present in the 'encoded' string will be automatically entity-encoded by the browser.

function decodeEntities(encodedString) {

    var textArea = document.createElement('textarea');

    textArea.innerHTML = encodedString;

    return textArea.value;

}

// Safe, and returns the correct answer

console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

Warning: Doing this using jQuery's .html() and .val() methods instead of using .innerHTML and .value is also insecure* for some versions of jQuery, even when using a textarea. This is because older versions of jQuery would deliberately and explicitly evaluate scripts contained in the string passed to .html(). Hence code like this shows an alert in jQuery 1.8:

//<!-- CDATA

// Shows alert

$("<textarea>")

.html("<script>alert(1337);</script>")

.text();

//-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>