Cross Domain Issue With Iframe In Angular2

We intend to access another app url which is hosted on the same machine, but on different port. So my Angular 2 application http://localhost:8081/app/ is trying to open a site host

Solution 1:

You have to return your URL as a trusted url using Dom sanitizer to bypass security. Here is what you can do:

In your html:

<iframe [src]='getSourceURL()'></iframe>

... and in your typescript:

import { DomSanitizer } from'@angular/platform-browser';

@Component({
    ....
})
exportclassYourComponent {      

    yourIFrameUrl: string;
    constructor(public sanitizer: DomSanitizer) { }

    getSourceURL() {
        returnthis.sanitizer.bypassSecurityTrustUrl(this.yourIFrameUrl);
    }
}