javascript / intermediate
Snippet
Sicherheitsprüfung für dynamische SVG-Inhalte mittels DomSanitizer umgehen
Angular bereinigt nicht vertrauenswürdige HTML- und SVG-Bindungen automatisch, um Cross-Site-Scripting-Angriffe (XSS) zu verhindern. Beim Rendern von vertrauenswürdigem dynamischem Markup ermöglicht DomSanitizer das explizite Markieren von Inhalten als sicher über bypassSecurityTrustHtml, was einen SafeHtml-Wrapper erzeugt, den Angular direkt rendert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component, inject, SecurityContext } from '@angular/core';import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Component({selector: 'app-safe-icon',standalone: true,template: `<div [innerHTML]="trustedSvg"></div>`})export class SafeIconComponent {private sanitizer = inject(DomSanitizer);rawSvgString = '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>';get trustedSvg(): SafeHtml {return this.sanitizer.bypassSecurityTrustHtml(this.rawSvgString);}}
angular
Erklärung
1
private sanitizer = inject(DomSanitizer);
Injiziert den integrierten DomSanitizer-Dienst von Angular über die moderne inject()-Funktion.
2
return this.sanitizer.bypassSecurityTrustHtml(this.rawSvgString);
Umgeht die integrierten XSS-Sicherheitsprüfungen und verpackt den rohen SVG-String in einen vertrauenswürdigen SafeHtml-Typ.
3
template: `<div [innerHTML]="trustedSvg"></div>`
Bindet die bereinigte SafeHtml-Instanz an innerHTML, ohne Sicherheitswarnungen oder entfernte Tags auszulösen.