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

Question

背景:

我正在为我们正在研究的过渡策略进行概念验证，该策略将在我们致力于将现有功能转换为 Angular 的同时将“旧”网络应用程序引入 iFrame。

问题:

我遇到的问题是尝试在 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-browser.umd.js:1900 ORIGINAL EXCEPTION: Error: unsafe value used in a resource URL context (see 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>