Wie dekodiert man HTML-Entitäten mit jQuery?

Question

Wie verwende ich jQuery, um HTML-Entitäten in einem String zu dekodieren?

Answer 1

Sicherheitshinweis: Die Verwendung dieser Antwort (die unten in ihrer ursprünglichen Form beibehalten wird) kann zu einer XSS-Schwachstelle in Ihre Anwendung. Sie sollten diese Antwort nicht verwenden. Lesen Sie lucascaros Antwort für eine Erklärung der Schwachstellen in dieser Antwort, und verwenden Sie den Ansatz entweder aus dieser Antwort oder Die Antwort von Mark Amery stattdessen.

Versuchen Sie doch mal

var encodedStr = "This is fun & stuff";
var decoded = $("<div/>").html(encodedStr).text();
console.log(decoded);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div/>

Answer 2

Ganz ohne jQuery:

function decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

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

Dies funktioniert ähnlich wie die akzeptierte Antwort aber bei nicht vertrauenswürdigen Benutzereingaben ist es sicher.

---

Sicherheitsfragen bei ähnlichen Ansätzen

Als vermerkt von Mike Samuel Dies geschieht mit einer <div> anstelle einer <textarea> mit nicht vertrauenswürdigen Benutzereingaben ist eine XSS-Schwachstelle, auch wenn die <div> wird nie zum DOM hinzugefügt:

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)">')

Dieser Angriff ist jedoch nicht möglich gegen eine <textarea> weil es keine HTML-Elemente gibt, die als Inhalt einer <textarea> . Folglich werden alle HTML-Tags, die noch in der "kodierten" Zeichenkette enthalten sind, vom Browser automatisch entity-kodiert.

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)">'))

Warnung : Dies geschieht mit jQuery's .html() y .val() Methoden statt der Verwendung von .innerHTML y .value ist auch für einige Versionen von jQuery unsicher*, auch bei Verwendung einer textarea . Der Grund dafür ist, dass ältere Versionen von jQuery Skripte bewusst und explizit bewerten in der Zeichenkette enthalten, die an .html() . Daher zeigt Code wie dieser eine Warnung 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>

_{* Dank an <a href="https://stackoverflow.com/users/2377920/eru-penkman">Eru Penkman </a>für das Aufspüren dieser Sicherheitslücke.}

Answer 3

Wie Mike Samuel sagte, verwenden Sie nicht jQuery.html().text(), um HTML-Entitäten zu dekodieren, da es unsicher ist.

Verwenden Sie stattdessen einen Vorlagenrenderer wie Schnurrbart.js ou decodeEntities von @VyvITs Kommentar.

Underscore.js utility-belt Bibliothek kommt mit escape y unescape Methoden, aber sie sind nicht sicher für Benutzereingaben:

_.escape(string)

_.unescape(string)

Answer 4

Ich glaube, Sie verwechseln die Text- und die HTML-Methode. Schauen Sie sich dieses Beispiel an: Wenn Sie das innere HTML eines Elements als Text verwenden, erhalten Sie dekodierte HTML-Tags (zweite Schaltfläche). Wenn Sie sie jedoch als HTML verwenden, erhalten Sie die HTML-formatierte Ansicht (erste Schaltfläche).

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

Der erste Knopf schreibt: hier ist ein HTML Inhalt.

Der zweite Knopf schreibt: hier ist ein <B>HTML</B> Inhalt.

Übrigens, Sie können ein Plug-in sehen, das ich in jQuery Plugin - HTML dekodieren und kodieren das HTML-Zeichenfolgen kodiert und dekodiert.

Answer 5

Die Frage wird durch "mit jQuery" begrenzt, aber es könnte einigen helfen, zu wissen, dass der jQuery-Code, der in der besten Antwort hier angegeben ist, Folgendes tut... das funktioniert mit oder ohne jQuery:

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}