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

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

import { Component, inject, SecurityContext } from '@angular/core';

Importiert Angular-Komponenten-Dekoratoren, Dependency-Injection-Hilfsfunktionen und das SecurityContext-Enum.

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.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Explizite HTML-Bereinigung mittels SecurityContext und DomSanitizer

Verwandt