Ошибка при передаче URL из environment.ts в iFrame в Angular

Question

У меня есть страница с iFrame внутри, и я пытаюсь передать ей URL-адрес из моего environemnt.ts Итак, мой файл 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');
  }
}

From DomSanitizer docs:

Вызов любого из bypassSecurityTrust... API отключает встроенный Angular. очистка переданного значения. Тщательно проверьте и проверьте все значения и пути кода, входящие в этот вызов. Убедитесь, что все пользовательские данные экранированы соответствующим образом для этого контекста безопасности.

Рекомендуется принимать меры предосторожности при передаче URL-адресов в средство очистки. Как указано в документации, он отключает встроенную очистку Angular.