javascript / intermediate
Snippet
Bereinigung unsicherer Benutzereingaben mittels Sicherheits-Pipes
Angular bietet integrierten Schutz gegen Cross-Site-Scripting (XSS), indem nicht vertrauenswürdige Werte bei der Bindung an innerHTML standardmäßig bereinigt werden. Wenn benutzerdefiniertes HTML gerendert werden muss, kapselt eine Pipe die DomSanitizer-Logik und liefert einen explizit als vertrauenswürdig markierten SafeHtml-Typ zurück.
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 } from '@angular/core';import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Pipe({name: 'sanitizeHtml',standalone: true})export class SanitizeHtmlPipe implements PipeTransform {constructor(private readonly sanitizer: DomSanitizer) {}transform(rawContent: string | null | undefined): SafeHtml {if (!rawContent || typeof rawContent !== 'string') {return '';}const cleanContent = rawContent.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');return this.sanitizer.bypassSecurityTrustHtml(cleanContent);}}
angular
Erklärung
1
constructor(private readonly sanitizer: DomSanitizer) {}
Injiziert den DomSanitizer-Dienst von Angular zur Steuerung von Sicherheitskontext-Ausnahmen.
2
transform(rawContent: string | null | undefined): SafeHtml {
Implementiert PipeTransform, um Strings entgegenzunehmen und bereinigte SafeHtml-Instanzen auszugeben.
3
if (!rawContent || typeof rawContent !== 'string') {
Prüft die Eingabetypen, um Laufzeitfehler bei Null- oder Nicht-String-Werten zu verhindern.
4
return this.sanitizer.bypassSecurityTrustHtml(cleanContent);
Umgeht das Standard-HTML-Escaping und signalisiert Angular, dass der bereinigte Inhalt sicher gerendert werden kann.