javascript / intermediate
Snippet
Explizite HTML-Bereinigung mittels SecurityContext und DomSanitizer
Angular bereinigt datengebundene Werte in Templates automatisch. Wenn jedoch eine programmatische Bereinigung von rohem Markup vor der Speicherung oder Zuweisung erforderlich ist, kann DomSanitizer.sanitize() explizit mit einem bestimmten SecurityContext (wie HTML, STYLE oder SCRIPT) aufgerufen werden. Dadurch werden bösartige Skripte, Event-Handler und XSS-Vektoren entfernt, während sicheres Markup erhalten bleibt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, inject, SecurityContext } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser';@Component({selector: 'app-safe-preview',template: `<div [innerHTML]="cleanHtml"></div>`})export class SafePreviewComponent {private sanitizer = inject(DomSanitizer);cleanHtml: string | null = null;processUserMarkup(rawInput: string): void {this.cleanHtml = this.sanitizer.sanitize(SecurityContext.HTML, rawInput);}}
angular
Erklärung
1
import { Component, inject, SecurityContext } from '@angular/core';
Importiert Angular-Komponenten-Dekoratoren, Dependency-Injection-Hilfsfunktionen und das SecurityContext-Enum.
2
this.cleanHtml = this.sanitizer.sanitize(SecurityContext.HTML, rawInput);
Führt den nicht vertrauenswürdigen String durch die HTML-Bereinigungspipeline und liefert bereinigtes Markup oder null zurück.