DOM 清理 function 不是 escaping 用戶輸入的文本

Question

試圖使用 Angular 清理 API 與用戶在 angular 表單中輸入的用戶輸入。

但是 Angular 的Sanitize()不是 escaping 輸入的輸入。

.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>

請在此處找到實時示例在我提供的以下示例中的文件中，以驗證輸入是否經過消毒。 我嘗試在 angular 表單中使用輸入，如下面的鏈接所示作為示例代碼。

Answer 1

也許在 html 正文下面添加 js 腳本