如何在Angular中对HTML做安全处理以规避XSS跨站脚本攻击漏洞

• Resource URL 消毒逻辑完全错误：代码先调用bypassSecurityTrustResourceUrl将URL标记为框架信任的安全资源，该标记会让后续的sanitize方法完全跳过消毒校验，相当于没有做任何安全处理。如果该URL来源于接口返回、用户输入等可控路径，攻击者可以构造恶意URL触发XSS。
• 滥用[innerHTML]渲染纯文本：person.id、person.firstName、person.lastName均为纯文本字段，完全不需要使用[innerHTML]渲染。自定义的sanitizeHtml管道大概率存在过滤疏漏，很容易被攻击者绕过，比如通过img标签的onerror事件、svg内联脚本等方式触发XSS。

• 修正资源URL消毒逻辑
  如果URL为固定硬编码值，不需要额外做消毒处理；如果URL为用户可控内容，禁止调用bypassSecurityTrust*系列方法，直接将原始URL传入sanitize即可：

// 原始用户/接口返回的未校验URL
const rawUrl = 'https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json';
const safeDataUrl = this.domSanitizer.sanitize(SecurityContext.RESOURCE_URL, rawUrl);

• 替换不必要的[innerHTML]用法
  纯文本字段直接使用Angular默认的插值语法渲染，框架会自动转义所有特殊字符，天然规避XSS风险：

<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>

• 富文本场景使用成熟消毒库
  如果确实有渲染用户提供的富文本的需求，不要自行实现消毒管道，优先使用业界通用的DOMPurify库做HTML内容消毒，避免出现过滤逻辑疏漏：

import * as DOMPurify from 'dompurify';

// 处理用户提供的富文本内容
const safeRichText = DOMPurify.sanitize(userProvidedRichHtml);

对应HTML用法：

<td [innerHTML]="safeRichText"></td>

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