我怎样才能消毒这个网址在离子3页的嵌入式网页?

问题描述 投票:2回答:1

我有离子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';
}

任何想法,我怎么能解决这个问题非常有帮助的安全性?

ionic-framework ionic3
1个回答
2
投票

我会给你你已经尝试第二种方法被创造消毒变量和引用,在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);
    }

}

尝试上述变化,它会工作。

© www.soinside.com 2019 - 2024. All rights reserved.