Angular je **moćan** i **open-source** front-end okvir održavan od strane **Google-a**. Koristi **TypeScript** za poboljšanje čitljivosti i debagiranja koda. Sa snažnim mehanizmima bezbednosti, Angular sprečava uobičajene ranjivosti na klijentskoj strani kao što su **XSS** i **otvorena preusmeravanja**. Može se koristiti i na serverskoj strani, što čini bezbednosne razmatranja važnim sa **obe strane**.
Prema dokumentaciji, svaka Angular aplikacija ima barem jednu komponentu, glavnu 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 se prikazati u ciljnom okruženju. Dekorator `@Component()` identifikuje klasu ispod njega kao komponentu i pruža šablon i povezane metapodatke specifične za komponentu. `AppComponent` je definisan u fajlu `app.component.ts`.
Angular NgModules deklarišu kontekst kompilacije za skup komponenti koji je posvećen domenu aplikacije, radnom toku ili tesno povezanom skupu mogućnosti. Svaka Angular aplikacija ima glavni modul, konvencionalno nazvan `AppModule`, koji pruža mehanizam za pokretanje aplikacije. Aplikacija obično sadrži mnogo funkcionalnih modula. `AppModule` je definisan u fajlu `app.module.ts`.
NgModule `Router` u Angularu pruža uslugu koja vam omogućava da definišete put navigacije između različitih stanja aplikacije i hijerarhija prikaza u vašoj aplikaciji. `RouterModule` je definisan u fajlu `app-routing.module.ts`.
Za podatke ili logiku koja nije povezana sa određenim prikazom, a koju želite deliti između komponenti, kreirate klasu servisa. Definicija klase servisa odmah je prethodena dekoratorom `@Injectable()`. Dekorator pruža metapodatke koji omogućavaju da se drugi provajderi ubace kao zavisnosti u vašu klasu. Ubacivanje zavisnosti (DI) omogućava vam da zadržite vitke i efikasne klase komponenti. One ne preuzimaju podatke sa servera, ne validiraju korisnički unos ili ne beleže direktno u konzolu; te zadatke delegiraju servisima.
Angular okvir prevodi TypeScript fajlove u JavaScript kod prateći opcije `tsconfig.json` i zatim gradi projekat sa konfiguracijom `angular.json`. Pregledajući fajl `angular.json`, primetili smo opciju za omogućavanje ili onemogućavanje sourcemap-a. Prema Angular dokumentaciji, podrazumevana konfiguracija ima omogućen fajl sourcemap-a za skripte i podrazumevano nije sakriven:
Općenito, datoteke sourcemap se koriste u svrhe otklanjanja grešaka jer mapiraju generirane datoteke s njihovim izvornim datotekama. Stoga se ne preporučuje njihova upotreba u produkcijskom okruženju. Ako su sourcemaps omogućene, poboljšava se čitljivost i olakšava analiza datoteka repliciranjem izvornog stanja Angular projekta. Međutim, ako su onemogućene, recenzent i dalje može ručno analizirati kompiliranu JavaScript datoteku tražeći anti-sigurnosne obrasce.
Osim toga, kompilirana JavaScript datoteka s Angular projektom može se pronaći u alatima za razvoj preglednika → Izvori (ili Debugger i Izvori) → \[id].main.js. Ovisno o omogućenim opcijama, ova datoteka može sadržavati sljedeći redak na kraju `//# sourceMappingURL=[id].main.js.map` ili ne mora, ako je postavljena opcija **hidden** na **true**. Međutim, ako je sourcemap onemogućen za **skripte**, testiranje postaje složenije i ne možemo dobiti datoteku. Osim toga, sourcemap se može omogućiti tijekom izgradnje projekta kao `ng build --source-map`.
Povezivanje se odnosi na proces komunikacije između komponente i odgovarajućeg prikaza. Koristi se za prijenos podataka u i iz Angular okvira. Podaci se mogu prenositi na različite načine, kao što su putem događaja, interpolacije, svojstava ili putem mehanizma dvosmjernog povezivanja. Osim toga, podaci se mogu dijeliti između povezanih komponenti (roditelj-dijete odnos) i između dvije nesrodne komponente pomoću značajke Servis.
* Izvor podataka prema cilju prikaza (uključuje _interpolaciju_, _svojstva_, _atribute_, _klase_ i _stilove_); može se primijeniti korištenjem `[]` ili `{{}}` u predlošku;
* Cilj prikaza prema izvoru podataka (uključuje _događaje_); može se primijeniti korištenjem `()` u predlošku;
* Dvosmjerno; može se primijeniti korištenjem `[()]` u predlošku.
Dizajn Angulara uključuje kodiranje ili sanitizaciju svih podataka prema zadanim postavkama, što otežava otkrivanje i iskorištavanje XSS ranjivosti u Angular projektima. Postoje dvije različite situacije za obradu podataka:
2. Povezivanje s svojstvima, atributima, klasama i stilovima ili `[atribut]="korisnički_unos"` - vrši sanitizaciju na temelju pruženog sigurnosnog konteksta.
Angular uvodi niz metoda za zaobilaženje svojeg zadanih postupaka sanitizacije i za označavanje da se vrijednost može sigurno koristiti u određenom kontekstu, kao u sljedećih pet primjera:
3.`bypassSecurityTrustHtml` se koristi za označavanje da je dana vrijednost siguran HTML. Napomena: umetanje `script` elemenata na ovaj način u DOM stablo neće rezultirati izvršavanjem priloženog JavaScript koda zbog načina na koji se ti elementi dodaju u DOM stablo.
4.`bypassSecurityTrustScript` se koristi za označavanje da je dana vrijednost siguran JavaScript. Međutim, primijetili smo da je njegovo ponašanje nepredvidljivo jer nismo mogli izvršiti JS kod u predlošcima koristeći ovu metodu.
Ova ranjivost se javlja kada korisnički unos bude vezan za bilo koju od tri osobine: `innerHTML`, `outerHTML` ili `iframe``srcdoc`. Dok se vezivanje za ove atribute tumači kao HTML, unos se sanitizuje koristeći `SecurityContext.HTML`. Stoga, HTML ubacivanje je moguće, ali ne i cross-site scripting (XSS).
Angular koristi šablone za dinamičko konstruisanje stranica. Pristup podrazumeva da se izrazi šablona koje Angular treba da proceni, nalaze između dvostrukih vitičastih zagrada (`{{}}`). Na ovaj način, okvir pruža dodatne funkcionalnosti. Na primer, šablon poput `{{1+1}}` biće prikazan kao 2.
Uobičajeno, Angular izbegava korisnički unos koji može biti pogrešno shvaćen kao izrazi šablona (npr. karakteri kao što su \`< > ' " \`\`). To znači da su potrebni dodatni koraci da bi se zaobišlo ovo ograničenje, kao što je korišćenje funkcija koje generišu JavaScript string objekte kako bi se izbegli karakteri koji su na crnoj listi. Međutim, da bismo to postigli, moramo uzeti u obzir Angular kontekst, njegova svojstva i promenljive. Stoga, napad ubacivanja šablona može izgledati ovako:
Kao što je prikazano iznad: `constructor` se odnosi na opseg svojstva `constructor` objekta, omogućavajući nam da pozovemo konstruktor Stringa i izvršimo proizvoljni kod.
Za razliku od CSR-a, koji se odvija u DOM-u pregledača, Angular Universal je odgovoran za SSR datoteka predložaka. Ove datoteke se zatim dostavljaju korisniku. Bez obzira na tu razliku, Angular Universal primjenjuje iste mehanizme sanitizacije koji se koriste u CSR-u kako bi poboljšao sigurnost SSR-a. Ranjivost ubrizgavanja predložaka u SSR-u može se primijetiti na isti način kao i u CSR-u, jer se koristi isti jezik predložaka.
Naravno, postoji i mogućnost uvođenja novih ranjivosti ubrizgavanja predložaka prilikom korištenja predložaka trećih strana kao što su Pug i Handlebars.
Kao što je prethodno navedeno, možemo direktno pristupiti DOM-u koristeći interfejs _Document_. Ako korisnički unos nije validiran unaprijed, to može dovesti do ranjivosti ubrizgavanja skripti (XSS).
Postoje neke klase koje se mogu koristiti za rad sa DOM elementima u Angularu: `ElementRef`, `Renderer2`, `Location` i `Document`. Detaljan opis poslednje dve klase je dat u odeljku **Open redirects**. Glavna razlika između prvih dve je što `Renderer2` API pruža sloj apstrakcije između DOM elementa i koda komponente, dok `ElementRef` samo čuva referencu na element. Prema dokumentaciji Angulara, `ElementRef` API treba koristiti samo kao poslednje rešenje 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 XSS ubrizgavanja, kao što je prikazano u primeru ispod:
```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);
}
}
```
* Uprkos činjenici da `Renderer2` pruža API koji se može sigurno koristiti čak i kada direktan pristup izvornim elementima nije podržan, i dalje ima neke sigurnosne nedostatke. Pomoću `Renderer2`-a moguće je postaviti atribute na HTML element koristeći metodu `setAttribute()`, koja nema mehanizme za prevenciju XSS-a.
```tsx
//app.component.ts
import {Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
Tokom našeg istraživanja, takođe smo ispitivali ponašanje drugih metoda `Renderer2`, kao što su `setStyle()`, `createComment()` i `setValue()`, u vezi sa XSS i CSS ubrizgavanjem. Međutim, nismo uspeli da pronađemo validne vektore napada za ove metode zbog njihovih funkcionalnih ograničenja.
jQuery je brza, mala i bogata JavaScript biblioteka koja se može koristiti u Angular projektu za manipulaciju HTML DOM objektima. Međutim, kao što je poznato, metode ove biblioteke mogu biti iskorišćene kako bi se postigla ranjivost XSS-a. Da bismo razgovarali o tome kako neke ranjive jQuery metode mogu biti iskorišćene u Angular projektima, dodali smo ovaj pododeljak.
* Metoda `html()` dobavlja HTML sadržaj prvog elementa u skupu odgovarajućih elemenata ili postavlja HTML sadržaj svakog odgovarajućeg elementa. Međutim, po dizajnu, bilo koji jQuery konstruktor ili metoda koja prihvata HTML string potencijalno može izvršiti kod. To može biti izvršeno ubrizgavanjem `<script>` oznaka ili korišćenjem HTML atributa koji izvršavaju kod, kao što je prikazano u primeru.
```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>Klikni me</button>
<p>neki tekst ovde</p>
```
* Metoda `jQuery.parseHTML()` koristi ugrađene metode za konvertovanje stringa u skup DOM čvorova, koji se zatim mogu umetnuti u dokument.
Kao što je već 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 parsiranom HTML-u osim ako se eksplicitno ne postavi `keepScripts` na `true`. Međutim, i dalje je moguće indirektno izvršiti skripte u većini okruženja, na primer, putem atributa `<img onerror>`.
```tsx
//app.component.ts
import { Component, OnInit } from '@angular/core';
Prema W3C dokumentaciji, objekti `window.location` i `document.location` se tretiraju kao sinonimi u modernim pregledačima. Zbog toga imaju sličnu implementaciju nekih metoda i svojstava, što može dovesti do otvorenog preusmeravanja i DOM XSS-a sa napadima šeme `javascript://`, kako je navedeno u nastavku.
Kanonski način dobijanja trenutnog DOM objekta lokacije je korišćenje `window.location`. Takođe se može koristiti za preusmeravanje pregledača na novu stranicu. Kao rezultat, kontrola nad ovim objektom omogućava nam iskorišćavanje ranjivosti otvorenog preusmeravanja.
Ova metoda uzrokuje učitavanje i prikazivanje dokumenta na navedenoj URL adresi. Ako imamo kontrolu nad ovom metodom, može biti mesto za napad otvorenog preusmeravanja.
Razlika u odnosu na metodu `assign()` je da 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.
Metoda `window.open()` uzima URL i učitava resurs koji identifikuje u novoj ili postojećoj kartici ili prozoru. Imati kontrolu nad ovom metodom takođe može biti prilika za pokretanje XSS ili ranjivosti otvorenog preusmeravanja.
```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.open("https://
#### Angular klase
* Prema Angular dokumentaciji, Angular `Document` je isto što i DOM dokument, što znači da je moguće koristiti uobičajene vektore za DOM dokument kako bi se iskoristile ranjivosti na klijentskoj strani u Angularu. Svojstva i metode `Document.location` mogu biti izvori uspešnih napada otvorenog preusmeravanja, kao što je prikazano u primeru:
```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
* Tokom istraživačke faze, takođe smo pregledali Angular klasu `Location` u potrazi za ranjivostima otvorenog preusmeravanja, ali nisu pronađeni validni vektori. `Location` je Angular servis koji aplikacije mogu koristiti za interakciju sa trenutnim URL-om pregledača. Ovaj servis ima nekoliko metoda za manipulaciju datim URL-om - `go()`, `replaceState()` i `prepareExternalUrl()`. Međutim, ne možemo ih koristiti za preusmeravanje na spoljni domen. Na primer:
```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
* [Angular Context: Easy Data-Binding for Nested Component Trees and the Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48)
* [Sanitization and security contexts](https://angular.io/guide/security#sanitization-and-security-contexts)
* [Renderer2 Example: Manipulating DOM in Angular - TekTutorialsHub](https://www.tektutorialshub.com/angular/renderer2-angular/)
* [jQuery API Documentation](http://api.jquery.com/)
* [How To Use jQuery With Angular (When You Absolutely Have To)](https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9)
