Background:
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.
Issue:
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.
Code:
Here is what I currently have; I have attempted to scrub the URL in the component after it receives the URL from a service.
http.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';
import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';
@Component({
selector: 'http-frame',
template: `
<h1>Angular Frame</h1>
<iframe [src]='page'></iframe>
`,
providers: [
HttpService,
DomSanitizationService
]
})
export class HttpComponent implements OnInit {
page:string = '';
constructor(
private httpService: HttpService,
private sanitizer: DomSanitizationService
) {};
ngOnInit(){
this.httpService.getPage()
.then(page => {
console.log(page);
this.page = this.sanitizer.bypassSecurityTrustResourceUrl(page);
console.log(this.page);
});
}
}
http.service.ts
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);
}
}
Error:
platform-browser.umd.js:1900 ORIGINAL EXCEPTION: Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)