Angular ng-select组件中&符号被渲染为&的问题解决咨询（需规避XSS风险）

嘿，我之前也碰到过类似的问题，咱们一步步拆解解决，同时把XSS风险也稳稳规避掉。

首先得搞清楚根源：Angular的插值表达式{{ }}默认会对所有特殊字符做HTML转义，如果你的item.label里已经是转义后的&（比如后端返回时就提前转义了），经过Angular再转一次就会变成&，这就是你看到的异常显示了。

下面给你几个安全的解决思路，按优先级推荐：

优先检查数据源（最安全的根治方案） #

先打开浏览器控制台，打印一下你的items数组看看：

console.log(this.items);

如果发现label字段存的就是&而非原始的&，那最好的办法是让后端直接返回未转义的&。前端负责渲染时的转义逻辑，后端没必要提前做转义，从根源上避免双重转义，还完全不用担心XSS问题。

没法改后端？用安全解码方式兼顾显示与防护 #

要是后端没法调整，那咱们就在前端把转义的字符解码回来，同时用Angular的DomSanitizer确保内容安全，过滤掉恶意代码。

方法1：组件内写处理方法（适合单个组件使用）

1. 先在组件里注入DomSanitizer：

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

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  items = [...]; // 你的选项数组

  constructor(private sanitizer: DomSanitizer) {}

  // 解码HTML实体并返回安全内容
  getSafeLabel(label: string): SafeHtml {
    if (!label) return '';
    // 先解码HTML实体（把&转回&）
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = label;
    // 用sanitizer过滤掉恶意HTML标签，确保安全
    return this.sanitizer.bypassSecurityTrustHtml(tempDiv.textContent || tempDiv.innerText);
  }
}

2. 修改ng-select模板，把插值改为[innerHTML]绑定：

<ng-select
  [clearable]="false"
  [items]="items"
  [searchable]="false"
  class="custom"
  data-testid="request-xxz"
  formControlName="category"
  i18n-placeholder
  placeholder="Choose option"
>
  <ng-template let-item="item" ng-option-tmp>
    <div
      [attr.data-testid]="'request-form-xxzy'"
    >
      <span [innerHTML]="getSafeLabel(item.label)"></span>
    </div>
  </ng-template>
</ng-select>

方法2：自定义可复用管道（适合多组件场景）

如果多个地方都需要处理这种情况，写个管道复用性更强：

1. 创建管道文件safe-decode.pipe.ts：

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

@Pipe({ name: 'safeDecode' })
export class SafeDecodePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    if (!value) return '';
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = value;
    return this.sanitizer.bypassSecurityTrustHtml(tempDiv.textContent || tempDiv.innerText);
  }
}

2. 在你的模块里声明并导出这个管道：

import { NgModule } from '@angular/core';
import { SafeDecodePipe } from './safe-decode.pipe';

@NgModule({
  declarations: [SafeDecodePipe],
  exports: [SafeDecodePipe]
})
export class YourModule {}

3. 模板里直接用管道：

<span [innerHTML]="item.label | safeDecode"></span>

关键安全提醒 #

绝对不要直接用bypassSecurityTrustHtml处理不可信的用户输入（比如用户自己提交的内容）！如果item.label是用户生成的，一定要先过滤掉<script>、<iframe>这类危险标签，再用上面的方法处理——咱们用DomSanitizer的核心目的就是拦截恶意内容，保障页面安全。

备注：内容来源于stack exchange，提问作者dovexz12323