Angular 14中iframe绑定SafeValue出现异常如何解决？

问题核心原因 #

出现该错误通常是以下两种情况导致：

1. 目标URL缺少http://或https://协议前缀，Angular无法识别为合法的资源地址
2. 模板绑定方式错误（误用插值表达式而非属性绑定）或DomSanitizer注入不完整

具体修复方案 #

1. 补充URL的协议前缀 #

如果searchResult.pageUrl是类似www.testurl.com这种不带协议的格式，需要手动补充协议：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  public resultLink: SafeResourceUrl;

  constructor(private domSanitizer: DomSanitizer) {}

  setResultUrl(searchResult: any) {
    // 检查并补全协议
    const fullUrl = searchResult.pageUrl.startsWith('http') 
      ? searchResult.pageUrl 
      : `https://${searchResult.pageUrl}`;
    
    this.resultLink = this.domSanitizer.bypassSecurityTrustResourceUrl(fullUrl);
  }
}

2. 确认DomSanitizer注入正确 #

必须在组件构造函数中正确注入DomSanitizer，否则无法生成有效的SafeResourceUrl对象。

3. 严格使用属性绑定语法 #

模板中必须用[src]属性绑定，禁止使用插值表达式src="{{resultLink}}"（后者会把SafeResourceUrl转为字符串，触发错误）：

<!-- 正确写法 -->
<iframe title="Finder Results" [src]="resultLink"></iframe>

验证 #

完成修改后重新渲染，iframe的src会正确解析为目标URL，错误提示消失。

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