Angular中如何动态向iframe传URL？NG0904报错求解

这个错误是Angular安全防护机制触发的——它默认将动态生成的URL标记为不安全（防止XSS攻击），直接用插值语法绑定src会触发该限制。以下是标准解决步骤：

步骤1：导入安全相关依赖 #

在组件的TS文件中，导入DomSanitizer和SafeResourceUrl：

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

步骤2：注入并处理安全URL #

在组件类中注入DomSanitizer，将原始URL转换为Angular认可的安全资源URL：

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class MyComponent implements OnInit {
  dynamicUrl: SafeResourceUrl;
  private rawUrl = 'https://some-website.com/app/main/dashboards/63a0846ut7gxn0035c049e4?embed=true';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    this.dynamicUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.rawUrl);
  }
}

步骤3：修改模板绑定方式 #

将模板中的插值语法{{ dynamicUrl }}改为属性绑定[src]，直接绑定处理后的安全URL：

<iframe
  width="100%"
  height="100%"
  [src]="dynamicUrl"
  scrolling="auto"
></iframe>

注意事项 #

• 仅在完全信任目标URL的情况下使用bypassSecurityTrustResourceUrl，避免引入XSS风险。
• 使用属性绑定[src]而非插值语法，是因为插值会将安全URL对象转为字符串，无法被iframe识别。

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