ปัญหาข้ามโดเมน Iframe ในแอปพลิเคชัน Angular 7

เรามีแท็บที่กำหนดเองภายในเว็บไซต์ของบุคคลที่สาม (ผู้ขาย) แท็บแบบกำหนดเองของเรามีรายการสินค้า เมื่อคลิกไปที่รายการใดรายการหนึ่ง เราจะต้องเปิดหน้าเว็บไซต์หลักซึ่งมีรายละเอียดของรายการนั้น ทั้งแอปพลิเคชันหลักและแอปพลิเคชันของเราเป็นแอปพลิเคชันเชิงมุม

เรากำลังใช้ 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