CODEWITHSUNDEEP
angular
Hitesh
Hitesh

Reputation: 1228

How to use Iframe in angular 7

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?

Upvotes: 3

Views: 18186

Answers (1)

Sudipto Mukherjee
Sudipto Mukherjee

Reputation: 945

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

Upvotes: 6

Related Questions