1

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 hosted on same server but different port i.e. localhost:9100

We are trying to access following url in an iframe
url = http://localhost:9100/custom/getCustomPage

<iframe id="customFrame" *ngIf="url !== null" frameborder="0" [src]="url"></iframe>

Error on Chrome/Firefox DOMException: Blocked a frame with origin "http://localhost:9100" from accessing a cross-origin frame. at http://localhost:9100/custom/getCustomPage Where Host:localhost:9100 Referer:http://localhost:8081/app/

I have added below headers to Response Filter:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, Content-Type
Access-Control-Allow-Methods:GET, POST, DELETE, PUT
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers: content-length, Allow

Please help me identify a workaround so that iFrame allows to display the results.

This is currently working fine in IE 11.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Ritika Bhatnagar
  • 11
  • 1
  • 1
  • 3

1 Answers1

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({
    ....
})
export class YourComponent {      

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

    getSourceURL() {
        return this.sanitizer.bypassSecurityTrustUrl(this.yourIFrameUrl);
    }
}
FAISAL
  • 33,618
  • 10
  • 97
  • 105
  • Thanks Faisal, I have used DOMSanitizer to bypass security. However the Error occurs in response page wherever it is trying to make reference to window.parent locale: window.parent.dojo? window.parent.dojo.locale : 'en' – Ritika Bhatnagar Nov 30 '17 at 09:43
  • 3
    I could not make it work using `this.sanitizer.bypassSecurityTrustUrl` but `this.sanitizer.bypassSecurityTrustResourceUrl` did the job. – clds Jul 23 '18 at 20:15