© best_vector/Shutterstock.com
Windows Developer
Tipps und Tricks rund um .NET und Visual Studio

Kolumne: .NETversum


Mit AngularJS auf unsichere Eingaben reagieren

Um zu vermeiden, dass Angreifer zum Beispiel über Formularfelder Schadcode in die Anwendung einschleusen, kodiert AngularJS standardmäßig unsichere Inhalte, wie HTML-Elemente, bei der Datenbindung. Das soll hier anhand des Models in Listing 1 veranschaulicht werden.

Listing 1: Eigenschaft mit HTML-Elementen

app.controller("editFlugCtrl", function ($scope) { $scope.vm = {}; $scope.vm.flug = { flugNummer: "LH4711", von: "Graz", nach: "Frankfurt", datum: new Date(), anmerkungen: "<b>Hallo Welt!</b><a onmouseover='this.textContent = \"Aua!\"'>Klick mich!</a>" } };

Bindet der Entwickler die Eigenschaft anmerkungen, die HTML-Markup beinhaltet, unter Verwendung von {{vm.flug.anmerkungen}}, schreibt AngularJS eine HTML-kodierte Version dieses Markups in die Seite, sodass diese den String ohne Berücksichtigung des Mark­ups widerspiegelt. Möchte der Entwickler hingegen, dass der Browser das Markup interpretiert, muss er die Direktive ng-bind-html heranziehen:

<span ng-bind-html="vm.flug.anmerkungen"></span>

Um zu verhindern, dass AngularJS auf diesem Weg Schadcode in der Anwendung platziert, erzwingt es eine so genannte Bereinigung (engl. sanitization) des Mark­ups. Ohne diese quittiert ng-bind-html den Dienst mit einer Fehlermeldung. Damit ng-bind-html diese Bereinigung durchführen kann, bindet der Entwickler das Modul ngSanitize ein. Dazu ist die Skriptdatei dieses Moduls zu inkludieren:

<script src="scripts/angular-sanitize/angular-sanitize.min.js"></script>

Darüber hinaus ist das Modul in das eigene zu importieren:

var app = angular.module("flug", ['ngMessages', 'ngSanitize']);

Ist damit die Voraussetzung für die Bereinigung geschaffen, erledigt ng-bind-html den Rest. Im betrachteten Beispiel würde ng-bind-html im Zuge der Datenbindung die Ereignisbehandlungsroutine onmouseover aus dem Markup in der Eigenschaft anmerkungen entfernen.

Der Entwickler hat aber auch die Möglichkeit, einen String manuell zu bereinigen. Dazu lässt er sich die Funktion $sanitize injizieren, an die er den String übergibt. Die Funktion getAnmerkungenSanitized im Model veranschaulicht dies (Listing 2).

Listing 2: Manuelle Bereinigung mit „$sanitize“

app.controller("editFlugCtrl", function ($scope, $sanitize) { $scope.vm = {}; $scope.vm.flug = { flugNummer: "LH4711", von: "Graz", nach: "Frankfurt", datum: new Date(), anmerkungen: "<b>Hallo Welt!</b><a onmouseover='this.textContent =\"Aua!\"'>Klick mich!</a>", getAnmerkungenSanitized: functi...
Windows Developer
Tipps und Tricks rund um .NET und Visual Studio

Kolumne: .NETversum

Um zu vermeiden, dass Angreifer zum Beispiel über Formularfelder Schadcode in die Anwendung einschleusen, kodiert AngularJS standardmäßig unsichere Inhalte, wie HTML-Elemente, bei der Datenbindung. Das soll hier anhand des Models in Listing 1 veranschaulicht werden.

Holger Schwichtenberg, Manfred Steyer


Mit AngularJS auf unsichere Eingaben reagieren

Um zu vermeiden, dass Angreifer zum Beispiel über Formularfelder Schadcode in die Anwendung einschleusen, kodiert AngularJS standardmäßig unsichere Inhalte, wie HTML-Elemente, bei der Datenbindung. Das soll hier anhand des Models in Listing 1 veranschaulicht werden.

Listing 1: Eigenschaft mit HTML-Elementen

app.controller("editFlugCtrl", function ($scope) { $scope.vm = {}; $scope.vm.flug = { flugNummer: "LH4711", von: "Graz", nach: "Frankfurt", datum: new Date(), anmerkungen: "<b>Hallo Welt!</b><a onmouseover='this.textContent = \"Aua!\"'>Klick mich!</a>" } };

Bindet der Entwickler die Eigenschaft anmerkungen, die HTML-Markup beinhaltet, unter Verwendung von {{vm.flug.anmerkungen}}, schreibt AngularJS eine HTML-kodierte Version dieses Markups in die Seite, sodass diese den String ohne Berücksichtigung des Mark­ups widerspiegelt. Möchte der Entwickler hingegen, dass der Browser das Markup interpretiert, muss er die Direktive ng-bind-html heranziehen:

<span ng-bind-html="vm.flug.anmerkungen"></span>

Um zu verhindern, dass AngularJS auf diesem Weg Schadcode in der Anwendung platziert, erzwingt es eine so genannte Bereinigung (engl. sanitization) des Mark­ups. Ohne diese quittiert ng-bind-html den Dienst mit einer Fehlermeldung. Damit ng-bind-html diese Bereinigung durchführen kann, bindet der Entwickler das Modul ngSanitize ein. Dazu ist die Skriptdatei dieses Moduls zu inkludieren:

<script src="scripts/angular-sanitize/angular-sanitize.min.js"></script>

Darüber hinaus ist das Modul in das eigene zu importieren:

var app = angular.module("flug", ['ngMessages', 'ngSanitize']);

Ist damit die Voraussetzung für die Bereinigung geschaffen, erledigt ng-bind-html den Rest. Im betrachteten Beispiel würde ng-bind-html im Zuge der Datenbindung die Ereignisbehandlungsroutine onmouseover aus dem Markup in der Eigenschaft anmerkungen entfernen.

Der Entwickler hat aber auch die Möglichkeit, einen String manuell zu bereinigen. Dazu lässt er sich die Funktion $sanitize injizieren, an die er den String übergibt. Die Funktion getAnmerkungenSanitized im Model veranschaulicht dies (Listing 2).

Listing 2: Manuelle Bereinigung mit „$sanitize“

app.controller("editFlugCtrl", function ($scope, $sanitize) { $scope.vm = {}; $scope.vm.flug = { flugNummer: "LH4711", von: "Graz", nach: "Frankfurt", datum: new Date(), anmerkungen: "<b>Hallo Welt!</b><a onmouseover='this.textContent =\"Aua!\"'>Klick mich!</a>", getAnmerkungenSanitized: functi...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang