Masalah lintas domain Iframe di Aplikasi Angular 7

Kami memiliki tab khusus di dalam situs web pihak ketiga (vendor). Tab khusus kami berisi daftar item. Saat mengklik item tertentu, kita perlu membuka halaman situs induk yang berisi detail item tersebut. Baik aplikasi induk maupun aplikasi kita adalah aplikasi Angular.

Kami menggunakan iframe untuk menampilkan halaman aplikasi induk. Namun, karena domain aplikasi kami berbeda dengan domain aplikasi induk, kami mendapatkan kesalahan DOMException: Blocked a frame with origin "https://ourCustomTab.cloudfront.net" from accessing a cross-origin frame.

Kami menggunakan frame.contentWindow.location.href= https://parentApp.com/items untuk membuka halaman aplikasi induk. Tolong sarankan jika saya dapat menggunakan alternatif lain untuk membuka halaman aplikasi induk, seperti kita memiliki perutean dalam suatu aplikasi. Jika iframe adalah satu-satunya solusi untuk melakukan hal itu, lalu bagaimana kita dapat mencapainya?


javascript angular iframe
person vskjk    schedule 05.08.2020    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Dengan asumsi Anda memiliki masalah dengan URL eksternal yang digunakan dalam iframe, Anda dapat menggunakan domsanitizer untuk membersihkan 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);
      }
    }

Tambahkan pipa ini ke iframe dalam HTML

<iframe width="100" height="100" [src]="url | sanitize"></iframe>
person Amod Shinde    schedule 05.08.2020
comment
Hai @Amod .. Saya sudah mencobanya tetapi masih mengalami masalah yang sama. Saya juga telah mencoba postMessage() tetapi juga tidak menyelesaikan masalah saya. Mendapatkan kesalahan yang sama pada bingkai lintas asal - person vskjk; 05.08.2020