2

I have an iframe that should load external content. The problem is that my Angular application is hosted on 

http//mydomain

And the iframe loads src url is 

http://mydomain/external

I really need the domains to be the same for CORS reason because I want to manipulate the iframe content.

The problem is taht Angular router catches the route and throws an error 

Cannot match any routes. URL Segment: 'external'

I've sanitized the url of the iframe in my component with the following method

bypassSecurityTrustResourceUrl()

I don't know how to bypass angular router or to load my content.

Any help would be appreciated.

thanks

vcial
  • 257
  • 1
  • 3
  • 13

2 Answers2

0

I hope it help.

Html

<iframe class="iframeSomeStyle" [src]="safeUrl"></iframe>

Ts

safeUrlCheck(url) {
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
Batbayr Batmunkh
  • 76
  • 6
  • that's exactly what I've done, sorry for not having added my code, I'm going to complete my question. The problem is really that the router is cathing the url – vcial Feb 27 '20 at 12:30
0

I have this issue using an iframe to initiate a file download. For some reason when the origins match Angular is routing the iframe URL.

I've had success setting the iframe as a sandbox:

<iframe class="iframeSomeStyle" [src]="safeUrl" sandbox="allow-downloads"></iframe>

Unfortunately Safari is the only browser that does not support the "allow-downloads" option. So it does not work there.

~~Update~~

I have since found out my issue was with the Angular Service Worker intercepting outgoing requests from my iframe. The Service Worker was responding with a cached version of my App which causes the App to load within the iframe.

The solution was simple. I just need to add the ?ngsw-bypass=true query param onto the end of the URL that I was setting as the iframe src. This query param bypasses the Service Worker and is correctly handled by the server instead.

Robert
  • 3
  • 2