Reactive Content Sanitization in Signal Pipelines

Snippet

Reactive Content Sanitization in Signal Pipelines

Reactive security ensures that untrusted data is sanitized immediately upon state changes. By wrapping the DomSanitizer logic in a computed() signal, the UI always receives a processed, safe version of the HTML without manual intervention.

snippet.js
javascript
@Component({ ... })
export class SafeCmp {
  private sanitizer = inject(DomSanitizer);
  rawContent = signal('<img src=x onerror=alert(1)>');
  
  safeContent = computed(() => 
    this.sanitizer.bypassSecurityTrustHtml(this.rawContent())
  );
}

angular

Breakdown

private sanitizer = inject(DomSanitizer);

Injects the security service into the component context.

this.sanitizer.bypassSecurityTrustHtml(...);

Explicitly marks the content as safe for the DOM after manual validation.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Reactive Content Sanitization in Signal Pipelines

Related