在 Angular 中将 URL 从 environment.ts 传递到 iFrame 时出错答案

【问题标题】：Error when passing URL from environment.ts to iFrame in Angular在 Angular 中将 URL 从 environment.ts 传递到 iFrame 时出错
【发布时间】：2020-05-26 16:47:07
【问题描述】：

我有一个里面有 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 我试图从现有问题中找到解决方案，但目前没有任何效果。很抱歉有一个菜鸟问题，提前致谢！

【问题讨论】：

标签： angular typescript iframe

【解决方案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 的内置清理功能。

【讨论】：