调用API时如何正确使用DOMSANITIZER的bypassSecurityTrustUrl方法

你现在的写法报错的核心原因是把DomSanitizer用错了场景，bypassSecurityTrustUrl返回的是SafeUrl类型，而http.get要求传入的第一个参数是字符串类型的请求地址，两者类型不匹配自然运行失败。

同时你搞混了XSS的触发时机：调用API请求本身不会触发XSS，XSS风险出现在你把请求返回的用户可控内容（比如x.firstName这类字段）渲染到页面DOM的阶段，你把安全处理逻辑加在请求地址上完全没有意义。

解决方案 #

1. 先修正请求代码，移除请求地址处的DomSanitizer调用

// 不需要在请求地址处调用DomSanitizer，直接传入原始URL即可
this.http.get(dataUrl, { headers: headers }).subscribe(response => {
  this.persons = response.data.map(x => ({
    ...x,
    check: false,
    test: x.firstName
  }));
  this.dtTrigger.next();
});

2. 针对渲染阶段的XSS风险做处理

• 如果你是用{{ }}插值语法把内容渲染到模板，Angular默认已经对插值内容做了特殊字符转义，天然可以防御大部分XSS攻击，不需要额外处理。
• 如果你需要用[innerHTML]把内容当做HTML渲染，这时候才需要用到DomSanitizer做安全处理：

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

// 组件构造器中注入DomSanitizer
constructor(private domSanitizer: DomSanitizer) {}

// 需要渲染HTML时调用该方法处理内容
safeHtml(content: string): SafeHtml {
  // 仅确认内容完全安全时才用bypass方法，不可信内容建议先经过XSS过滤库处理
  return this.domSanitizer.bypassSecurityTrustHtml(content);
}

模板中的调用方式：

<!-- 普通插值默认带转义，不需要额外处理 -->
<td>{{ person.test }}</td>
<!-- 需要渲染HTML的场景再调用安全处理方法 -->
<td [innerHTML]="safeHtml(person.test)"></td>

注意事项 #

如果要渲染的内容是用户提交的不可信内容，不要直接调用bypassSecurityTrustHtml绕过安全校验，建议先引入专业的XSS过滤库把恶意脚本内容过滤后再渲染，避免引入安全风险。

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