Denken und Praktizieren der Front-End- und Back-End-Trennung auf Basis von NodeJS (4) Solutions to security issues

Vorwort

Im Front-End- und Back-End-Trennungsentwicklungsmodell ist eine der offensichtlichsten Änderungen in Bezug auf Entwicklungsrollen und -funktionen: In der Vergangenheit waren Front-End-Studenten nur für die Entwicklung in der Browserumgebung verantwortlich um sich auf der Serverebene zu versuchen. Schreiben Sie serverseitigen Code. Eine grundlegende Frage, mit der wir konfrontiert sind, ist: Wie kann die Web-Sicherheit gewährleistet werden?

Dieser Artikel schlägt unter der Architektur des Front-End- und Back-End-Trennmodus Lösungen für die Sicherheitsprobleme vor, auf die das Front-End bei der Webentwicklung stößt, sowie Gegenmaßnahmen und Vorsichtsmaßnahmen.

Abwehr gegen Cross-Site-Scripting-Angriffe (XSS)

Probleme und Lösungen

Cross-Site-Scripting-Angriffe (XSS, Cross-Site-Scripting) sind die häufigste und grundlegendste Methode zum Angriff auf Websites. Ein Angreifer kann Daten mit anstößigem Code auf einer Webseite veröffentlichen. Wenn ein Betrachter die Webseite sieht, wird ein bestimmtes Skript mit der Identität und den Berechtigungen des Benutzers des Betrachters ausgeführt. XSS kann Benutzerdaten leicht ändern, Benutzerinformationen stehlen und andere Arten von Angriffen wie CSRF-Angriffe verursachen.

Die grundlegende Methode zur Verhinderung von XSS-Angriffen besteht darin, sicherzustellen, dass alle an eine HTML-Seite ausgegebenen Daten in HTML maskiert werden (HTML-Escape). Zum Beispiel der folgende Vorlagencode:

Code kopieren Der Code lautet wie folgt:

$description in diesem Code ist eine Vorlagenvariable (die Syntax der in verschiedenen Vorlagen definierten Variablen ist unterschiedlich, hier nur zur Veranschaulichung), die vom Benutzer übermittelten Daten, dann kann der Angreifer einen Code mit „JavaScript“ eingeben ", so dass Das Ergebnis der obigen Vorlagenanweisung das folgende Ergebnis wird:

Code kopieren Der Code lautet wie folgt:

<br>
<script>alert('hello')'</script>

Der obige Code führt beim Rendern im Browser den JavaScript-Code aus und meldet „Hallo“ auf dem Bildschirm. Natürlich ist dieser Code harmlos, aber ein Angreifer kann ein JavaScript erstellen, um Benutzerinformationen zu ändern oder Cookie-Daten zu stehlen.

Die Lösung ist sehr einfach, nämlich den Wert von $description mit HTML zu maskieren. Der maskierte Ausgabecode lautet wie folgt

Code kopieren Der Code lautet wie folgt:

<br>
<script>alert("hello!")</script>

Der oben maskierte HTML-Code ist harmlos.

Midways Lösung

Alle Benutzerausgabedaten auf der Seite maskieren

Es gibt verschiedene Situationen und Methoden, um Daten zu umgehen:

1. Verwenden Sie den in der Vorlage bereitgestellten Mechanismus, um zu entkommen

Midway verwendet intern KISSY xtemplate als Vorlagensprache.

In der xtemplate-Implementierung werden zwei eckige Klammern ({{val}}) verwendet, um die Vorlagendaten grammatikalisch zu analysieren. Standardmäßig sind die Daten mit HTML-Escapezeichen versehen, sodass Entwickler Vorlagen wie folgt schreiben können:

Code kopieren Der Code lautet wie folgt:

Wenn Sie in xtemplate nicht möchten, dass die Ausgabedaten maskiert werden, müssen Sie drei eckige Klammern ({{{val}}}) verwenden.

2. Rufen Sie explizit die Escape-Funktion in Midway auf

Entwickler können die von Midway bereitgestellte HTML-Escape-Methode direkt im Node.js-Programm oder in der Vorlage aufrufen, um die Daten explizit zu maskieren, wie folgt:

Methode 1: HTML-Escape-Daten im Node.js-Programm

Code kopieren Der Code lautet wie folgt:

var Security= require('midway-security');

//Daten vom Server, zB {html:'', other:""}

data.html =Security.escapeHtml(data.html);

xtpl = xtpl.render(data);

Methode 2: HTML-Escape für die HTML-Daten in der Vorlage

Code kopieren Der Code lautet wie folgt:

Hinweis: Verwenden Sie Security.escapeHtml nur zum Escape, wenn die Daten nicht innerhalb der Vorlage maskiert sind. Andernfalls werden zwei Escapezeichen innerhalb der Vorlage und im Programm überlagert, was zu einer unerwarteten Ausgabe führt.

Empfehlung: Wenn Sie xtemplate verwenden, wird empfohlen, das integrierte {{}} der Vorlage zum Escapen zu verwenden. Wenn Sie andere Vorlagen verwenden, wird empfohlen, Security.escapeHtml zum Escapen zu verwenden.

Filtern Sie die Rich-Text-Ausgabe nach Benutzern auf der Seite

Sie denken vielleicht: „Eigentlich möchte ich nur Rich Text ausgeben. Einige Message Boards und Foren bieten Benutzern beispielsweise einige einfache Funktionen für Schriftgröße, Farbe, Hintergrund und andere um XSS zu verhindern? Was?“

1. Verwenden Sie die von Security in Midway bereitgestellte RichText-Funktion

Midway stellt die RichText-Methode bereit, die speziell zum Filtern von Rich Text und zur Verhinderung von Schwachstellen wie XSS, Phishing und Cookie-Diebstahl verwendet wird.

Es gibt ein Message Board, der Vorlagencode könnte wie folgt lauten:

Code kopieren Der Code lautet wie folgt:

{{{Nachricht}}}

Da es sich bei der Nachricht um Benutzereingabedaten handelt und der Inhalt des Message Boards Rich-Text-Informationen enthält, werden hier in xtemplate drei geschweifte Klammern verwendet und die HTML-Escape-Funktion wird standardmäßig nicht durchgeführt wie folgt:

Code kopieren Der Code lautet wie folgt:

http://eval.com/eval.js"> style="color:red;font-size:20px;position:fixed ;">Ich hinterlasse eine Nachricht

Wenn die oben genannten Rich-Text-Daten direkt auf der Seite ausgegeben werden, führt dies unweigerlich dazu, dass die js der Website eval.com in die aktuelle Seite eingefügt werden, was zu einem XSS-Angriff führt. Um diese Sicherheitsanfälligkeit zu verhindern, müssen wir lediglich die Security.richText-Methode in der Vorlage oder im Programm aufrufen, um den vom Benutzer eingegebenen Rich-Text zu verarbeiten.

Die aufrufende Methode ähnelt escapeHtml, es gibt zwei Möglichkeiten:

Methode 1: Direkt im Node.js-Programm aufrufen

Code kopieren Der Code lautet wie folgt:

message =Security.richText(message);

var html = xtpl.render(message)

Methode 2: Rufen Sie

in der Vorlage auf

Code kopieren Der Code lautet wie folgt:

Security.richText({{{message}}})

Nach dem Aufruf der richText-Methode von Security sieht die endgültige Ausgabe wie folgt aus:

Code kopieren Der Code lautet wie folgt:

Ich hinterlasse eine Nachricht

Es ist zu erkennen, dass zunächst die Skript-Tags, die XSS-Angriffe verursachen können, gleichzeitig auch das CSS-Attribut position:fixed style im Style-Tag gefiltert werden. Endlich harmlosen HTML-Rich-Text ausgeben

Erfahren Sie mehr über andere mögliche Wege für XSS-Angriffe

Neben möglichen XSS-Angriffen in Seitenvorlagen gibt es mehrere andere Möglichkeiten, auf denen Webanwendungen gefährdet sein können.

1. Sicherheitslücke auf der Fehlerseite

Wenn eine Seite nicht gefunden werden kann, meldet das System möglicherweise den Fehler 404 Nicht gefunden, zum Beispiel: http://localhost/page/not/found

404 NotFound
Seite /page/not/found wird nicht beendet
Offensichtlich: Ein Angreifer kann diese Seite verwenden, um eine Verbindung wie diese aufzubauen: http://localhost/

Neueste Artikel des Autors