Angular Sanitize API无法转义表单用户输入问题求助

问题根源分析 #

你的代码存在几个关键问题导致Sanitize方法没生效：

1. 安全上下文参数不规范：直接用数字1代表安全上下文，虽然它对应SecurityContext.HTML，但硬编码容易出错且可读性差；
2. 未保存处理结果：调用sanitizeUserName()后没有将 sanitize 后的内容赋值给用于展示的变量，页面依然渲染原始输入；
3. 展示绑定错误：[innerHTML]绑定的是未处理的userName，而非 sanitize 后的结果。

修正后的代码示例 #

.ts 文件

import { Component } from '@angular/core';
import { DomSanitizer, SecurityContext } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userName = 'Angular';
  sanitizedUserName = 'Angular'; // 专门存储处理后的内容

  constructor(private domSanitizer: DomSanitizer) {}

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

  sanitizeUserName(): string {
    // 使用枚举值明确指定安全上下文，替代硬编码数字
    const sanitized = this.domSanitizer.sanitize(SecurityContext.HTML, this.userName);
    console.log('sanitized text/html', sanitized);
    return sanitized;
  }
}

.html 文件

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

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

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

额外说明 #

• Angular的DomSanitizer.sanitize()作用是移除不安全的HTML内容（比如<script>标签、onclick等事件属性），而非转义所有HTML字符。如果输入是<b>test</b>这类安全HTML，sanitize后会保留标签并正常渲染；
• 如果需要将HTML字符转义为纯文本（比如把<变成<，让标签以文本形式显示），可以手动实现转义函数：

  escapeHtml(text: string): string {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
  

  之后在展示时调用这个函数即可。

内容的提问来源于stack exchange，提问作者user8348978