2009-10-28 8 views
18

Ich bin auf der Suche nach einem einfachen HTML-Desinfektor in JavaScript geschrieben. Es muss nicht 100% XSS sicher sein.Einfache HTML-Desinfektionsmittel in Javascript

Ich implementiere Markdown und den WMD Markdown-Editor (Der SO-Master-Zweig von Github) auf meiner Website. Das Problem ist, dass der in der Live-Vorschau angezeigte HTML-Code nicht gefiltert wird, wie hier auf SO. Ich bin auf der Suche nach einem einfachen/schnellen HTML-Desinfektor, der in JavaScript geschrieben ist, damit ich den Inhalt des Vorschaufensters filtern kann.

Kein Bedarf für einen vollständigen Parser mit vollständigem XSS-Schutz. Ich sende die Ausgabe nicht zurück zum Server. Ich sende den Markdown an den Server, wo ich einen richtigen, vollständigen HTML-Desinfektor verwende, bevor ich das Ergebnis in der Datenbank abspeichere.

Google ist absolut nutzlos für mich. Ich bekomme nur Hunderte von (oft falschen) Artikeln darüber, wie man Javascript aus benutzergeneriertem HTML in allen Arten serverseitiger Sprachen herausfiltert.

UPDATE

ich ein bisschen besser erklären würde, warum ich das brauche. Meine Website hat einen Editor, der dem auf StackOverflow sehr ähnlich ist. Es gibt einen Textbereich für die MarkDown-Syntax und ein Vorschaufenster darunter, das Ihnen zeigt, wie es aussehen wird, nachdem Sie es abgeschickt haben.

Wenn der Benutzer etwas übermittelt, wird es im MarkDown-Format an den Server gesendet. Der Server konvertiert es in HTML und führt dann einen HTML-Desinfektor aus, um den HTML-Code zu bereinigen. MarkDown erlaubt beliebiges HTML, also muss ich es aufräumen. Zum Beispiel, das der Benutzer tippt etwas wie:

<script>alert('Boo!');</script> 

Der Abschlag Konverter es nicht in Berührung kommt, da es HTML ist. Der HTML-Desinfektor wird es entfernen, so dass das Skriptelement weg ist.

Aber das passiert nicht im Vorschaufenster. Das Vorschaufenster konvertiert MarkDown nur in HTML, bereinigt es jedoch nicht. Das Vorschaufenster wird also ein script-Element haben. Das Vorschaufenster unterscheidet sich also vom eigentlichen Rendering auf dem Server.

Ich möchte das beheben, also brauche ich einen schnell und schmutzig JavaScript HTML-Sanitizer. Etwas Einfaches mit Grundelement/Attribut Blacklisting und Whitelisting wird ausreichen. Es muss nicht XSS-sicher sein, da der XSS-Schutz durch den serverseitigen HTML-Desinfektor erfolgt.

Dies ist nur um sicherzustellen, dass das Vorschaufenster das tatsächliche Rendering 99,99% der Zeit entspricht, das ist gut genug für mich.

Können Sie helfen? Danke im Voraus!

+3

FWIW, ich hasse es, wenn die Vorschau nicht übereinstimmt, was veröffentlicht wird. – Ms2ger

+1

@ ms2ger: Deshalb brauche ich den HTML-Desinfektor, damit die Vorschau mit dem übereinstimmt, was der Server im Backend macht. –

+0

ist es nicht ein Problem, Angreifern zu erlauben, ihre Angriffe in ihrem Browser zu testen, während Sie keine ihrer Versuche sehen? – siukurnin

Antwort

9

Sie einen Blick auf die in dieser Frage Sanitize/Rewrite HTML on the Client Side

empfohlen haben sollte

Und nur um sicher zu sein, dass Sie nicht mehr über XSS tun müssen, treten Sie die Antworten auf diese eine How to prevent Javascript injection attacks within user-generated HTML

+1

Caja sieht gut aus, aber schwer. Ich muss testen, ob es schnell genug ist. Ich bezweifle es jedoch. Ich bin sicher, dass ich vor XSS sicher bin, weil der HTML-Code, den ich analysiere, niemals an den Server gesendet wird. Ich sende den originalen Markdown. Der HTML-Code, den ich bereinigen muss, ist nur die Vorschau und niemand außer dem Benutzer, der es eingibt, wird es jemals sehen. –

-1

Bewertung Für meine Funktion hat es mich nur interessiert, dass der String nicht leer ist und nur alphanumerische Zeichen enthält. Dies verwendet plain JS und keine dritten Bibliotheken oder irgendetwas. Es enthält eine lange Regex, aber es macht den Job;) Sie könnten darauf aufbauen, aber haben Sie Ihre Regex etwas ähnlicher '< Skript> | </script> '(mit Zeichen, die bei Bedarf entfernt werden, und abzüglich der Leerzeichen).;)

var validateString = function(string) { 

     var validity = true; 

     if(string == '') { validity = false; } 

     if(string.match(/[ |<|,|>|\.|\?|\/|:|;|"|'|{|\[|}|\]|\||\\|~|`|!|@|#|\$|%|\^|&|\*|\(|\)|_|\-|\+|=]+/) != null) { 

      validity = false; 
     } 

     return validity; 
    } 
Verwandte Themen