Description

Detects unsafe use of Angular's innerHTML property with untrusted input, which can lead to Cross-Site Scripting (XSS) vulnerabilities. When malicious content is inserted via innerHTML, it can execute unwanted JavaScript code in the user's browser.

Detection Strategy

• Identifies assignments or updates to innerHTML properties in Angular templates and components

• Checks if the content being assigned to innerHTML comes from untrusted or user-controlled input sources

• Reports a vulnerability when innerHTML is used without proper sanitization of the input data

• Looks for direct DOM manipulation through innerHTML rather than Angular's secure binding mechanisms

Vulnerable code example

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  template: '<div id="main"></div>'
})
export class Application {...

✅ Secure code example

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: '<div [innerHTML]="safeContent"></div>'  // Use Angular's built-in binding
})...