Swahili - Ht
HackTricks TrainingTwitterLinkedinSponsor

Angular

Orodha ya Ukaguzi

Orodha ya ukaguzi kutoka hapa.

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:

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:

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

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;

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

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

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

  1. bypassSecurityTrustResourceUrl hutumiwa kuonyesha kuwa thamani iliyotolewa ni URL salama ya rasilimali:

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

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

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

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

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

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

//matokeo
-

  1. 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Marejeo

PreviousAEM - Adobe Experience CloudNextApache

Last updated