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

Question

背景：

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

问题：

我遇到的问题是尝试在 iFrame 上设置 src 标签。我正在尝试使用 DomSanitationService 组件，但即使启用了此组件，我仍继续收到 "unsafe 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>

Answer 2

上面的代码对我有用，但是每次点击都不会打开视图，我的代码是-
这是view.ts页面

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

接下来是我的服务get_page.servise.js页面-

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

- 此页面的浏览量

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

只有一个问题，我的视图会在每次替代点击时加载。如何解决

Answer 3

经过大量谷歌搜索后，我开始自己解决问题。

这是我为让它工作所做的工作-

删除完成get_page.servise.js,
评论导入此文件

// 从“./get_page.service”导入{GetPageService}；
从构造函数中删除了 _gps:GetPageService,。
删除了ngOnInit()函数

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

最重要-

在构造函数中将所有 private 更改为 public as-

构造函数（public消毒剂：DomSanitizationService，public导航：导航控制器，导航参数：导航参数）

我的控制器是 --

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

查看页面还是一样-

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

希望这对你也有帮助。

Answer 4

创建简单管道并使用

@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>

注意：在app.module.ts

中导入SafeResourceUrlPipe

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

Angular2 unsafe resource URL in iFrame with DomSanitationService

iframe

components

angular

- 此页面的浏览量

在构造函数中将所有 private 更改为 public as-