title: How to use Iframe in angular 7
body: <p>I am using Iframe to set external URL in a HTML using below methods:</p>
  
  <p>Method 1:</p>
  
  <pre><code> &lt;iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(srcUrl)" height="600" width="1000"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Method 2:  In this method I also created a Safe PIPE using <a href="https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-without-causing-unsafe-value-exception/38037914#38037914">How to set &lt;iframe src=&quot;...&quot;&gt; without causing `unsafe value` exception?</a></p>
  
  <pre><code> &lt;iframe width="100%" height="300" [src]="srcUrl | safe"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Method 3:</p>
  
  <pre><code> &lt;iframe #iframe height="600" width="1000"&gt;&lt;/iframe&gt; 
    @ViewChild('iframe') iframe: ElementRef;
  ngAfterViewInit() {
      this.iframe.nativeElement.setAttribute('src', this.srcUrl);
  }
  </code></pre>
  
  <p>But none is working for me. I am getting below error:</p>
  
  <p>Refused to display '' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' ".</p>
  
  <p>Please find my code at below link :</p>
  
  <p><a href="https://stackblitz.com/edit/angular-irwasj?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-irwasj?file=src%2Fapp%2Fapp.component.html</a>
  Can anyone please help in it?    </p>