2

I am using Iframe to set external URL in a HTML using below methods:

Method 1:

 <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(srcUrl)" height="600" width="1000"></iframe>

Method 2: In this method I also created a Safe PIPE using How to set <iframe src="..."> without causing `unsafe value` exception?

 <iframe width="100%" height="300" [src]="srcUrl | safe"></iframe>

Method 3:

 <iframe #iframe height="600" width="1000"></iframe> 
  @ViewChild('iframe') iframe: ElementRef;
ngAfterViewInit() {
    this.iframe.nativeElement.setAttribute('src', this.srcUrl);
}

But none is working for me. I am getting below error:

Refused to display '' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' ".

Please find my code at below link :

https://stackblitz.com/edit/angular-irwasj?file=src%2Fapp%2Fapp.component.html Can anyone please help in it?

Hitesh
  • 1,188
  • 5
  • 30
  • 52
  • post the error you'r getting or create a stackblitz of your problem – jitender Oct 11 '19 at 04:14
  • Hi I have edited my question with error message. – Hitesh Oct 11 '19 at 04:26
  • can i get the example url that you are trying to access?as per this [SO post](https://stackoverflow.com/a/38269964/5621827) there are setting on the other end and you can't access that url in iframe but we can try other way – jitender Oct 11 '19 at 04:28
  • I am using srcUrl: string = "https://stackoverflow.com/". also upadated quation with Stackblitz link. – Hitesh Oct 11 '19 at 04:34
  • as specified in above post you can't do that other alternative to get and use as html will also fail because of `CORS` policy – jitender Oct 11 '19 at 04:47

1 Answers1

5

I was looking into this. Few website like google, stackoverflow, youtube denies to load inside an iframe. It uses some sort of FrameKiller. If you use https://www.google.com it will show google.com refuse to connect. Other sites like stackoverflow simply doesn't show any message. I have created a demo for the same that loads some other random site with https.

DEMO: https://stackblitz.com/edit/angular-gzvckb

Sudipto Mukherjee
  • 807
  • 6
  • 11