我有离子3页,已在它的内嵌网页。
ionic (Ionic CLI) : 3.9.2
Ionic Framework : ionic-angular 3.9.2
我想URL传递到它,而不是硬编码它,因为我在这里所做的:
//myPage.html
<ion-header>
</ion-header>
<ion-content padding>
<iframe class='webPage' name="samplePage" src="https://www.example.com">
</iframe>
</ion-content>
然而,所有的方法我试过结束了相同的结果。和错误抱怨网址是不是安全
ERROR Error: Required a safe ResourceURL, got a URL (see http://g.co/ng/security#xss)
at DomSanitizerImpl.checkNotSafeValue (platform-browser.js:4523)
at DomSanitizerImpl.sanitize (platform-browser.js:4505)
at setElementProperty (core.js:10795)
at checkAndUpdateElementValue (core.js:10715)
at checkAndUpdateElementInline (core.js:10649)
at checkAndUpdateNodeInline (core.js:13931)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckRenderNodeFn (core.js:14750)
at Object.eval [as updateRenderer] (myPage.html:line#)
或沿这个主题类似的东西。
我试过调用返回的URL的副本的sanitize的功能。
// myPage.html
<ion-content padding>
<iframe [class]="webPage" [name]="samplePage" [src]="getSafeSupportURL()">
</iframe>
</ion-content>
//myPage.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
@IonicPage()
@Component({
selector: 'page-websupport',
templateUrl: 'myPage.html',
})
export class WebsupportPage {
cleanSupportURL: any;
constructor(public navController: NavController,
public navParams: NavParams,
private sanitizer: DomSanitizer) {
}
getSafeSupportURL():SafeUrl {
return this.sanitizer.bypassSecurityTrustUrl('https://example.com');
}
ionViewDidLoad() {
console.log('ionViewDidLoad WebsupportPage');
}
}
我试着建立一个消毒变量和引用,在HTML
// myPage.html
//...
<ion-content padding>
<iframe [class]="webPage" [name]="samplePage" [src]={{cleanSupportURL}}>
</iframe>
</ion-content>
//myPage.ts
//...
cleanSupportURL: any;
constructor(public navController: NavController,
public navParams: NavParams,
private sanitizer: DomSanitizer) {
this.cleanSupportURL =
this.sanitizer.bypassSecurityTrustUrl('https://example.com');
// also tried bypassSecurityTrustResourceUrl
}
我甚至试过在HTML消毒它
// myPage.html
//...
<ion-content padding>
<iframe [class]="webPage"
[name]="samplePage"
[src]="sanitizer.bypassSecurityTrustResourceUrl{{myURL}}">
</iframe>
</ion-content>
//myPage.ts
//...
myURL: any;
constructor(public navController: NavController,
public navParams: NavParams,
private sanitizer: DomSanitizer) {
this.myURL = 'https://example.com';
}
任何想法,我怎么能解决这个问题非常有帮助的安全性?
我会给你你已经尝试第二种方法被创造消毒变量和引用,在HTML的解决方案。
如下更改myPage.html下。
<ion-content padding>
<iframe [class]="webPage" [name]="samplePage" [src]="cleanSupportURL">
</iframe>
</ion-content>
更改MyPage.ts如下。
import { DomSanitizer } from "@angular/platform-browser";
export class MyPage {
private cleanSupportURL: any;
sanitizer: DomSanitizer;
url: string = "https://example.com";
constructor(sanitizer: DomSanitizer) {
this.sanitizer = sanitizer;
this.cleanSupportURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}
}
尝试上述变化,它会工作。