Kaynak URL bağlamında güvensiz değer kullanıldı

Angular, bir şablon veya host binding, <iframe src> ya da <link href> gibi harici bir kaynak yükleyen bir özniteliği açıkça güvenilir olarak işaretlenmemiş bir değere ayarladığında, unsafe value used in a resource URL context mesajıyla bu hatayı fırlatır.

Kaynak URL'leri normal URL'lerden farklı ele alınır. Angular düz bir URL'yi sterilize edebilir, ancak bu öznitelikler tarayıcının harici içeriği getirip çalıştırmasına neden olduğu için rastgele bir kaynak URL'sini güvenli hale getiremez. Bu yüzden Angular, güvenilmeyen değerleri sterilize etmeye çalışmak yerine reddeder.

Bu denetimi tetikleyen öznitelikler şunlardır:

Hatayı ayıklama

Hata, yukarıdaki özniteliklerden birine düz bir string bağlandığında, statik görünen bir URL olsa bile fırlatılır:

@Component({
  selector: 'app-root',
  template: `<iframe [src]="url"></iframe>`,
})
export class App {
  url = 'https://example.com/embed';
}

Değeri SecurityContext.URL ile DomSanitizer.sanitize() üzerinden geçirmek işe yaramaz. sanitize() düz bir string döndürür ve düz bir string kaynak URL bağlamında asla kabul edilmez:

@Component({
  selector: 'app-root',
  template: `<iframe [src]="sanitized"></iframe>`,
})
export class App {
  private readonly sanitizer = inject(DomSanitizer);
  sanitized = this.sanitizer.sanitize(SecurityContext.URL, 'https://example.com/embed'); // hâlâ NG0904 fırlatır
}

Bunun yerine sanitize() çağrısını SecurityContext.RESOURCE_URL ile yapmak da hata fırlatır, ancak bu kez NG05201 ile, çünkü sanitize() rastgele bir string'i kaynak URL bağlamında güvenli hale getiremez.

URL güvenilir, kontrol altındaki bir kaynaktan geliyorsa DomSanitizer.bypassSecurityTrustResourceUrl ile güvenli olarak işaretleyin:

import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
import {Component, inject} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<iframe [src]="safeUrl"></iframe>`,
})
export class App {
  safeUrl: SafeResourceUrl = inject(DomSanitizer).bypassSecurityTrustResourceUrl(
    'https://example.com/embed',
  );
}

Daha fazla bilgi için Güvenlik kılavuzuna bakın.