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(1, 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>

請在此處找到實時示例。 在component.ts中，我添加了一些示例來驗證輸入是否經過清理。

如果有人可以幫助我。

Answer 1

清理方法模型是：

 sanitize(context: SecurityContext, value: SafeValue | string | null): string | null;

和 SecurityContext model 是：

enum SecurityContext {
    NONE = 0,
    HTML = 1,
    STYLE = 2,
    SCRIPT = 3,
    URL = 4,
    RESOURCE_URL = 5
}

所以看來你應該為 SecurityContext 使用第一名

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