HackTricks TrainingTwitterLinkedinSponsor

Angular

The Checklist

Checklist from here.

What 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, keer 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.

Framework architecture

In orde om die basiese beginsels van Angular beter te verstaan, laat ons deur sy essensiële konsepte gaan.

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 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 die 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 geaktiveer is vir skrifte en is nie standaard versteek nie:

"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": false
}
Oor die 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êeranalisering deur die oorspronklike toestand van die Angular-projek te repliseer. As hulle egter gedeaktiveer is, kan 'n beoordelaar steeds 'n saamgestelde JavaScript-lêer handmatig ontleed deur te soek na anti-sekuriteitspatrone.

Verder kan 'n saamgestelde JavaScript-lêer met 'n Angular-projek in die blaaier 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 **versteekte** opsie op **waar** 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 Diens-funksie.

Ons kan binding klassifiseer volgens datastroom:

* Data bron na weergawe teiken (sluit _interpolasie_, _eienskappe_, _attribuut_, _klasse_ en _style_ in); kan toegepas word deur `[]` of `{{}}` in sjabloon;
* Weergawe teiken na data bron (sluit _gebeurtenisse_ in); kan toegepas word deur `()` in sjabloon;
* Twee-rigting; kan toegepas word deur `[()]` in sjabloon.

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

| TIPE      | 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()">Stoor                    |
| 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">Spesiaal                          |
| 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, attribuut, klasse en style of [attribute]="user_input" - voer sanitisering uit gebaseer op die verskafde 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 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:

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

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

//resultaat
<a _ngcontent-pqg-c12="" class="e2e-trusted-url" href="javascript:alert()">Klik my</a>

  1. bypassSecurityTrustResourceUrl word gebruik om aan te dui dat die gegewe waarde 'n veilige hulpbron 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 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.

//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 behulp van hierdie metode.

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

//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 sanitiseren 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 wat Angular moet evalueer binne dubbele krulhakies ({{}}). 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 inspuitingsaanval soos volg voorkom:

//app.component.ts
const _userInput = '{{constructor.constructor(\'alert(1)\'()}}'
@Component({
selector: 'app-root',
template: '<h1>title</h1>' + _userInput
})

As shown above: 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 blaaier 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:

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

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

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

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

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

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.

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

//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 uitbuitingsproses 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 oop omleiding aanval wees.

//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 in die sin dat 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.

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

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

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

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

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

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

Verwysings

PreviousAEM - Adobe Experience CloudNextApache

Last updated