title: Angular and Iframe does not redirect the right window
body: <p>We have an application in Angular where we need to redirect the user to the login page (when the user is not authenticated or when the token has expired).</p>
  
  <p>We use an HttpInterceptor to handle the 401 HTTP status code (the source code below was of course simplified to make it clearer)</p>
  
  <pre><code>@Injectable()
  export class AppHttpInterceptor implements HttpInterceptor {
    constructor(private router: Router, private inj: Injector, @Inject(DOCUMENT) private document: any) {
    }
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
  
          const headers = new HttpHeaders({
              'X-Requested-With': 'XMLHttpRequest',
          });
  
          const changedReq = req.clone({ headers, withCredentials: true });
  
          return next.handle(changedReq)
              .map((event: HttpEvent&lt;any&gt;) =&gt; {
                  return event;
              })
              .do(event =&gt; {
              })
              .catch((err: any, caught) =&gt; {
                  if (err instanceof HttpErrorResponse) {
                      switch (err.status) {
                          case 401:
                            this.document.location.href = &lt;external-url&gt; 
                            return Observable.throw(err);
                          default:
                            return Observable.throw(err);
                      }
                  } else {
                      return Observable.throw(err);
                  }
              });
      });
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Everything works fine when the application is launched from the browser with an URL like <code>https://localhost:4200</code></p>
  
  <p>But now, we need to include our application inside an iframe (we won't be the owner of the parent container).  </p>
  
  <p>In order to test our application inside an iframe, we have the following HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My Fake Portal&lt;/title&gt;
      &lt;base href="/"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;My Fake Portal&lt;/h1&gt;
      &lt;br/&gt;
      &lt;br/&gt;
  
      &lt;iframe width="100%" src="https://localhost:4200"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The integration works but when the HttpInterceptor tries to reach the login page with <code>this.document.location.href</code>, it redirects the browser instead of redirecting the iframe (and then destroy the parent container).</p>
  
  <p><code>this.document</code> should be the current document and not the top document of the DOM.  </p>
  
  <p>Does someone has an idea?</p>