Ich verwende JavaScript, um einen Wert aus einem ausgeblendeten Feld herauszuholen und in einem Textfeld anzuzeigen. Der Wert im ausgeblendeten Feld wird codiert.
Zum Beispiel,
<input id='hiddenId' type='hidden' value='chalk & cheese' />
wird hineingezogen
<input type='text' value='chalk & cheese' />
über eine jQuery, um den Wert aus dem versteckten Feld zu erhalten (an diesem Punkt verliere ich die Codierung):
$('#hiddenId').attr('value')
Das Problem ist, dass chalk & cheese
JavaScript beim Lesen aus dem versteckten Feld die Codierung zu verlieren scheint. Ich möchte nicht, dass der Wert ist chalk & cheese
. Ich möchte, dass das Wort amp;
beibehalten wird.
Gibt es eine JavaScript-Bibliothek oder eine jQuery-Methode, die eine Zeichenfolge HTML-codiert?
chalk
undcheese
jemals zusammen verwendet 0_oAntworten:
BEARBEITEN: Diese Antwort wurde vor langer Zeit veröffentlicht und die
htmlDecode
Funktion führte eine XSS-Sicherheitsanfälligkeit ein. Es wurde geändertdiv
,textarea
indem das temporäre Element von a geändert wurde , um die XSS-Chance zu verringern. Aber heutzutage würde ich Sie ermutigen, die DOMParser-API zu verwenden, wie in anderen Antworten vorgeschlagen .Ich benutze diese Funktionen:
Grundsätzlich wird ein Textbereichselement im Speicher erstellt, das jedoch niemals an das Dokument angehängt wird.
Auf der
htmlEncode
Funktion setze ich dasinnerText
des Elements und rufe das codierte abinnerHTML
; Auf diehtmlDecode
Funktion setze ich deninnerHTML
Wert des Elements und dasinnerText
wird abgerufen.Prüfen Sie das laufende Beispiel hier .
quelle
white-space
Eigenschaft hat, die vorschlägt, wie Leerzeichen im HTML-Inhalt verarbeitet werden sollen. Das Vorhandensein der Eigenschaft impliziert, dass "dies vorformatiert ist, Leerzeichen und Zeilenumbrüche erhalten bleiben sollten". Dies unterbricht die Trennung von Stil und Inhalt, denn wenn Sie versuchen, den HTML-Code so zu formatieren, dass er "hübsch" ist, oder ihn durch einen Codierungs- / Decodierungszyklus wie diesen umrunden, werden Leerzeichen / Unterbrechungen reduziert, und der Encoder hat keine Art und Weise zu wissen, ob dies in Ordnung war, da derwhite-space:pre-*;
Indikator in einer externen CSS-Datei nicht bekannt ist!Der jQuery-Trick codiert keine Anführungszeichen und entfernt im IE Ihre Leerzeichen.
Basierend auf dem Escape- Templatetag in Django, das meiner Meinung nach bereits stark genutzt / getestet wird, habe ich diese Funktion erstellt, die das tut, was benötigt wird.
Es ist wohl einfacher (und möglicherweise schneller) als alle Problemumgehungen für das Problem mit dem Leerzeichen-Stripping - und es codiert Anführungszeichen, was wichtig ist, wenn Sie das Ergebnis beispielsweise in einem Attributwert verwenden möchten.
Update 2013-06-17:
Auf der Suche nach dem schnellsten Fluchtweg habe ich diese Implementierung einer
replaceAll
Methode gefunden:http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(auch hier referenziert: Am schnellsten Methode zum Ersetzen aller Instanzen eines Zeichens in einer Zeichenfolge )
Einige Leistungsergebnisse hier:
http://jsperf.com/htmlencoderegex/25
Es gibt den oben eingebauten
replace
Ketten eine identische Ergebniszeichenfolge . Ich würde mich sehr freuen, wenn jemand erklären könnte, warum es schneller geht!?Update 04.03.2015:
Ich habe gerade festgestellt, dass AngularJS genau die oben beschriebene Methode verwendet:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435
Sie fügen einige Verbesserungen hinzu - sie scheinen ein obskures Unicode-Problem zu behandeln und alle nicht alphanumerischen Zeichen in Entitäten zu konvertieren. Ich hatte den Eindruck, dass Letzteres nicht erforderlich war, solange Sie einen UTF8-Zeichensatz für Ihr Dokument angegeben haben.
Ich werde feststellen, dass (4 Jahre später) Django immer noch keines dieser Dinge tut, daher bin ich mir nicht sicher, wie wichtig sie sind:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44
Update 06.04.2016:
Möglicherweise möchten Sie auch dem Schrägstrich entkommen
/
. Dies ist für die korrekte HTML-Codierung nicht erforderlich, wird jedoch von OWASP als Anti-XSS-Sicherheitsmaßnahme empfohlen . (Danke an @JNF für den Vorschlag in den Kommentaren)quelle
'
anstelle von'
'
keine gültige HTML-Entität ist./g
,.replace()
wird das erste Spiel nur ersetzen.Hier ist eine Nicht-jQuery-Version, die erheblich schneller ist als jQuery
.html()
Version und die.replace()
Version. Dadurch bleiben alle Leerzeichen erhalten, aber wie in der jQuery-Version werden keine Anführungszeichen verarbeitet.Geschwindigkeit: http://jsperf.com/htmlencoderegex/17
Demo:
Ausgabe:
Skript:
HTML:
quelle
.replace()
kürzlich von @SEoF vorgeschlagene Nicht-Regex- Version ist massiv schneller: jsperf.com/htmlencoderegex/22/g
,.replace()
tut nur das erste Spiel.replace('a', 'b', 'g')
was genauso funktioniert wiereplace(/a/g, 'b')
... Geschwindigkeit ist aber auch identischIch weiß, dass dies eine alte ist, aber ich wollte eine Variation der akzeptierten Antwort veröffentlichen , die im IE funktioniert, ohne Zeilen zu entfernen:
quelle
Unterstrich bietet
_.escape()
und_.unescape()
Methoden, die dies tun.quelle
Gute Antwort. Beachten Sie, dass bei einem zu codierenden Wert
undefined
odernull
mit jQuery 1.4.2 möglicherweise folgende Fehler auftreten:jQuery("<div/>").text(value).html is not a function
ODER
Uncaught TypeError: Object has no method 'html'
Die Lösung besteht darin, die Funktion zu ändern, um nach einem tatsächlichen Wert zu suchen:
quelle
jQuery('<div/>').text(value || '').html()
value
mit einemif
erspart ein DIV on the fly zu erstellen und den Wert greifen. Dies kann viel performanter sein, wennhtmlEncode
viel aufgerufen wird UND wenn es wahrscheinlichvalue
leer ist.Für diejenigen, die einfaches Javascript bevorzugen, ist hier die Methode, die ich erfolgreich angewendet habe:
quelle
FWIW, die Codierung geht nicht verloren. Die Codierung wird vom Markup-Parser (Browser) beim Laden der Seite verwendet. Sobald die Quelle gelesen und analysiert wurde und der Browser das DOM in den Speicher geladen hat, wurde die Codierung in das analysiert, was sie darstellt. Wenn Ihr JS ausgeführt wird, um etwas im Speicher zu lesen, entspricht das Zeichen der Codierung.
Ich arbeite hier möglicherweise ausschließlich mit Semantik, aber ich wollte, dass Sie den Zweck der Codierung verstehen. Das Wort "verloren" lässt es so klingen, als ob etwas nicht so funktioniert, wie es sollte.
quelle
Schneller ohne Jquery. Sie können jedes Zeichen in Ihrer Zeichenfolge codieren:
Oder zielen Sie einfach auf die Hauptfiguren ab, über die Sie sich Sorgen machen möchten (&, Inebreaks, <,>, "und '), wie:
quelle
In Prototype ist die String-Klasse integriert . Wenn Sie also Prototype verwenden / planen, dies zu tun, geschieht Folgendes:
quelle
.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
Einfach genug.Hier ist eine einfache Javascript-Lösung. Es erweitert das String-Objekt um eine Methode "HTMLEncode", die für ein Objekt ohne Parameter oder mit einem Parameter verwendet werden kann.
Ich habe eine wesentliche "HTMLEncode-Methode für Javascript" erstellt .
quelle
Basierend auf der Desinfektion von Angular ... (es6-Modulsyntax)
quelle
if (value === null | value === undefined) return '';
eines Tippfehlers oder tatsächlich eine Funktion? Wenn ja, warum diese verwenden und nicht die übliche||
? Vielen Dank!!== null
?undefined
ist das einzige, mit dem man Äquivalenz hatnull
, also sind zwei Triple-Equals sowieso nicht notwendignull
und0
sind beide falsch, ja, also kann man es nicht einfach tun!value
, aber der springende Punkt==
ist, bestimmte Dinge einfacher zu machen.0 == null
ist falsch.undefined == null
ist wahr. Sie können einfach tunvalue == null
Soweit ich weiß, gibt es in Javascript keine einfache HTML-Encode / Decode-Methode.
Sie können jedoch JS verwenden, um ein beliebiges Element zu erstellen, seinen inneren Text festzulegen und ihn dann mit innerHTML zu lesen.
Angenommen, mit jQuery sollte dies funktionieren:
Oder etwas in diese Richtung.
quelle
Sie sollten keine Werte maskieren / codieren müssen, um sie von einem Eingabefeld in ein anderes zu verschieben.
JS fügt kein rohes HTML oder ähnliches ein. Es weist das DOM lediglich an, die
value
Eigenschaft (oder das Attribut; nicht sicher) festzulegen. In beiden Fällen behandelt das DOM alle Codierungsprobleme für Sie. Wenn Sie nicht etwas Seltsames wiedocument.write
oder verwendeneval
, ist die HTML-Codierung effektiv transparent.Wenn Sie über das Generieren eines neuen Textfelds für das Ergebnis sprechen, ist dies immer noch genauso einfach. Übergeben Sie einfach den statischen Teil des HTML-Codes an jQuery und legen Sie die restlichen Eigenschaften / Attribute für das Objekt fest, das an Sie zurückgegeben wird.
quelle
Ich hatte ein ähnliches Problem und löste es mit der Funktion
encodeURIComponent
aus JavaScript ( Dokumentation) )Zum Beispiel in Ihrem Fall, wenn Sie verwenden:
und
du wirst bekommen
chalk%20%26%20cheese
. Auch Räume bleiben erhalten.In meinem Fall musste ich einen Backslash codieren und dieser Code funktioniert perfekt
und ich bekam
name%2Fsurname
quelle
Hier ist ein kleines Stück, das die
Server.HTMLEncode
Funktion von Microsoft ASP emuliert , die in reinem JavaScript geschrieben ist:Das Ergebnis codiert keine Apostrophe, sondern die anderen HTML-Specials und alle Zeichen außerhalb des Bereichs 0x20-0x7e.
quelle
Meine reine JS-Funktion:
quelle
Wenn Sie jQuery verwenden möchten. Ich habe das gefunden:
http://www.jquerysdk.com/api/jQuery.htmlspecialchars
(Teil des vom jQuery SDK angebotenen Plugins jquery.string)
Ich glaube, das Problem mit Prototype ist, dass es Basisobjekte in JavaScript erweitert und nicht mit der von Ihnen verwendeten jQuery kompatibel ist. Wenn Sie bereits Prototype und nicht jQuery verwenden, ist dies natürlich kein Problem.
BEARBEITEN: Es gibt auch dies, einen Port der String-Dienstprogramme von Prototype für jQuery:
http://stilldesigning.com/dotstring/
quelle
Dies ist aus ExtJS-Quellcode.
quelle
Wird ausgegeben:
<script>alert("I hack your site")</script>
Auf .htmlEncode () kann auf alle einmal definierten Zeichenfolgen zugegriffen werden.
quelle
HtmlEncodes den angegebenen Wert
quelle
Ich habe einige Probleme mit dem Backslash in meiner Domain \ User-Zeichenfolge festgestellt.
Ich habe dies zu den anderen Fluchten aus Anentropics Antwort hinzugefügt
Was ich hier gefunden habe: Wie kann ich einem Backslash in JavaScript entkommen?
quelle
Auswählen, was
escapeHTML()
in der prototype.js getan wirdDurch Hinzufügen dieses Skripts können Sie HTML entkommen:
Jetzt können Sie die EscapeHTML-Methode für Zeichenfolgen in Ihrem Skript aufrufen, z.
Ich hoffe, es hilft jedem, der nach einer einfachen Lösung sucht, ohne den gesamten prototype.js einbeziehen zu müssen
quelle
Unter Verwendung einiger der anderen Antworten hier habe ich eine Version erstellt, die alle relevanten Zeichen in einem Durchgang ersetzt, unabhängig von der Anzahl der verschiedenen codierten Zeichen (nur ein Aufruf von
replace()
), sodass sie für größere Zeichenfolgen schneller sind.Es ist nicht auf die vorhandene DOM-API oder andere Bibliotheken angewiesen.
Nachdem Sie das einmal ausgeführt haben, können Sie jetzt anrufen
Bekommen
<>&"'
quelle
quelle