Rule Definition
In DOM-based XSS, the client performs the injection of XSS into the page; in the other types, the server performs the injection. DOM-based XSS generally involves server-controlled, trusted script that is sent to the client, such as Javascript that performs sanity checks on a form before the user submits it. If the server-supplied script processes user-supplied data and then injects it back into the web page (such as with dynamic HTML), then DOM-based XSS is possible.

Remediation
Avoid directly interacting with the DOM and instead use Angular Renderer2 when possible. ElementRef accessed by the following function is considered as dangerous: - textContent - style - replaceChild - removeChild - removeAttribute - removeAttributeNode - parentNode - parentElement - insertAdjacentHTML - insertAdjacentElement

Violation Code Sample

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
    this.el.nativeElement.style.color = 'blue';
  }

}

Fixed Code Sample

import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) { }

  ngOnInit() {
    // this.el.nativeElement.style.color = 'blue';
    this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');
  }

}

https://angular.io/guide/security#avoid-direct-use-of-the-dom-apis https://angular.io/api/core/ElementRef