javascript / intermediate
Snippet
Sicheres Freigeben von Ressourcen-URLs für eingebettete Iframes mittels DomSanitizer
Angular bereinigt URLs in Ressourcenkontexten wie Iframe-`src`-Attributen automatisch, um XSS-Angriffe zu verhindern. Beim Einbetten externer Ressourcen markiert `DomSanitizer.bypassSecurityTrustResourceUrl` validierte URLs explizit als vertrauenswürdig, nachdem Ursprungsprüfungen durchgeführt wurden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Pipe, PipeTransform, inject } from '@angular/core';import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';@Pipe({name: 'safeMediaUrl',standalone: true})export class SafeMediaUrlPipe implements PipeTransform {private readonly sanitizer = inject(DomSanitizer);private readonly trustedOrigin = 'https://trusted-provider.example.com/';transform(rawUrl: string): SafeResourceUrl | null {if (!rawUrl || !rawUrl.startsWith(this.trustedOrigin)) {console.warn(`Untrusted media URL blocked: ${rawUrl}`);return null;}return this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);}}
angular
Erklärung
1
private readonly sanitizer = inject(DomSanitizer);
Injiziert Angulars integrierten DomSanitizer-Service mittels funktionaler Dependency Injection.
2
if (!rawUrl || !rawUrl.startsWith(this.trustedOrigin)) {
Validiert die URL gegen eine explizite Whitelist vertrauenswürdiger Origins vor der Freigabe.
3
return this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
Weist Angulars Sicherheitsmechanismus an, diese Ressourcen-URL sicher in einem Iframe zu laden.