将 URL 从 environment.ts 传递到 Angular 中的 iFrame 时出错

Question

我有一个里面有 iFrame 的页面，我正在尝试从我的 environemnt.ts 向它传递一个 URL 所以我的 TS 文件如下所示：

import { environment } from '../../../environments/environment';
...
export class IframePage {
constructor(
...
)
public IFRAME_URL: string = environment.externalUrl.myUrl + 'someDetails';
}

在我的 HTML 文件中，它看起来像：

<iframe
  [src]="IFRAME_URL"
  style="border: 0; width: 100%; height: 90vh; top: 0"
  >iFrame not working!</iframe
>

完成所有这些操作后，我收到一个错误： [SYSTEM_ERROR] unsafe value used in a resource URL context我试图从现有问题中找到解决方案，但目前没有任何效果。 对不起，一个菜鸟问题，并提前感谢！

Answer 1

您可以尝试清理 URL 并让 Angular 知道 URL 是安全的。 尝试以下

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

export class IframePage implements OnInit {
  public IFRAME_URL: string;

  constructor(private _sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.IFRAME_URL = this._sanitizer.bypassSecurityTrustResourceUrl(environment.externalUrl.myUrl + 'someDetails');
  }
}

来自DomSanitizer文档：

调用任何bypassSecurityTrust... API 都会禁用 Angular 对传入值的内置清理。仔细检查和审核进入此调用的所有值和代码路径。 确保针对此安全上下文适当地转义了任何用户数据。

建议在将 URL 传递给 sanitizer 时采取预防措施。 正如文档所暗示的，它禁用了 Angular 的内置清理功能。