背景:
我正在为我们正在研究的过渡策略进行概念验证,该策略将在我们致力于将现有功能转换为 Angular 的同时将“旧”Web 应用程序引入 iFrame。
Issue:
我遇到的问题是尝试在 iFrame 上设置 src 标记。我正在尝试使用 DomSanitationService 组件,但即使启用了此组件,我仍然收到“不安全 URL”错误消息。
Code:
这是我目前拥有的;我尝试在组件从服务接收到 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);
}
}
Error:
platform-browser.umd.js:1900 原始异常:错误:不安全值
在资源 URL 上下文中使用(请参阅http://g.co/ng/security#xss http://g.co/ng/security#xss)
这对我有用,尽管可能有更好的解决方案。
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)