Angular is 'n **kragtige** en **open-source** front-end-raamwerk wat deur **Google** onderhou word. Dit gebruik **TypeScript** om koderingsleesbaarheid en foutopsporing te verbeter. Met sterk sekuriteitsmeganismes voorkom Angular algemene kliëntkant-veiligheidskwesbaarhede soos **XSS** en **open omleidings**. Dit kan ook aan die **bedienerskant** gebruik word, wat sekuriteitsoorwegings van **beide kante** belangrik maak.
Volgens die dokumentasie het elke Angular-toepassing ten minste een komponent, die hoofkomponent (`AppComponent`), wat 'n komponenthiërargie met die DOM verbind. Elke komponent definieer 'n klas wat toepassingsdata en logika bevat, en word geassosieer met 'n HTML-sjabloon wat 'n aansig definieer wat in 'n teikenomgewing vertoon moet word. Die `@Component()`-versierder identifiseer die klas onmiddellik daaronder as 'n komponent en voorsien die sjabloon en verwante komponentspesifieke metadata. Die `AppComponent` word in die `app.component.ts`-lêer gedefinieer.
Angular NgModules verklaar 'n samestellingskonteks vir 'n stel komponente wat toegewy is aan 'n toepassingsdomein, 'n werkstroom of 'n nou verwante stel vermoëns. Elke Angular-toepassing het 'n hoofmodule, konvensioneel genaamd `AppModule`, wat die opstartmeganisme verskaf wat die toepassing begin. 'n Toepassing bevat tipies baie funksionele modules. Die `AppModule` word in die `app.module.ts`-lêer gedefinieer.
Die Angular `Router` NgModule verskaf 'n diens wat jou in staat stel om 'n navigasiepad tussen die verskillende toepassingsstatusse en aanskouingshiërargieë in jou toepassing te definieer. Die `RouterModule` word in die `app-routing.module.ts`-lêer gedefinieer.
Vir data of logika wat nie met 'n spesifieke aansig geassosieer is nie en wat jy wil deel tussen komponente, skep jy 'n diensklas. 'n Diensklasdefinisie word onmiddellik deur die `@Injectable()`-versierder gevolg. Die versierder voorsien die metadata wat dit moontlik maak dat ander verskaffers as afhanklikhede in jou klas ingespuit kan word. Afhanklikheidsinspuiting (DI) stel jou in staat om jou komponentklasse slank en doeltreffend te hou. Hulle haal nie data van die bediener op, valideer gebruikersinsette nie, of log direk na die konsole nie; hulle delegeer sulke take aan dienste.
Die Angular-raamwerk vertaal TypeScript-lêers na JavaScript-kode deur die `tsconfig.json`-opsies te volg en bou dan 'n projek met die `angular.json`-konfigurasie. Deur na die `angular.json`-lêer te kyk, het ons 'n opsie opgemerk om 'n sourcemap in of uit te skakel. Volgens die Angular-dokumentasie het die verstekkonfigurasie 'n sourcemap-lêer wat ingeskakel is vir skripte en nie standaard versteek is nie:
Binding verwys na die proses van kommunikasie tussen 'n komponent en sy ooreenstemmende weergawe. Dit word gebruik om data oor te dra na en van die Angular-raamwerk. Data kan deur verskillende middels oorgedra word, soos deur gebeure, interpolasie, eienskappe, of deur die tweerigtingbinding meganisme. Verder kan data ook gedeel word tussen verwante komponente (ouer-kind verhouding) en tussen twee onverwante komponente deur die gebruik van die Diens-funksie.
* Data-bron na weergawe-teiken (sluit interpolasie, eienskappe, eienskappe, klasse en style in); kan toegepas word deur `[]` of `{{}}` in die sjabloon te gebruik;
* Weergawe-teiken na data-bron (sluit gebeure in); kan toegepas word deur `()` in die sjabloon te gebruik;
* Tweerigting; kan toegepas word deur `[()]` in die sjabloon te gebruik.
Angular se ontwerp sluit in dat alle data standaard gekodeer of gesaniteer word, wat dit toenemend moeilik maak om XSS-gebreklikhede in Angular-projekte te ontdek en uit te buit. Daar is twee onderskeie scenario's vir die hantering van data:
2. Binding aan eienskappe, eienskappe, klasse en style of `[attribute]="user_input"` - voer sanitisering uit op grond van die verskafte sekuriteitskonteks.
Angular stel 'n lys metodes bekend om sy verstek-sanitiseringproses te omseil en aan te dui dat 'n waarde veilig in 'n spesifieke konteks gebruik kan word, soos in die volgende vyf voorbeelde:
3.`bypassSecurityTrustHtml` word gebruik om aan te dui dat die gegewe waarde veilige HTML is. Let daarop dat die invoeging van `script`-elemente op hierdie manier in die DOM-boom nie sal veroorsaak dat die ingeslote JavaScript-kode uitgevoer word nie, as gevolg van hoe hierdie elemente by die DOM-boom gevoeg word.
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 kon uitvoer met behulp van hierdie metode nie.
Angular bied 'n `sanitize`-metode om data te saniteer voordat dit in weergawes vertoon word. Hierdie metode maak gebruik van die verskafte sekuriteitskonteks en skoonmaak die insette dienooreenkomstig. Dit is egter noodsaaklik om die korrekte sekuriteitskonteks vir die spesifieke data en konteks te gebruik. Byvoorbeeld, die toepassing van 'n saniteerder met `SecurityContext.URL` op HTML-inhoud bied nie beskerming teen gevaarlike HTML-waardes nie. In sulke scenario's kan misbruik van die sekuriteitskonteks lei tot XSS-gebreklikhede.
Hierdie kwesbaarheid kom voor wanneer gebruikersinvoer gekoppel is aan enige van die drie eienskappe: `innerHTML`, `outerHTML`, of `iframe``srcdoc`. Terwyl dit aan hierdie eienskappe gekoppel word, interpreteer dit HTML soos dit is, maar die invoer word gesaniteer met behulp van `SecurityContext.HTML`. Dus is HTML-inspuiting moontlik, maar kruiswebklets (XSS) nie.
Angular maak gebruik van sjablone om bladsye dinamies te konstrueer. Die benadering behels die omhulling van sjabloonuitdrukkings vir Angular om te evalueer binne dubbele krulhakies (`{{}}`). Op hierdie manier bied die raamwerk addisionele funksionaliteit. Byvoorbeeld, 'n sjabloon soos `{{1+1}}` sal as 2 vertoon.
Gewoonlik ontsnap Angular gebruikersinvoer wat verwar kan word met sjabloonuitdrukkings (bv. karakters soos \`< > ' " \`\`). Dit beteken dat addisionele stappe nodig is om hierdie beperking te omseil, soos die gebruik van funksies wat JavaScript-stringobjekte genereer om te vermy dat verbode karakters gebruik word. Om dit egter te bereik, moet ons die Angular-konteks, sy eienskappe en veranderlikes in ag neem. Daarom kan 'n sjablooninspuitingsaanval soos volg lyk:
Soos hierbo getoon: `constructor` verwys na die omvang van die Objek `constructor` eienskap, wat ons in staat stel om die String constructor aan te roep en willekeurige kode uit te voer.
In teenstelling met CSR, wat in die blaaier se DOM plaasvind, is Angular Universal verantwoordelik vir die SSR van sjabloondokumente. Hierdie dokumente word dan aan die gebruiker afgelewer. Ten spyte van hierdie onderskeid, pas Angular Universal dieselfde sanitiseringsmeganismes toe wat in CSR gebruik word om die veiligheid van SSR te verbeter. 'n Sjablooninspuitingskwesbaarheid in SSR kan op dieselfde manier soos in CSR opgespoor word, omdat dieselfde sjabloon taal gebruik word.
Natuurlik is daar ook 'n moontlikheid om nuwe sjablooninspuitingskwesbaarhede in te voer wanneer derdeparty-sjabloon-enjins soos Pug en Handlebars gebruik word.
Soos voorheen genoem, kan ons direk toegang tot die DOM verkry deur die _Document_ koppelvlak te gebruik. As gebruikersinvoer nie vooraf gevalideer word nie, kan dit lei tot kruissite-skripsing (XSS) kwesbaarhede.
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 gegee in die **Open omleidings** afdeling. Die grootste verskil tussen die eerste twee is dat die `Renderer2` API 'n abstraksie-laag tussen die DOM-element en die komponent-kode verskaf, terwyl `ElementRef` net 'n verwysing na die element bevat. Daarom moet die `ElementRef` API volgens die Angular-dokumentasie 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. Onvanpaste gebruik van `nativeElement` kan egter lei tot 'n XSS-injeksiekwesbaarheid, soos hieronder getoon:
```tsx
//app.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
* Ten spyte van die feit dat `Renderer2` API verskaf wat veilig gebruik kan word selfs wanneer direkte toegang tot inheemse elemente nie ondersteun word nie, het dit steeds sekuriteitsgebreke. Met `Renderer2` is dit moontlik om eienskappe op 'n HTML-element in te stel deur die `setAttribute()` metode te gebruik, wat geen XSS-voorkomingsmeganismes het nie.
```tsx
//app.component.ts
import {Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
Tydens ons navorsing het ons ook die gedrag van ander `Renderer2` metodes, soos `setStyle()`, `createComment()` en `setValue()`, in verband met XSS- en CSS-injeksies ondersoek. Ons kon egter geen geldige aanvalsvektore vir hierdie metodes vind as gevolg van hul funksionele beperkings nie.
jQuery is 'n vinnige, klein en funksierike JavaScript-biblioteek wat in die Angular-projek gebruik kan word om te help met die manipulasie van die HTML DOM-voorwerpe. Dit is egter bekend dat hierdie biblioteek se metodes uitgebuit kan 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. Tog kan enige jQuery-konstrukteur of -metode wat 'n HTML-string aanvaar, potensieel kode uitvoer. Dit kan gebeur deur die inspuiting van `<script>`-etikette 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>Kliek hier</button>
<p>iets teks hier</p>
```
* Die `jQuery.parseHTML()` metode gebruik inheemse metodes om die string na 'n stel DOM-node om te skakel, wat dan in die dokument ingevoeg kan word.
Soos voorheen genoem, sal die meeste jQuery-API's wat HTML-strings aanvaar, skripte uitvoer wat in die HTML ingesluit is. Die `jQuery.parseHTML()` metode voer nie skripte in die geparseerde HTML uit tensy `keepScripts` uitdruklik `true` is nie. Dit is egter steeds moontlik om in die meeste omgewings skripte indirek uit te voer; byvoorbeeld via die `<img onerror>`-eienheid.
```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 = "<imgsrc=1onerror=alert(1)>",
html = $.parseHTML(str),
nodeNames = [];
$palias.append(html);
});
}
}
//app.component.html
<button>Kliek hier</button>
<pid="palias">iets teks</p>
```
### Oop omleidings
#### DOM-koppelvlakke
Volgens die W3C-dokumentasie word die `window.location` en `document.location` voorwerpe as aliase in moderne webblaaier behandel. Dit is waarom hulle soortgelyke implementering van sommige metodes en eienskappe het, wat 'n oop omleiding en DOM XSS met `javascript://`-skema-aanvalle kan veroorsaak, soos hieronder genoem.
Die kanonieke manier om die huidige DOM-plekvoorwerp te kry, is deur `window.location` te gebruik. Dit kan ook gebruik word om die blaaier na 'n nuwe bladsy om te lei. As gevolg hiervan stel die beheer oor hierdie voorwerp ons in staat om 'n oop omleiding-kwesbaarheid uit te buit.
Hierdie metode veroorsaak dat die venster die dokument by die gespesifiseerde URL laai en vertoon. As ons beheer oor hierdie metode het, kan dit 'n put wees vir 'n oop omleiding-aanval.
Hierdie metode vervang die huidige bron met die een by die verskafte URL.
Die verskil tussen hierdie metode en die `assign()`-metode is dat nadat `window.location.replace()` gebruik is, sal die huidige bladsy nie in die sessiegeskiedenis gestoor word nie. Dit is egter ook moontlik om 'n oop omleiding-kwesbaarheid uit te buit wanneer ons beheer oor hierdie metode het.
Die `window.open()`-metode neem 'n URL en laai die bron wat dit identifiseer in 'n nuwe of bestaande oortjie of venster. Beheer oor hierdie metode kan ook 'n geleentheid wees om 'n XSS- of oop omleiding-kwesbaarheid te veroorsaak.
```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.open("https://google.com/about", "_blank")
}
}
```
#### Angular klasse
* Volgens die Angular-dokumentasie is die 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 uit te buit. `Document.location` eienskappe en metodes kan moontlike sinks wees vir suksesvolle oop omleidingsaanvalle, soos in die voorbeeld getoon:
```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
* Tydens die navorsingsfase het ons ook die Angular `Location`-klas vir oop omleidingskwesbaarhede nagegaan, maar geen geldige vektore is gevind nie. `Location` is 'n Angular-diens wat programme kan gebruik om met die huidige URL van 'n blaaier te kommunikeer. Hierdie diens het verskeie metodes om die gegewe URL te manipuleer - `go()`, `replaceState()` en `prepareExternalUrl()`. Ons kan hulle egter nie gebruik vir omleiding na 'n eksterne domein nie. Byvoorbeeld:
```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
* Die Angular `Router`-klas word hoofsaaklik gebruik vir navigasie binne dieselfde domein en voeg geen addisionele kwesbaarhede tot die toepassing by nie:
* [Angular-konteks: Maklike data-binding vir geneste komponentbome en die Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48)
* [Sanitisering en sekuriteitskontekste](https://angular.io/guide/security#sanitization-and-security-contexts)
* [Hoe om jQuery met Angular te gebruik (Wanneer jy absoluut moet)](https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9)
