Kennt jemand eine einfache Möglichkeit, HTML aus Zeichenfolgen in jQuery zu entfernen ? Ich muss in der Lage sein, eine beliebige Zeichenfolge zu übergeben und sie für die Anzeige auf einer HTML-Seite ordnungsgemäß maskieren zu lassen (um JavaScript / HTML-Injection-Angriffe zu verhindern). Ich bin sicher, dass es möglich ist, jQuery zu erweitern, um dies zu tun, aber ich weiß im Moment nicht genug über das Framework, um dies zu erreichen.
javascript
jquery
string
escaping
Seite
quelle
quelle
Antworten:
Da Sie jQuery verwenden , können Sie einfach die
text
Eigenschaft des Elements festlegen :quelle
$(element2).attr("some-attr", $(element1).html());
Siehe dieses Beispiel: jsbin.com/atibig/1/editEs gibt auch die Lösung von mustache.js
quelle
'
eine Entität mit einem Dezimalformat zugeordnet wird , während/
das Hex- Format verwendet wird.\n
zu<br>
?Quelle: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
quelle
attr()
Methode von jQuery (ab mindestens 1.8.3) eine eigene Codierung ausführt, sodass nicht codierte Zeichenfolgen direkt übergeben werden können . zB:$('<div/>').attr('test-attr', '\'Tis "fun" & stuff')[0].outerHTML
$('<div/>')
erstellt ein neuesdiv
Element, das nicht an das DOM angehängt ist. Es werden also keine vorhandenen Elemente geändert. Es ist ein bisschen verwirrend, wie jQuery dieselbe$()
Funktion verwendet, um Elemente ($('div')
) zu finden und zu erstellen, und für ein paar weitere Dinge außer… :)Wenn Sie sich für HTML entscheiden, gibt es nur drei, von denen ich mir vorstellen kann, dass sie wirklich notwendig wären:
Je nach Anwendungsfall, können Sie auch Dinge tun müssen , wie
"
zu"
. Wenn die Liste groß genug wäre, würde ich einfach ein Array verwenden:encodeURIComponent()
wird nur für URLs maskiert, nicht für HTML.quelle
var
zu deklarierenitem
; Verwenden Sie auf keinen Fall einefor … in
Schleife, wenn Sie ein Array durchlaufen! Verwenden Siefor
stattdessen eine normale Schleife. Oh, und das ist esencodeURIComponent
nichtescapeURIComponent
.é
; Hier ist eine Liste von HTML-Entitäten als Referenz: w3schools.com/tags/ref_entities.aspEinfach genug, um Unterstrich zu verwenden:
Unterstrich ist eine Dienstprogrammbibliothek, die viele Funktionen bietet, die native js nicht bieten. Es gibt auch lodash, das die gleiche API wie der Unterstrich hat, aber umgeschrieben wurde, um leistungsfähiger zu sein.
quelle
Ich habe eine winzige kleine Funktion geschrieben, die dies tut. Es entgeht nur
"
,&
,<
und>
(aber in der Regel das ist alles , was Sie brauchen sowieso). Es ist etwas eleganter als die zuvor vorgeschlagenen Lösungen, da nur eine.replace()
für die gesamte Konvertierung verwendet wird. ( BEARBEITEN 2: Reduzierte Codekomplexität, wodurch die Funktion noch kleiner und übersichtlicher wird. Wenn Sie neugierig auf den Originalcode sind, lesen Sie das Ende dieser Antwort.)Dies ist einfaches Javascript, es wird keine jQuery verwendet.
Flucht
/
und'
auchBearbeiten Sie als Antwort auf den Kommentar von mklement .
Die obige Funktion kann leicht um ein beliebiges Zeichen erweitert werden. Um weitere Zeichen anzugeben, die maskiert werden sollen, fügen Sie sie einfach sowohl in die Zeichenklasse im regulären Ausdruck (dh innerhalb des
/[...]/g
) als auch als Eintrag imchr
Objekt ein. ( EDIT 2: In gleicher Weise wurde auch diese Funktion verkürzt.)Beachten Sie die obige Verwendung von
'
für Apostroph (die symbolische Entität wurde'
möglicherweise stattdessen verwendet - sie ist in XML definiert, wurde jedoch ursprünglich nicht in die HTML-Spezifikation aufgenommen und wird daher möglicherweise nicht von allen Browsern unterstützt. Siehe: Wikipedia-Artikel zu HTML-Zeichencodierungen ). Ich erinnere mich auch daran, dass ich irgendwo gelesen habe, dass die Verwendung von Dezimalstellen stärker unterstützt wird als die Verwendung von Hexadezimal, aber ich kann die Quelle dafür derzeit nicht finden. (Und es kann nicht viele Browser geben, die die hexadezimalen Entitäten nicht unterstützen.)Hinweis: Das Hinzufügen
/
und'
zur Liste der maskierten Zeichen ist nicht allzu nützlich, da sie in HTML keine besondere Bedeutung haben und nicht maskiert werden müssen.Ursprüngliche
escapeHtml
FunktionBEARBEITEN 2: Die ursprüngliche Funktion verwendete eine Variable (
chr
), um das für den.replace()
Rückruf benötigte Objekt zu speichern . Diese Variable benötigte auch eine zusätzliche anonyme Funktion, um sie zu erweitern, wodurch die Funktion (unnötig) etwas größer und komplexer wurde.Ich habe nicht getestet, welche der beiden Versionen schneller sind. Wenn Sie dies tun, können Sie hier Informationen und Links dazu hinzufügen.
quelle
mustache.js
und esunderscore.js
tun? Apropos letzteres: Es erkennt nur die numerischen Entitäten (die'
und/
'darstellen) in hexadezimaler Großbuchstabe , wenn sie nicht entkommen. So kam Text hereinmustache.js
- der seltsamerweise eine Mischung aus Hex verwendet. und Dezimalformate - würden nicht korrekt entkoppeltunderscore.js
. Ich frage mich, wie andere populäre Bibliotheken damit umgehen.'
funktionieren .) - Apostrophe haben eine reservierte Funktion in XML (und damit XHTML, wie ich mir vorstellen kann?), Aus diesem Grund haben XML (aber nicht HTML) die benannte Entität'
. Genau warum oder auf welche Weise es "reserviert" ist, weiß ich nicht. - Schrägstriche sind in URLs speziell, aber das bedeutet nicht eigentlich sie für die Aufnahme rechtfertigen HTML entkommen (als URL - Codierung etwas ganz anderes ist).'
: richtig: sichere Verwendung nur in XHTML ; direkt aus dem Mund der Crowd-Quelle - Hervorhebung von mir: "(...) von einem konformen HTML- Prozessor gelesen , (...) die Verwendung von & apos; oder benutzerdefinierten Entitätsreferenzen wird möglicherweise nicht unterstützt (...)" - in der Praxis : Moderne Browser unterstützen es sogar in HTML . Siehe Fall in Hex-Nummern. (gleiche Quelle; Hervorhebung von mir): "Das x muss in XML-Dokumenten in Kleinbuchstaben geschrieben sein. […] Das hhhh kann Groß- und Kleinbuchstaben mischen, obwohl Großbuchstaben der übliche Stil sind ." Wir müssen uns fragen, wer beschlossen hat, Schrägstriche zu codieren. Vielleicht wirklich nur eine Verwechslung zwischen URI und HTML-Codierung?/
keine Codierung erforderlich ist, aber die Codierung'
scheint dennoch nützlich zu sein, um den Fall sicher zu behandeln, in dem eine codierte Zeichenfolge als Attributwert in einfachen Anführungszeichen verwendet wird .Mir ist klar, wie spät ich zu dieser Party komme, aber ich habe eine sehr einfache Lösung, für die jQuery nicht erforderlich ist.
Bearbeiten: Dies entgeht keinen Anführungszeichen. Der einzige Fall, in dem Anführungszeichen maskiert werden müssten, besteht darin, dass der Inhalt in ein Attribut innerhalb einer HTML-Zeichenfolge eingefügt wird. Es fällt mir schwer, mir einen Fall vorzustellen, in dem dies ein gutes Design wäre.
Bearbeiten 3: Für die schnellste Lösung überprüfen Sie die Antwort oben von Saram. Dieser ist der kürzeste.
quelle
<
und>
es keinen Vorteil hat, auch den Anführungszeichen zu entkommen, es sei denn, die Absicht des generierten Inhalts besteht darin, in ein Attribut zu gehen.Hier ist eine saubere, klare JavaScript-Funktion. Es wird Text wie "einige <viele" in "einige & lt; viele" maskieren.
quelle
Nach letzten Tests kann ich empfehlen schnellste und vollständig Cross - Browser - kompatibel nativen javaScript (DOM) Lösung:
Wenn Sie es viele Male wiederholen, können Sie es mit einmal vorbereiteten Variablen tun:
Sehen Sie sich meine Endleistung Vergleich ( Stack Frage ).
quelle
var p = document.createElement('p'); p.textContent = html; return p.innerHTML;
textContent
Funktion nur von Chrome 1+, Firefox 2, IE9, Opera 9.64 und Safari 3 unterstützt (die beiden letzteren haben "möglicherweise früher" kommentiert). Dies würde die Behauptung der OPs "vollständig browserübergreifend kompatibel" brechen.p.innerText = html; return p.innerHTML
Versuchen Sie Underscore.string lib, es funktioniert mit jQuery.
Ausgabe:
quelle
_.escape()
Dienstprogrammfunktion.Ich habe das Beispiel mustache.js erweitert und die
escapeHTML()
Methode zum Zeichenfolgenobjekt hinzugefügt .Auf diese Weise ist es recht einfach zu bedienen
"Some <text>, more Text&Text".escapeHTML()
quelle
__entityMap
in den Funktionsbereich vor Ort übergegangen. Und wickelte all dies inif (typeof String.prototype.escapeHTML !== 'function'){...}
escape()
undunescape()
sollen Zeichenfolgen für URLs und nicht für HTML codieren / decodieren.Eigentlich verwende ich das folgende Snippet, um den Trick auszuführen, für den kein Framework erforderlich ist:
quelle
"
s haben willst, musst du mindestens'
und `` zum Kampf hinzufügen . Diese werden nur für String-Tag-Daten in Elementen in HTML benötigt. Für HTML-Daten selbst (außerhalb von Tags) sind nur die ersten 3 erforderlich.Wenn Sie underscore.js haben, verwenden Sie
_.escape
(effizienter als die oben beschriebene jQuery-Methode):quelle
Wenn Sie die Regex-Route wählen, ist im obigen Beispiel von tghw ein Fehler aufgetreten.
quelle
Dies ist ein schönes sicheres Beispiel ...
quelle
Sie können es leicht mit Vanille js tun.
Fügen Sie dem Dokument einfach einen Textknoten hinzu. Es wird vom Browser maskiert.
quelle
Keine globalen Variablen, etwas Speicheroptimierung. Verwendungszweck:
Ergebnis ist:
quelle
2 einfache Methoden, die KEINE JQUERY erfordern ...
Sie können alle Zeichen in Ihrer Zeichenfolge folgendermaßen codieren :
Oder einfach nur die Hauptfiguren Ziel zu kümmern
&
, Zeilenumbrüche<
,>
,"
und'
wie:quelle
Beispiel für einfaches JavaScript-Escape:
quelle
quelle
klappt wunderbar
quelle
Diese Antwort enthält die Methoden jQuery und normale JS, ist jedoch ohne Verwendung des DOM am kürzesten:
Escapezeichenfolge:
It%27s%20%3E%2020%25%20less%20complicated%20this%20way.
Wenn Sie die entkommenen Leerzeichen stören, versuchen Sie:
Escapezeichenfolge:
It%27s %3E 20%25 less complicated this way.
Leider war die
escape()
Funktion in JavaScript Version 1.5 veraltet .encodeURI()
oderencodeURIComponent()
sind Alternativen, aber sie ignorieren'
, so dass die letzte Codezeile in folgende umgewandelt wird:Alle gängigen Browser unterstützen weiterhin den Funktionscode, und angesichts der Anzahl der alten Websites bezweifle ich, dass sich dies bald ändern wird.
quelle
ES6 ein Liner für die Lösung von mustache.js
quelle
Wenn Sie diese Informationen in einer Datenbank speichern , ist es falsch, HTML mithilfe eines clientseitigen Skripts zu maskieren . Dies sollte auf dem Server erfolgen . Andernfalls ist es einfach, Ihren XSS-Schutz zu umgehen.
Um meinen Standpunkt klar zu machen, hier ein Beispiel mit einer der Antworten:
Nehmen wir an, Sie verwenden die Funktion EscapeHtml, um das HTML aus einem Kommentar in Ihrem Blog zu entfernen und es dann auf Ihrem Server zu veröffentlichen.
Der Benutzer könnte:
Wenn der Benutzer dieses Snippet in die Konsole einfügt, wird die XSS-Validierung umgangen:
quelle
Alle Lösungen sind nutzlos , wenn Sie wieder Flucht verhindern tun sie nicht, wie die meisten Lösungen halten würde entkommen
&
zu&
.quelle