Angular：动态生成表格中HTML链接被XSS防护移除的问题咨询

这个问题我熟！Angular之所以移除你的链接和点击事件，是因为它的安全机制在起作用——默认情况下，Angular会自动清理任何它认为不安全的HTML内容，防止XSS攻击，所以你直接拼接的带(click)指令的HTML字符串会被转义掉，自然就失效了。

下面给你两种解决方案，优先推荐第一种（符合Angular最佳实践）：

方案一：分离数据与视图（推荐） #

不要把HTML字符串直接塞进数据里，而是把需要的原始数据存起来，在模板里直接渲染链接和绑定事件。

步骤1：修改数据结构 #

把Impacted Users拆成数值和对应的RuleParentID，不要拼接HTML：

output[i] = { 
  'Rule Number': rn, 
  'Outcome': this.parentRuleData[i].Value, 
  'ImpactedUsersCount': Number(iu),
  'RuleParentID': this.parentRuleData[i].RuleParentID
};

步骤2：在模板中渲染链接 #

直接在表格的<td>里写链接和事件绑定：

<tr *ngFor="let item of output">
  <td>{{ item['Rule Number'] }}</td>
  <td>{{ item.Outcome }}</td>
  <td>
    <a style="cursor:pointer;" (click)="viewImpactedUsers(item.RuleParentID)">
      {{ item.ImpactedUsersCount }}
    </a>
  </td>
</tr>

这种方式既安全，又能正常触发viewImpactedUsers方法，而且代码更易维护。

方案二：使用DomSanitizer（仅适用于静态HTML） #

如果你非要用动态HTML的方式，注意：这种方法无法让(click)事件生效，因为Angular不会解析innerHTML里的指令和事件绑定，只能渲染静态HTML。如果只是需要展示可点击的文本（比如跳转到外部链接）可以用，但你的场景里带Angular事件，这个方案不适用，不过还是给你列出来：

步骤1：注入DomSanitizer #

在组件里引入并注入DomSanitizer：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

步骤2：标记HTML为安全 #

把拼接的HTML字符串转为Angular认可的安全HTML：

const linkHtml = `<a style="cursor:pointer;">${Number(iu)}</a>`;
output[i] = { 
  'Rule Number': rn, 
  'Outcome': this.parentRuleData[i].Value, 
  'Impacted Users': this.sanitizer.bypassSecurityTrustHtml(linkHtml)
};

步骤3：用[innerHTML]绑定 #

在模板里通过[innerHTML]渲染：

<td [innerHTML]="item['Impacted Users']"></td>

再次强调：这个方法里的(click)事件不会被Angular识别，所以你的viewImpactedUsers方法不会触发，所以还是优先用方案一。

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