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;
  }