Was ist die beste Art und Weise Benutzer generierten HTML-Inhalt zu behandeln, die von der Öffentlichkeit gesehen werden?

Question

In meiner Web-Anwendung erlaube ich nutzergenerierte Inhalte für die Öffentlichkeit zu Stackoverflow ähnlich geschrieben werden.

Was ist die beste Praxis ist dies für das Austeilen?

Meine aktuellen Schritte für User generated Content Handling sind:

1. Ich verwende MarkItUp Benutzern zu ermöglichen, eine einfache Möglichkeit, ihre HTML formatiert werden.

2. Nachdem ein Benutzer vorgelegt thier Änderungen, die ich es durch eine HTML Sanitizer (blättern Sie zu der bottem) , die verwendet eine weiße Liste Ansatz.

3. Wenn der Sanitization Prozess hat jeden Benutzer erstellt Inhalte, die ich entfernt nicht den Inhalt speichern. Ich habe dann Rück dort modifizierten Inhalte mit einem Warnmeldung, "Einige illegal Material Tags, wo festgestellt und entferntem überprüfen Sie Ihre Arbeit und versuchen Sie es erneut. "

4. Wenn der Inhalt geht durch die sanitization Prozess sauber, ich spare die rohe html Inhalt der Datenbank.

5. Wenn auf dem Client-Rendering ich nur vorbei an die rohe html aus dem db die Seite.

Answer 1

Das ist ein ganz vernünftiger Ansatz. Für typische Anwendungen ist es völlig ausreichend sein.

Der schwierigste Teil des Whitelisting raw HTML ist das style Attribut und embed / object. Es gibt legitime Gründe, warum jemand wünschen könnte CSS-Stile in einen ansonsten nicht vertrauenswürdigen Block von formatierten Text zu setzen, oder zu sagen, ein eingebettetes YouTube-Video. Dieses Problem kommt am häufigsten mit RSS-Feeds. Sie können nicht dem willkürlichen Textblock in einem Feed-Eintrag enthielt vertrauen, aber Sie wollen nicht auf Streifen aus, zum Beispiel Syntax CSS oder Flash-Video über, denn das ist im Grunde den Inhalt ändern würde und möglicherweise jemand es lesen verwirren. Da CSS gefährliche Dinge wie Verhalten in IE enthalten können, können Sie die CSS analysieren haben, wenn Sie das Attribut style zu gestatten, vertraglich zu bleiben. Und mit embed / object können Sie weiß-Liste Host-Namen müssen.

Nachträge:

Im schlimmsten Fall, zu entkommen HTML alles im Blick auf eine sehr schlechte Benutzererfahrung führen kann. Es ist viel besser so etwas wie eine des HTML5-Parsers zu verwenden, um durch das DOM mit weißer Liste zu gehen. Dies ist wesentlich flexibler in Bezug darauf, wie Sie die hygienisiert Ausgabe an den Benutzer präsentieren. Sie können auch Dinge wie:

<div class="sanitized">
  <div class="notice">
    This was sanitized for security reasons.
  </div>
  <div class="raw"><pre>
    &lt;script&gt;alert("XSS!");&lt;/script&gt;
  </pre></div>
</div>

Dann die .raw Sachen mit CSS verstecken, und verwenden Sie jQuery einen Click-Handler auf die .sanitized div zu binden, die zwischen .raw und .notice umgeschaltet wird:

CSS:

.raw {
  display: none;
}

jQuery:

$('.sanitized').click(function() {
  $(this).find('.notice').toggle();
  $(this).find('.sanitized').toggle();
});

Answer 2

Die weiße Liste ist ein guter Schritt. Jede schwarze Liste Lösung neigt zu lassen durch mehr als es sollte, weil man einfach nicht an alles denken. Ich habe einige attemts gesehen schwarze Listen (zum Beispiel The Code Project), und wenn sie es schaffen, alles zu fangen, in der Regel verursachen sie noch zusätzliche Probleme wie Zeichen in Code zu ersetzen, so dass es nicht ohne manuell die Wiederherstellung verwendet werden kann, zuerst .

Die sicherste Methode wäre:

1. HTML kodieren den gesamten Text.

2. eine Reihe von erlaubten Tags und Attributen übereinstimmen und solche entschlüsseln.

Mit einem regulären Ausdruck Sie können auch verlangen, dass jeder öffnende Tag einen schließenden Tag hat, so dass ein nicht geschlossenen Tag kann nicht vermasselt die Seite.

Sie sollten der Lage sein, diese wie zehn Zeilen Code in etwas zu tun, so dass der Code, den Sie scheint verbunden zu kompliziert.