I am trying to add a dynamically generated html tag to the DOM. For ex. dynamic tag is like – .

After debugging i found out that the checkmarx scan is failing because of “<” and “>” characters.

The code is failing for checkmarx scan.

I tried following approaches –

sanitizing the dynamic selector using domSanitizer.bypasssecuritytrusthtml() Result : Failing checkmarx scan
// parent element in .html

<div [innerHTML]="selector"></div>

// logic in .ts

let safeTag = this.domSanitizer.bypasssecuritytrusthtml(dynamicTag);
this.selector = `<${safeTag}></${safeTag}>`

tried adding the dynamic tag to the parent element using innerHtml Result: Failing checkmarx scan
// parent element in .html

<div #MFE></div>

// logic in .ts

let el = this.MFE.nativeElement;
this.selector = `<${safeTag}></${safeTag}>`
el.innerHTML = this.selector;

tried creating a tag in .ts and then adding inside the parent element using insertAdjacentHTML
// parent element in .html

<div #MFE></div>

// logic in .ts

let el = this.MFE.nativeElement;
this.selector = `<${safeTag}></${safeTag}>`
el.insertAdjacentHTML("beforeend", this.selector);

tried escaping the ‘<‘ and ‘>’ Result: Checkmarx scan passed but the selector is added to parent element as a string instead of HTML tag.
// parent element in .html

<div #MFE></div>

// logic in .ts

let el = this.MFE.nativeElement;
this.selector = `$lt;${safeTag}$gt;$lt;/${safeTag}$gt;`
el.innerHTML = this.selector;

tried to create a custom pipe to sanitize the innerHTML using domSanitizer Result: Checkmarx scan failed
The dynamic tag is generated dynamically and passed to a method as argument inside which I tried the approaches as mentioned above.