Can't switch between 2 pages using iframes in ionic

Question

I have 2 pages using iframes. I can switch from these pages to other pages. But I can't switch between 2 pages using iframes. The application stops and does not respond at all. I cannot access other pages.

First iframe1.html:

<ion-content overflow-scroll="true" style="height: 1024px;">  
  <iframe [src]="exampleUrl" class= 'webPage' name= "eventsPage" id="frm01" style="width:100%;min-height:1024px;" frameborder="0" allowfullscreen></iframe>
</ion-content>

iframe1.ts:

this.exampleUrl= this._sanitizer.bypassSecurityTrustResourceUrl("http://example.com?val="+this.val1);

Second iframe2.html:

<ion-content overflow-scroll="true" style="height: 1024px;">  
  <iframe [src]="exampleUrl" class= 'webPage' name= "eventsPage" id="frm01" style="width:100%;min-height:1024px;" frameborder="0" allowfullscreen></iframe>
</ion-content>

iframe2.ts:

this.exampleUrl= this._sanitizer.bypassSecurityTrustResourceUrl("http://example.com?val2="+this.val2);

For example: I have 5 pages. apage, bpage, cpage, iframe1, iframe2

I can navigate to all pages from apage, bpage and cpage with the menu.

I can access other pages from iframe1 and iframe2. But when I try to go from iframe1 to iframe2, the image and link of iframe1 remain on the screen. After that I can't login to apage, bpage and cpage. I have to refresh the screen. How can I solve this problem? Can I turn off iframe on page translations?

Answer 1

Doing that it seems me you reached out the Content-Security-Policy rules. The iFrames means external pages from the web, so you are trying to do unsafe navigations to outside of your App and can't return back. If you have control over the links you are opening you can put over there Deeplinks pointing for your App to certain pages or products that you want. For security reasons you can also substitute the iFrames by using In App Browser to open external pages inside your app, it is allowed by the Google and Apple Stores.