StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Without any jQuery:</p> <pre><code>function decodeEntities(encodedString) { var textArea = document.createElement('textarea'); textArea.innerHTML = encodedString; return textArea.value; } console.log(decodeEntities('1 &amp; 2')); // '1 & 2' </code></pre> <p>This works similarly to the <a href="https://stackoverflow.com/a/2419664/1709587">accepted answer</a>, but is safe to use with untrusted user input.</p> <hr> <h2>Security issues in similar approaches</h2> <p>As <a href="https://stackoverflow.com/questions/1147359/how-to-decode-html-entities-using-jquery/1395954#comment6018122_2419664">noted by Mike Samuel</a>, doing this with a <code><div></code> instead of a <code><textarea></code> with untrusted user input is an XSS vulnerability, even if the <code><div></code> is never added to the DOM:</p> <pre><code>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)">') </code></pre> <p>However, this attack is not possible against a <code><textarea></code> because there are no HTML elements that are permitted content of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="noreferrer"><code><textarea></code></a>. Consequently, any HTML tags still present in the 'encoded' string will be automatically entity-encoded by the browser.</p> <pre><code>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)">')) </code></pre> <p>Doing this using jQuery's <a href="http://api.jquery.com/html/" rel="noreferrer"><code>.html()</code></a> and <a href="http://api.jquery.com/val/" rel="noreferrer"><code>.val()</code></a> methods instead of using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML" rel="noreferrer"><code>.innerHTML</code></a> and <code>.value</code> is also insecure* for some versions of jQuery, <em>even when using a <code>textarea</code></em>. This is because older versions of jQuery would <a href="https://github.com/jquery/jquery/blob/1.7/jquery.js#L6049" rel="noreferrer">deliberately and explicitly evaluate scripts</a> contained in the string passed to <code>.html()</code>. Hence code like this shows an alert in jQuery 1.8:</p> <pre><code>// Shows alert $('<textarea>').html('<script>alert(1337)</script>').text() </code></pre> <p><sub>* Thanks to <a href="https://stackoverflow.com/users/2377920/eru-penkman">Eru Penkman</a> for catching this vulnerability.</sub></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload