带有 DomSanitationService 的 iFrame 中的 Angular2 不安全资源 URL [英] Angular2 unsafe resource URL in iFrame with DomSanitationService

问题描述

背景:

我正在为我们正在研究的过渡策略进行概念验证，该策略将在我们将现有功能转换为 Angular 的同时将旧"webapp 引入 iFrame.

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.

问题:

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

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.

代码:

这是我目前拥有的；在组件从服务接收 URL 后，我尝试清理组件中的 URL.

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

错误:

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

platform-browser.umd.js:1900 ORIGINAL EXCEPTION: Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

推荐答案

这对我有用，尽管可能有更好的解决方案.

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

home.component.ts

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

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

home.component.html

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

这篇关于带有 DomSanitationService 的 iFrame 中的 Angular2 不安全资源 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！