Междоменная проблема iframe в приложении Angular 7

Question

У нас есть собственная вкладка на веб-сайте третьей стороны (поставщика). Наша настраиваемая вкладка содержит список элементов. При нажатии на конкретный элемент нам нужно открыть страницу родительского веб-сайта, содержащую подробную информацию об этом элементе. И родительское приложение, и наше приложение - это Angular приложения.

Мы используем iframe для отображения страницы родительского приложения. Но, поскольку домен нашего приложения отличается от домена родительского приложения, мы получаем ошибку DOMException: Blocked a frame with origin "https://ourCustomTab.cloudfront.net" from accessing a cross-origin frame.

Мы используем frame.contentWindow.location.href= https://parentApp.com/items для открытия страницы родительского приложения. Пожалуйста, подскажите, могу ли я использовать другую альтернативу для открытия страницы родительского приложения, например, у нас есть маршрутизация внутри приложения. Если iframe - единственное решение для этого, как мы можем этого добиться?

Answer 1

Предполагая, что у вас есть проблемы с внешним URL-адресом, используемым в iframe, вы можете использовать domsanitizer для очистки URL-адреса

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';
 @Pipe({ name: 'sanitize' })
   export class SanitizePipe implements PipeTransform {
     constructor(private domSanitizer: DomSanitizer) {}
      transform(url) {
       return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
      }
    } 

Добавьте этот канал в iframe в HTML

<iframe width="100" height="100" [src]="url | sanitize"></iframe>