带有DomSanitationService的iFrame中的Angular2不安全资源URL

Question

背景:

我正在研究一个过渡策略的概念证明,我们正在调查这个过程将把"旧的"webapp引入iFrame,同时我们将现有的功能转换为Angular.

问题:

我遇到的问题是尝试在iFrame上设置src标记.我正在尝试使用DomSanitationService组件,但即使启用此选项,我仍会收到"不安全的URL"错误消息.

码:

这是我现在拥有的; 我尝试在从服务接收URL后擦除组件中的URL.

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);
    }
}

错误:

platform-b​​rowser.umd.js:1900 ORIGINAL EXCEPTION:错误:资源URL上下文中使用的不安全值(请参阅http://g.co/ng/security#xss)

Answer 1

虽然可能有更好的解决方案,但这对我有用.

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>