title: Iframe loading infinitely angular 2
body: <p>I am trying to create really simple Iframe in Angular 2 project. 
  <a href="https://stackblitz.com/edit/angular-b9xujy" rel="nofollow noreferrer">Code</a></p>
  
  <p>If I use raw url in iframe src, get an error <code>unsafe value used in a resource URL context</code></p>
  
  <pre><code>&lt;!-- 1) Error : unsafe value used in a resource URL context --&gt;
  &lt;iframe (load)="yourLoadFunction()" [src]="'/'" frameborder="0" width="1000px" height="500px"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>If I use <code>DomSanitizer.bypassSecurityTrustResourceUrl</code> for url sanitize, it works but Iframe load infinite time, strange hmmm. <a href="https://stackblitz.com/edit/angular-b9xujy" rel="nofollow noreferrer">Code (check console)</a> </p>
  
  <pre><code>&lt;!-- 2) Infinite loop Iframe loading  --&gt;
  &lt;iframe (load)="yourLoadFunction()" [src]="sanitizer.bypassSecurityTrustResourceUrl('/')" frameborder="0" width="1000px" height="500px"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>So, I have created pipe for url as below and it's working without issue </p>
  
  <p><code>safe-url.pipe.ts</code></p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';
  
  @Pipe({
    name: 'safeUrl'
  })
  export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
  }
  </code></pre>
  
  <p>HTML View </p>
  
  <pre><code> &lt;!-- 3)  Working with pipe --&gt;
   &lt;iframe (load)="yourLoadFunction()" [src]="'/' | safeUrl" frameborder="0" width="1000px" height="500px"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Now, I have questions </p>
  
  <ul>
  <li><p>Why is the error <code>unsafe value used in a resource URL context</code> in angular where plain html iframe works</p></li>
  <li><p>Why <code>DomSanitizer.bypassSecurityTrustResourceUrl</code> causing iframe to load infinitely but not <code>pipe</code> with same function</p></li>
  </ul>