-1

We have our custom tab inside a website of third party(vendor). Our custom tab contains list of items. When clicked on a particular item, we need to open a page of parent website having the details of that item. Both parent application and our application are Angular applications.

We are using iframe to show the parent application page. But, since our application domain is different from parent application domain, we are getting error DOMException: Blocked a frame with origin "https://ourCustomTab.cloudfront.net" from accessing a cross-origin frame.

We are using frame.contentWindow.location.href= https://parentApp.com/items to open parent application page. Please suggest if I can use some other alternate to open parent app page, something like we have routing within an application. If iframe is the only solution to do that then how can we achive it?

vskjk
  • 55
  • 8

1 Answers1

0

Assuming that you have issues with the external URL used in an iframe, you can use domsanitizer to sanitize the 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);
      }
    }

Add this pipe to iframe in HTML

<iframe width="100" height="100" [src]="url | sanitize"></iframe>
Amod Shinde
  • 144
  • 9
  • Hi @Amod .. I have tried that but still the same issue. I have also tried postMessage() but it also didn't solve my issue. Getting the same error of cross-origin frame – vskjk Aug 05 '20 at 05:41