javascript / intermediate
Snippet
XSS-Prävention mit kontextbezogenen DomSanitizer-Sicherheitsmethoden
Angular bereinigt standardmäßig nicht vertrauenswürdige Werte im DOM, um Cross-Site-Scripting (XSS) zu verhindern. Beim Rendern von vertrauenswürdigem dynamischem HTML, SVG oder URLs müssen Entwickler die Bereinigung über spezifische Methoden des DomSanitizers explizit für den jeweiligen Sicherheitskontext umgehen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';@Pipe({ name: 'safeContent', standalone: true })export class SafeContentPipe implements PipeTransform {constructor(private sanitizer: DomSanitizer) {}transform(value: string, type: 'html' | 'resourceUrl'): SafeHtml | SafeResourceUrl {switch (type) {case 'html':return this.sanitizer.bypassSecurityTrustHtml(value);case 'resourceUrl':return this.sanitizer.bypassSecurityTrustResourceUrl(value);default:throw new Error(`Unsupported sanitization context: ${type}`);}}}
angular
Erklärung
1
constructor(private sanitizer: DomSanitizer) {}
Injiziert den DomSanitizer-Service von Angular, der für die Bereinigung und Einstufung von DOM-Werten zuständig ist.
2
transform(value: string, type: 'html' | 'resourceUrl'): SafeHtml | SafeResourceUrl {
Nimmt eine Zeichenkette und einen Union-Typ entgegen, um die Transformation auf zulässige DOM-Kontexte einzuschränken.
3
return this.sanitizer.bypassSecurityTrustHtml(value);
Signalisiert Angular, dass der HTML-Inhalt geprüft wurde und ohne automatisches Entfernen von Tags an innerHTML gebunden werden darf.
4
throw new Error(`Unsupported sanitization context: ${type}`);
Schützt zur Laufzeit vor ungültigen Kontextparametern, um unabsichtliche Sicherheitslücken zu vermeiden.