Angular2 unsafe resource URL in iFrame with DomSanitationService

Question

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)

Answer 1

create simple pipe and use

@Pipe({
 name: 'safeResourceUrl'
})
export class SafeResourceUrlPipe implements PipeTransform {
 constructor(private sanitized: DomSanitizer) {}
  transform(value: string) {
   return this.sanitized.bypassSecurityTrustResourceUrl(value);
  }
}

<iframe [src]="youtubeUrl | safeResourceUrl"></iframe>

note : import SafeResourceUrlPipe in app.module.ts

Answer 2

after doing a lot of googling, I came to solve my issue by self.

here is waht I did to get it working-

1. Remove complete get_page.servise.js,

2. commented import of this file

   // import {GetPageService} from "./get_page.service";

3. Removed _gps: GetPageService, from constructor.

4. removed ngOnInit() function

---

ngOnInit() {
    this._gps.getPage().subscribe(
        (data)=>{
          this.page = this.sanitizer.bypassSecurityTrustResourceUrl(data);
          //console.log(this.page);
        }
    )
  }

5. Most important-

   Change all private as public in constructor as-

   constructor( public sanitizer: DomSanitizationService, public nav: NavController, navParams: NavParams )

My controller is as --

import {SafeResourceUrl, DomSanitizationService} from '@angular/platform-browser';
import { NavController, NavParams } from 'ionic-angular';
import { Component, ViewChild } from '@angular/core';
import { Http } from '@angular/http';
import { Slides } from 'ionic-angular';


@Component({
  templateUrl: 'build/pages/view/view.html',
})

export class ViewPage {

  //url: any;
  page: any;
  @ViewChild('mySlider') slider: Slides;

  constructor( public sanitizer: DomSanitizationService, public nav: NavController, navParams: NavParams ) {
    let url = navParams.get('url');
    this.page = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    // this.url = navParams.get('url'); 
    // console.log(this.url);
  }
}

View page is still same as-

<iframe class= "webPage" [src]='page' width="100%" height="250" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

Hope this will help you too.

Answer 3

This above code is working for me but view do not get open on each click, My code is as-
this is view.ts page

import {DomSanitizationService} from '@angular/platform-browser';
import { NavController, NavParams } from 'ionic-angular';
import { Component, OnInit } from '@angular/core';
import {GetPageService} from "./get_page.service";
import { Http } from '@angular/http';


@Component({
  templateUrl: 'build/pages/view/view.html',
  providers: [GetPageService]
})

export class ViewPage {

  //url: any;
  page: any;

  constructor(private _gps: GetPageService, private sanitizer: DomSanitizationService, private nav: NavController, navParams: NavParams ) {

    // this.url = navParams.get('url'); 
    // console.log(this.url);
  }

  ngOnInit() {
    this._gps.getPage().subscribe(
        (data)=>{
          this.page = this.sanitizer.bypassSecurityTrustResourceUrl(data);
          //console.log(this.page);
        }
    )
  }
}

Next is my service get_page.servise.js page-

import { NavController, NavParams } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from "rxjs/Rx";
import { ViewPage } from '../view/view';

@Injectable()
export class GetPageService {

    private url;
    private retryCount = 0;
// Don't know what is use of this count, tried with 1200/ 100/ 12000/ 900 etc. 

    constructor(private _http: Http, navParams: NavParams) {

      this.url = navParams.get('url');
    }

    getPage(){
      return this._http.get(this.url)
        .retry(this.retryCount)
        .map((res) => {
            return res.url;
        })
        .catch((err)=>{
        let errMsg = (err.error) ? err.errmsg : err;
            console.error(errMsg);
            return Observable.throw(errMsg);
        })
    }
}

- View of this page

<iframe class= "webPage" [src]='page' width="100%" height="250" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

There is only one issue that, my view get loaded on each alternative click. How to solve it

Answer 4

This worked for me, though there might be a better solution.

home.component.ts

import { Component, OnInit } from '@angular/core';
import {GetPageService} from "../services/get_page.service";
import {DomSanitizationService, SafeResourceUrl} from     "@angular/platform-browser";

@Component({
  moduleId: module.id,
  selector: 'sd-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css'],
  directives: [],
  providers: [GetPageService]
})
export class HomeComponent implements OnInit {
  page:SafeResourceUrl;

  constructor(private _gps: GetPageService,private sanitizer: DomSanitizationService) {}

  ngOnInit() {
    this._gps.getPage().subscribe(
        (data)=>{
          this.page = this.sanitizer.bypassSecurityTrustResourceUrl(data);
        }
    )

  }
}

get_page.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from "rxjs/Rx";

@Injectable()
export class GetPageService {

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

    constructor(private _http: Http) {}

    getPage(){
        return this._http.get(this.url)
            .retry(this.retryCount)
            .map((res) => {
                return res.url;
            })
            .catch((err)=>{
            let errMsg = (err.error) ? err.errmsg : 'Unknown Error';
                console.error(errMsg);
                return Observable.throw(errMsg);
            })
    }
}

home.component.html

<iframe [src]='page'></iframe>