title: Angular2 - Issue getting iframe.contentWindow successfully and error calling postMessage()
body: <p>I have an Angular 2 project and a NodeJs project. I have an iframe in Angular 2 app and I want to show NodeJS app in it. I would like to use postMessage() method from Angular2 to NodeJs and then reverse(from NodeJs to Angular2). Angular2 Address is <a href="http://localhost:3001" rel="nofollow noreferrer">http://localhost:3001</a> and NodeJs address is <a href="http://localhost:3005" rel="nofollow noreferrer">http://localhost:3005</a>.</p>
  
  <p>In Angular 2 I have a template in component like this;</p>
  
  <pre><code>template: `&lt;iframe id="ifrm" #ifrm [src]="iframeURL()" width="500" height="200"&gt; &lt;p&gt; Your browser does not support iframes&lt;/p&gt; &lt;/iframe&gt; `
  </code></pre>
  
  <p><hr>
  iframeURL() method body used in template;</p>
  
  <pre><code>iframeURL() {
   return this.sanitizer.bypassSecurityTrustResourceUrl('http://localhost:3005');
  }
  </code></pre>
  
  <p><hr>
  When I run the application I can see the page in iframe in Angular2. But when I want to get contentWindow of the iframe (code below), I get the explanation below (not error);</p>
  
  <pre><code>@ViewChild('ifrm') iframe: ElementRef;
  </code></pre>
  
  <blockquote>
    <p>Exception: DOMException: Blocked a frame with origin
    "<a href="http://localhost:3001" rel="nofollow noreferrer">http://localhost:3001</a>" from accessing a cross-origin frame.</p>
  </blockquote>
  
  <p><hr>
  When I use postMessage() method like below I get the exception; </p>
  
  <pre><code>this.iframe.nativeElement.contentWindow.postMessage('{}','http://localhost:3005');
  </code></pre>
  
  <blockquote>
    <p>Failed to execute 'postMessage' on 'DOMWindow': The target origin
    provided ('<a href="http://localhost:3005" rel="nofollow noreferrer">http://localhost:3005</a>') does not match the recipient
    window's origin ('<a href="http://localhost:3001" rel="nofollow noreferrer">http://localhost:3001</a>').</p>
  </blockquote>
  
  <p><hr>
  By the way I am opening this component page using angular routing.
  Whole component code is below:</p>
  
  <pre><code>import {Component, OnInit, ElementRef} from '@angular/core';
  import {DomSanitizer} from '@angular/platform-browser'
  import {ViewChild} from "@angular/core/src/metadata/di";
  
  @Component({
      selector: 'app',
      template: `&lt;div&gt; &lt;iframe id="ifrm" #ifrm [src]="iframeURL()" width="500" height="200" style="/*display:none;*/"&gt; &lt;p&gt; Your browser does not support iframes&lt;/p&gt; &lt;/iframe&gt; &lt;/div&gt;`
  })
  export class AppComponent implements OnInit{
      constructor(private sanitizer: DomSanitizer){}
  
      @ViewChild('ifrm') iframe: ElementRef;
  
      ngOnInit(){
          console.log(this.iframe.nativeElement.contentWindow);
          this.iframe.nativeElement.contentWindow.postMessage('{}', 'http://localhost:3005');
      }
  
      iframeURL() {
          return this.sanitizer.bypassSecurityTrustResourceUrl('http://localhost:3005');
      }
  }
  </code></pre>