javascript / intermediate
Snippet
Explicit HTML Sanitization using SecurityContext and DomSanitizer
Angular automatically sanitizes data-bound values in templates, but when programmatic sanitization of raw markup is required before storage or assignment, DomSanitizer.sanitize() can be invoked explicitly with a specific SecurityContext (such as HTML, STYLE, or SCRIPT). This strips malicious scripts, event handlers, and XSS vectors while preserving safe markup.
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
Breakdown
1
import { Component, inject, SecurityContext } from '@angular/core';
Imports Angular component decorators, injection utilities, and the SecurityContext enum.
2
this.cleanHtml = this.sanitizer.sanitize(SecurityContext.HTML, rawInput);
Passes the untrusted string through the HTML sanitization pipeline, returning clean markup or null.