Angular2 unsafe resource URL in iFrame with DomSanitationService
<p><strong>Background:</strong></p>

<p>I'm working on a proof of concept for a transition strategy we're investigating that will pull in the "old" webapp into an iFrame while we work on converting existing functionality to Angular. </p>

<p><strong>Issue:</strong></p>

<p>The issue I'm having is trying to set the src tag on an iFrame. I'm attempting to use the DomSanitationService component, but I continue to get the "unsafe URL" error message even with this enabled.</p>

<p><strong>Code:</strong></p>

<p>Here is what I currently have; I have attempted to scrub the URL in the component after it receives the URL from a service.</p>

<p><em>http.component.ts</em></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';
import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';
@Component({
    selector: 'http-frame',
    template: `
        &lt;h1&gt;Angular Frame&lt;/h1&gt;
        &lt;iframe [src]='page'&gt;&lt;/iframe&gt;
  `,
    providers: [
        HttpService,
        DomSanitizationService
    ]
})
export class HttpComponent implements OnInit {
    page:string = '';
    constructor(
        private httpService: HttpService,
        private sanitizer: DomSanitizationService
    ) {};
    ngOnInit(){
        this.httpService.getPage()
            .then(page =&gt; {
                console.log(page);
                this.page = this.sanitizer.bypassSecurityTrustResourceUrl(page);
                console.log(this.page);
            });

    }
}
</code></pre>

<p><em>http.service.ts</em></p>

<pre><code>import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class HttpService {

    private url = "https://www.google.com";
    private retryCount = 2;
    // See the "Take it slow" appendix

    constructor(private http: Http) {}

    getPage(){
        return Promise.resolve(this.url);
    }
}
</code></pre>

<p><strong>Error:</strong></p>

<blockquote>
  <p>platform-browser.umd.js:1900 ORIGINAL EXCEPTION: Error: unsafe value
  used in a resource URL context (see <a href="http://g.co/ng/security#xss" rel="noreferrer">http://g.co/ng/security#xss</a>)</p>
</blockquote>