关于Angular中HTML Sanitizer API使用及mXSS防护的技术咨询

核心区别说明 #

Angular的@angular/core/Sanitizer是框架内置的内容清理工具，和浏览器原生的HTML Sanitizer API（即window.Sanitizer）是完全独立的两个实现，二者没有关联。

TypeScript中能否使用原生HTML Sanitizer API？ #

可以，但需要满足两个前提：

• 浏览器兼容性：该API仅支持Chrome 93+、Firefox 101+、Edge 93+等较新版本浏览器，旧版浏览器完全不兼容。
• TypeScript配置：确保tsconfig.json的lib数组包含DOM（或更高版本的DOM相关库），且TypeScript版本不低于4.5（旧版本可能缺失该API的类型定义）。如果类型缺失，可手动添加临时声明：

  declare interface Sanitizer {
    sanitize(input: string): string;
  }
  declare var Sanitizer: {
    new(): Sanitizer;
  };
  

Angular为什么不依赖原生HTML Sanitizer API？ #

主要有三个原因：

• 兼容性覆盖：Angular需要支持大量旧版本浏览器（比如部分企业用户仍在使用Chrome 80以下版本），原生API的兼容性不足以满足框架的目标受众。
• 跨环境一致性：Angular需要在客户端和服务器端（SSR/SSG）提供完全一致的清理结果，而原生API仅能在浏览器环境运行，Angular内置清理工具基于Node.js环境也能运行，保证前后端结果统一。
• 自定义灵活性：Angular的DomSanitizer提供了bypassSecurityTrust*系列方法、自定义清理管道等扩展能力，开发者可根据业务需求灵活调整安全规则，而原生API的配置灵活性目前不如Angular的实现。

Angular项目中使用原生API的示例 #

如果你的项目目标浏览器都支持该API，可参考以下代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-sanitize-demo',
  template: `<div [innerHTML]="sanitizedContent"></div>`
})
export class SanitizeDemoComponent {
  sanitizedContent: string = '';

  constructor() {
    if ('Sanitizer' in window) {
      const unsafeHtml = '<script>alert("XSS")</script><h2>Safe Content</h2>';
      const sanitizer = new Sanitizer();
      this.sanitizedContent = sanitizer.sanitize(unsafeHtml);
    } else {
      // 降级使用Angular内置DomSanitizer处理
      // import { DomSanitizer } from '@angular/core';
      // this.sanitizedContent = this.sanitizer.bypassSecurityTrustHtml(unsafeHtml) as string;
    }
  }
}

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