# Angular ## Die Checkliste Checkliste [von hier](https://lsgeurope.com/post/angular-security-checklist). * [ ] Angular wird als Client-seitiges Framework betrachtet und wird nicht erwartet, serverseitigen Schutz zu bieten * [ ] Sourcemap für Skripte ist in der Projektkonfiguration deaktiviert * [ ] Nicht vertrauenswürdige Benutzereingaben werden immer interpoliert oder bereinigt, bevor sie in Vorlagen verwendet werden * [ ] Der Benutzer hat keine Kontrolle über serverseitige oder clientseitige Vorlagen * [ ] Nicht vertrauenswürdige Benutzereingaben werden vor der Verwendung durch die Anwendung mit einem geeigneten Sicherheitskontext bereinigt * [ ] `BypassSecurity*`-Methoden werden nicht mit nicht vertrauenswürdigen Eingaben verwendet * [ ] Nicht vertrauenswürdige Benutzereingaben werden nicht an Angular-Klassen wie `ElementRef`, `Renderer2` und `Document` oder andere JQuery/DOM-Senken übergeben ## Was ist Angular Angular ist ein **leistungsstarkes** und **Open-Source**-Front-End-Framework, das von **Google** gepflegt wird. Es verwendet **TypeScript**, um die Lesbarkeit und das Debugging des Codes zu verbessern. Mit starken Sicherheitsmechanismen verhindert Angular gängige Client-seitige Sicherheitslücken wie **XSS** und **offene Weiterleitungen**. Es kann auch auf der **Serverseite** verwendet werden, wodurch Sicherheitsüberlegungen von **beiden Seiten** wichtig sind. ## Framework-Architektur Um die Grundlagen von Angular besser zu verstehen, gehen wir durch seine wesentlichen Konzepte. Ein typisches Angular-Projekt sieht normalerweise so aus: ```bash my-workspace/ ├── ... #workspace-wide configuration files ├── src │ ├── app │ │ ├── app.module.ts #defines the root module, that tells Angular how to assemble the application │ │ ├── app.component.ts #defines the logic for the application's root component │ │ ├── app.component.html #defines the HTML template associated with the root component │ │ ├── app.component.css #defines the base CSS stylesheet for the root component │ │ ├── app.component.spec.ts #defines a unit test for the root component │ │ └── app-routing.module.ts #provides routing capability for the application │ ├── lib │ │ └── src #library-specific configuration files │ ├── index.html #main HTML page, where the component will be rendered in │ └── ... #application-specific configuration files ├── angular.json #provides workspace-wide and project-specific configuration defaults └── tsconfig.json #provides the base TypeScript configuration for projects in the workspace ``` Gemäß der Dokumentation hat jede Angular-Anwendung mindestens eine Komponente, die Wurzelkomponente (`AppComponent`), die eine Komponentenhierarchie mit dem DOM verbindet. Jede Komponente definiert eine Klasse, die Anwendungsdaten und -logik enthält und mit einer HTML-Vorlage verknüpft ist, die eine Ansicht definiert, die in einer Zielumgebung angezeigt werden soll. Der `@Component()`-Dekorator kennzeichnet die unmittelbar darunter liegende Klasse als Komponente und stellt die Vorlage und die zugehörigen komponentenspezifischen Metadaten bereit. Die `AppComponent` ist in der Datei `app.component.ts` definiert. Angular NgModules deklarieren einen Kompilierungskontext für eine Gruppe von Komponenten, die einem Anwendungsbereich, einem Arbeitsablauf oder einem eng verwandten Satz von Funktionen gewidmet sind. Jede Angular-Anwendung hat ein Root-Modul, das konventionell `AppModule` genannt wird und den Bootstrap-Mechanismus bereitstellt, der die Anwendung startet. Eine Anwendung enthält in der Regel viele funktionale Module. Das `AppModule` ist in der Datei `app.module.ts` definiert. Das Angular `Router` NgModule stellt einen Dienst bereit, mit dem Sie einen Navigationspfad zwischen den verschiedenen Anwendungszuständen und Ansichtshierarchien in Ihrer Anwendung definieren können. Das `RouterModule` ist in der Datei `app-routing.module.ts` definiert. Für Daten oder Logik, die nicht mit einer bestimmten Ansicht verknüpft sind und die Sie über Komponenten hinweg teilen möchten, erstellen Sie eine Serviceklasse. Die Definition einer Serviceklasse wird unmittelbar vom `@Injectable()`-Dekorator vorangestellt. Der Dekorator stellt Metadaten bereit, die es anderen Providern ermöglichen, als Abhängigkeiten in Ihre Klasse injiziert zu werden. Die Dependency Injection (DI) ermöglicht es Ihnen, Ihre Komponentenklassen schlank und effizient zu halten. Sie rufen keine Daten vom Server ab, validieren keine Benutzereingaben und protokollieren nicht direkt in die Konsole; diese Aufgaben werden an Services delegiert. ## Sourcemap-Konfiguration Das Angular-Framework übersetzt TypeScript-Dateien in JavaScript-Code, indem es die Optionen der `tsconfig.json` befolgt und dann ein Projekt mit der Konfiguration der `angular.json` erstellt. Beim Betrachten der Datei `angular.json` haben wir eine Option zur Aktivierung oder Deaktivierung einer Sourcemap festgestellt. Gemäß der Angular-Dokumentation ist die Standardkonfiguration für Skripte eine aktivierte Sourcemap-Datei, die standardmäßig nicht ausgeblendet ist: ```json "sourceMap": { "scripts": true, "styles": true, "vendor": false, "hidden": false } ``` Generell werden Sourcemap-Dateien zu Debugging-Zwecken verwendet, da sie generierte Dateien ihren Originaldateien zuordnen. Daher wird nicht empfohlen, sie in einer Produktionsumgebung zu verwenden. Wenn Sourcemaps aktiviert sind, verbessert dies die Lesbarkeit und erleichtert die Dateianalyse, indem der ursprüngliche Zustand des Angular-Projekts repliziert wird. Wenn sie jedoch deaktiviert sind, kann ein Überprüfer eine kompilierte JavaScript-Datei immer noch manuell analysieren, indem er nach Anti-Sicherheitsmustern sucht. Darüber hinaus kann eine kompilierte JavaScript-Datei mit einem Angular-Projekt in den Browser-Entwicklertools → Quellen (oder Debugger und Quellen) → \[id].main.js gefunden werden. Abhängig von den aktivierten Optionen kann diese Datei die folgende Zeile am Ende enthalten `//# sourceMappingURL=[id].main.js.map` oder auch nicht, wenn die **hidden**-Option auf **true** gesetzt ist. Wenn die Sourcemap jedoch für **Skripte** deaktiviert ist, wird das Testen komplexer und wir können die Datei nicht erhalten. Darüber hinaus kann die Sourcemap während des Projektbuilds aktiviert werden, z.B. mit `ng build --source-map`. ## Datenbindung Binding bezieht sich auf den Prozess der Kommunikation zwischen einer Komponente und ihrer entsprechenden Ansicht. Es wird verwendet, um Daten zwischen dem Angular-Framework zu übertragen. Daten können auf verschiedene Weise übertragen werden, z.B. durch Ereignisse, Interpolation, Eigenschaften oder durch den Mechanismus der bidirektionalen Bindung. Darüber hinaus können Daten zwischen verwandten Komponenten (Eltern-Kind-Beziehung) und zwischen zwei nicht verwandten Komponenten mithilfe der Service-Funktion geteilt werden. Wir können die Bindung nach Datenfluss klassifizieren: * Datenquelle zum Ansichtsziel (umfasst _Interpolation_, _Eigenschaften_, _Attribute_, _Klassen_ und _Styles_); kann mit `[]` oder `{{}}` in der Vorlage angewendet werden; * Ansichtsziel zur Datenquelle (umfasst _Ereignisse_); kann mit `()` in der Vorlage angewendet werden; * Bidirektional; kann mit `[()]` in der Vorlage angewendet werden. Binding kann auf Eigenschaften, Ereignisse und Attribute angewendet werden, sowie auf jedes öffentliche Element einer Quellrichtlinie: | TYP | ZIEL | BEISPIELE | | --------- | -------------------------------------------------------- | -------------------------------------------------------------------- | | Eigenschaft | Elementeigenschaft, Komponenteneigenschaft, Direktiveigenschaft | \ | | Ereignis | Elementereignis, Komponentenereignis, Direktiveereignis | \ ``` * Um die Eigenschaft eines DOM-Elements festzulegen, können Sie die Methode `Renderer2.setProperty()` verwenden und einen XSS-Angriff auslösen: ```tsx //app.component.ts import {Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public constructor ( private renderer2: Renderer2 ){} @ViewChild("img") img!: ElementRef; setProperty(){ this.renderer2.setProperty(this.img.nativeElement, 'innerHTML', ''); } } //app.component.html ``` Während unserer Recherche haben wir auch das Verhalten anderer `Renderer2`-Methoden wie `setStyle()`, `createComment()` und `setValue()` in Bezug auf XSS- und CSS-Injektionen untersucht. Aufgrund ihrer funktionalen Einschränkungen konnten wir jedoch keine gültigen Angriffsvektoren für diese Methoden finden. #### jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek, die in Angular-Projekten zur Manipulation von HTML-DOM-Objekten verwendet werden kann. Wie bekannt ist, können die Methoden dieser Bibliothek ausgenutzt werden, um eine XSS-Schwachstelle zu erreichen. Um zu diskutieren, wie einige anfällige jQuery-Methoden in Angular-Projekten ausgenutzt werden können, haben wir diesen Unterabschnitt hinzugefügt. * Die Methode `html()` gibt den HTML-Inhalt des ersten Elements im Satz der übereinstimmenden Elemente zurück oder legt den HTML-Inhalt jedes übereinstimmenden Elements fest. Jedoch kann jede jQuery-Konstruktor- oder -Methode, die einen HTML-String akzeptiert, potenziell Code ausführen. Dies kann durch das Einfügen von `"); }); } } //app.component.html

some text here

``` * Die Methode `jQuery.parseHTML()` verwendet native Methoden, um den String in eine Reihe von DOM-Knoten umzuwandeln, die dann in das Dokument eingefügt werden können. ```tsx jQuery.parseHTML(data [, context ] [, keepScripts ]) ``` Wie zuvor erwähnt, werden die meisten jQuery-APIs, die HTML-Strings akzeptieren, Skripte ausführen, die im HTML enthalten sind. Die Methode `jQuery.parseHTML()` führt keine Skripte in dem analysierten HTML aus, es sei denn, `keepScripts` ist explizit `true`. Es ist jedoch immer noch möglich, Skripte indirekt auszuführen, zum Beispiel über das Attribut ``. ```tsx //app.component.ts import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { ngOnInit() { $("button").on("click", function() { var $palias = $("#palias"), str = "", html = $.parseHTML(str), nodeNames = []; $palias.append(html); }); } } //app.component.html

some text

``` ### Open Redirects #### DOM-Schnittstellen Gemäß der W3C-Dokumentation werden die Objekte `window.location` und `document.location` in modernen Browsern als Aliase behandelt. Aus diesem Grund haben sie eine ähnliche Implementierung einiger Methoden und Eigenschaften, die eine Open-Redirect- und DOM-XSS mit `javascript://`-Schema-Angriffe verursachen können, wie unten beschrieben. * `window.location.href`(und `document.location.href`) Der kanonische Weg, das aktuelle DOM-Location-Objekt zu erhalten, besteht darin, `window.location` zu verwenden. Es kann auch verwendet werden, um den Browser zu einer neuen Seite umzuleiten. Daher ermöglicht uns die Kontrolle über dieses Objekt, eine Open-Redirect-Schwachstelle auszunutzen. ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.location.href = "https://google.com/about" } } //app.component.html ``` Der Ausbeutungsprozess ist für die folgenden Szenarien identisch. * `window.location.assign()`(und `document.location.assign()`) Diese Methode bewirkt, dass das Fenster das Dokument an der angegebenen URL lädt und anzeigt. Wenn wir die Kontrolle über diese Methode haben, könnte sie ein Angriffsziel für einen Open-Redirect-Angriff sein. ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.location.assign("https://google.com/about") } } ``` * `window.location.replace()`(und `document.location.replace()`) Diese Methode ersetzt die aktuelle Ressource durch diejenige unter der angegebenen URL. Der Unterschied zur Methode `assign()` besteht darin, dass nach Verwendung von `window.location.replace()` die aktuelle Seite nicht im Sitzungsverlauf gespeichert wird. Es ist jedoch auch möglich, eine Open-Redirect-Schwachstelle auszunutzen, wenn wir die Kontrolle über diese Methode haben. ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.location.replace("http://google.com/about") } } ``` * `window.open()` Die Methode `window.open()` nimmt eine URL entgegen und lädt die Ressource, die sie identifiziert, in einem neuen oder vorhandenen Tab oder Fenster. Die Kontrolle über diese Methode könnte auch eine Möglichkeit sein, eine XSS- oder Open-Redirect-Schwachstelle auszulösen. ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.open("https://google.com/about", "_blank") } } ``` #### Angular-Klassen * Laut der Angular-Dokumentation ist die Angular-Klasse `Document` dasselbe wie das DOM-Dokument, was bedeutet, dass gängige Vektoren für das DOM-Dokument verwendet werden können, um clientseitige Schwachstellen in Angular auszunutzen. Die Eigenschaften und Methoden von `Document.location` können als Angriffsvektoren für erfolgreiche Open-Redirect-Angriffe dienen, wie im folgenden Beispiel gezeigt: ```tsx //app.component.ts import { Component, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(@Inject(DOCUMENT) private document: Document) { } goToUrl(): void { this.document.location.href = 'https://google.com/about'; } } //app.component.html ``` * Während der Recherche haben wir auch die Angular-Klasse `Location` auf Open-Redirect-Schwachstellen überprüft, aber es wurden keine gültigen Vektoren gefunden. `Location` ist ein Angular-Service, den Anwendungen verwenden können, um mit der aktuellen URL des Browsers zu interagieren. Dieser Service verfügt über mehrere Methoden zur Manipulation der angegebenen URL - `go()`, `replaceState()` und `prepareExternalUrl()`. Wir können sie jedoch nicht zur Umleitung auf eine externe Domain verwenden. Zum Beispiel: ```tsx //app.component.ts import { Component, Inject } from '@angular/core'; import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}], }) export class AppComponent { location: Location; constructor(location: Location) { this.location = location; } goToUrl(): void { console.log(this.location.go("http://google.com/about")); } } ``` Ergebnis: `http://localhost:4200/http://google.com/about` * Die Angular-Klasse `Router` wird hauptsächlich zum Navigieren innerhalb der gleichen Domäne verwendet und führt keine zusätzlichen Schwachstellen in der Anwendung ein: ```jsx //app-routing.module.ts const routes: Routes = [ { path: '', redirectTo: 'https://google.com', pathMatch: 'full' }] ``` Ergebnis: `http://localhost:4200/https:` Die folgenden Methoden navigieren ebenfalls innerhalb des Domänenbereichs: ```jsx const routes: Routes = [ { path: '', redirectTo: 'ROUTE', pathMatch: 'prefix' } ] this.router.navigate(['PATH']) this.router.navigateByUrl('URL') ``` ## Referenzen * [Angular](https://angular.io/) * [Angular Security: Der ultimative Leitfaden (Teil 1)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-1) * [Angular Security: Der ultimative Leitfaden (Teil 2)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-2) * [Angular Security: Der ultimative Leitfaden (Teil 3)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-3) * [Angular Security: Checkliste](https://lsgeurope.com/post/angular-security-checklist) * [Workspace- und Projektdateistruktur](https://angular.io/guide/file-structure) * [Einführung in Komponenten und Vorlagen](https://angular.io/guide/architecture-components) * [Konfiguration der Quellkarten](https://angular.io/guide/workspace-config#source-map-configuration) * [Bindungssyntax](https://angular.io/guide/binding-syntax) * [Angular-Kontext: Einfache Datenbindung für verschachtelte Komponentenbäume und den Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48) * [Sanktionierung und Sicherheitskontexte](https://angular.io/guide/security#sanitization-and-security-contexts) * [GitHub - angular/dom\_security\_schema.ts](https://github.com/angular/angular/blob/main/packages/compiler/src/schema/dom\_security\_schema.ts) * [XSS in Angular und AngularJS](https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/XSS%20Injection/XSS%20in%20Angular.md) * [Angular Universal](https://angular.io/guide/universal) * [DOM XSS](https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting/dom-xss) * [Angular ElementRef](https://angular.io/api/core/ElementRef) * [Angular Renderer2](https://angular.io/api/core/Renderer2) * [Renderer2-Beispiel: Manipulation des DOM in Angular - TekTutorialsHub](https://www.tektutorialshub.com/angular/renderer2-angular/) * [jQuery API-Dokumentation](http://api.jquery.com/) * [Wie man jQuery mit Angular verwendet (wenn es unbedingt erforderlich ist)](https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9) * [Angular Document](https://angular.io/api/common/DOCUMENT) * [Angular Location](https://angular.io/api/common/Location) * [Angular Router](https://angular.io/api/router/Router)