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

У нас есть собственная вкладка на веб-сайте третьей стороны (поставщика). Наша пользовательская вкладка содержит список элементов. При нажатии на определенный элемент нам нужно открыть страницу родительского веб-сайта с подробной информацией об этом элементе. И родительское приложение, и наше приложение являются приложениями 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 — единственное решение для этого, то как мы можем этого добиться?


javascript angular iframe
person vskjk    schedule 05.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что у вас есть проблемы с внешним 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>
person Amod Shinde    schedule 05.08.2020
comment
Привет @Amod .. Я пробовал это, но все еще та же проблема. Я также пробовал postMessage(), но это также не решило мою проблему. Получение той же ошибки кадра перекрестного происхождения - person vskjk; 05.08.2020