Checkmarx扫描报Client DOM XSS违规，如何修复master.component.html对应问题

风险点排查方向 #

你贴出的代码中modal-header区块内容均为静态硬编码，不会触发XSS告警，先从以下方向定位实际问题：

• 确认实际生产代码中modal-header区块是否存在动态数据绑定（比如{{}}插值、[innerHTML]属性绑定），绑定的变量是否来源于用户输入、URL参数、接口返回的未净化不可信数据
• 检查是否存在通过DomSanitizer.bypassSecurityTrustHtml等方法绕过Angular自带安全校验的逻辑，未做额外净化就插入动态内容
• 你贴出的代码中[formGroup]属性存在截断，若实际代码中该属性绑定的是用户可控变量，也会触发扫描告警
• [checked]手动绑定表单取值的逻辑，会被扫描工具判定为直接使用不可信输入的风险点

可行修复方案 #

方案1：修复动态内容绑定风险 #

所有需要插入到页面的动态HTML内容，必须经过XSS净化后再绑定，示例代码如下：

// 组件.ts文件
import { DomSanitizer, SecurityContext } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html'
})
export class MasterComponent {
  constructor(private sanitizer: DomSanitizer) {}

  getSafeHtml(rawContent: string) {
    // 先通过Angular安全上下文过滤恶意代码，再返回可信任内容
    const sanitizedContent = this.sanitizer.sanitize(SecurityContext.HTML, rawContent);
    return this.sanitizer.bypassSecurityTrustHtml(sanitizedContent || '');
  }
}

<!-- 组件.html文件 动态HTML绑定示例 -->
<div class="modal-title" [innerHTML]="getSafeHtml(dynamicTitle)"></div>

方案2：优化表单绑定逻辑，避免误报 #

你当前使用的响应式表单本身会自动控制单选框的选中状态，无需手动写[checked]绑定，删除该属性即可消除扫描工具的误判：

<input id="international" formControlName="location" name="location" type="radio" value="international" class="custom-control-input">
<input id="domestic" formControlName="location" name="location" type="radio" value="domestic" class="custom-control-input">

方案3：确认无风险后添加扫描忽略标注 #

如果排查后确认所有绑定内容均无安全风险，可以在对应代码行添加Checkmarx官方支持的忽略注释，跳过该条误报：

<!-- CHECKMARX-IGNORE: DOM_XSS 该区块所有动态内容已由Angular自动编码，无注入风险 -->
<div class="modal-header">

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