DOM 清理 function 不是 escaping 用户输入的文本

Question

Was trying to use Angular Sanitize API with the user input entered by the user inside angular form.

But the Angular's Sanitize() is not escaping the input entered.

.ts

export class AppComponent {
  userName = 'Angular';

  constructor(private domSanitizer: DomSanitizer) {}

  onSave(): void {
    console.log('save clicked api call');
    this.sanitizeUserName();
  }

  sanitizeUserName(): string {
    const domSanitize = this.domSanitizer.sanitize(5, this.userName);
    console.log('sanitized text/html', domSanitize);
    return domSanitize;
  }
}

.html

<form #userForm="ngForm">
  <label>Username: </label>
  <input type="text" [(ngModel)]="userName" name="username" />

  <div>
    <span>View : </span>
    <div [innerHTML]="userName"></div>
  </div>

  <br />
  <br />
  <button type="button" (click)="onSave()">Save</button>
</form>

Please find the live example Here In the File I have provided below examples to verify if the input is sanitized or not. I tried using input inside angular form as displayed in the below link as an example code.

Answer 1

Maybe add js script below html body