Sicheres Rendern von Benutzerinhalten in Angular2 App

Question

Ich habe zwei Angular 2 Apps: eine für Endbenutzer und eine für eine Redaktion. Beide sind in Javascript geschrieben.

Die Endbenutzer-App ist im Grunde eine WhatsApp-ähnliche Chat-Ansicht, in der ein Benutzer mit der Redaktion 1-on-1 chatten kann. Die redaktionelle App zeigt eine Liste aller Konversationen an und hat für jede Konversation eine WhatsApp-ähnliche Chat-Ansicht.

So weit, so gut. Alles funktioniert gut. Ich habe jedoch eine Frage zur Sicherheit. In einer ersten Version wird der Inhalt einer Nachricht in der Redaktion App wurde mit der innerHTML- Aussage gemacht:

<div [innerHTML]="message.data.text"></div> 

Wenn ein Benutzer Mißbrauch des Chat-Eingabefeld, aber, und Typen in

Nachricht

, diese HTML-Anweisung gerendert, was wir nicht wollen (weil es zu bösartigen Versuchen mit Script-Tags usw. führen könnte). Ich bemerkte jedoch, dass Angular2 schlau genug ist, JavaScript nicht zu rendern, aber ich bin mir nicht sicher, ob jede Art von Code-Injection abgedeckt ist. Also änderte ich dies:

<div>{{ message.data.text }}</div> 

Diese alle HTML ignoriert und macht

<h1> Nachricht </h1 >

Ist dies ein sicherer Weg, dies zu tun? Oder gibt es noch immer Täter? Ich denke, der beste Weg, um dieses Problem anzugehen, ist, alle unsicheren Eingabe im Backend herauszufiltern (gibt es eine zuverlässige Möglichkeit, das zu tun?)

Vielen Dank!

Answer 1

Sie sollten versuchen, ein Skript-Tag einzufügen und wird herausfinden, dass es nicht mehr rendert und eine Warnung in der Konsole auslöst. Dasselbe gilt, wenn Sie die [innerHtml] Bindung verwenden und versuchen, ein <input>-Tag zu erstellen. Dies wird auch scheitern.

Um systematisch XSS-Fehler zu blockieren, behandelt Angular standardmäßig alle Werte als nicht vertrauenswürdig. Wenn ein Wert in das DOM aus einer Vorlage eingelegt ist, über Eigenschaft, ein Attribut, Klasse Bindung oder Interpolation, Angular saniert und nicht vertrauenswürdigen Wert entkommt

lesen security Abschnitt des Winkelführungs für weitere Informationen.

Wenn Sie jedoch nicht möchten, dass der Benutzer HTML generiert, sollten Sie immer die Interpolationsbindung ({{text}}) verwenden.

Interpolierter Inhalt wird immer maskiert - der HTML-Code wird nicht interpretiert, und der Browser zeigt spitze Klammern im Textinhalt des Elements an.

Damit der HTML-Code interpretiert wird, binden Sie ihn an eine HTML-Eigenschaft wie innerHTML. Das Binden eines Werts, den ein Angreifer steuern kann, verursacht normalerweise eine XSS-Sicherheitsanfälligkeit.