Как можно санировать этот URL для встроенной веб-страницы на странице Ionic 3?

Question

У меня есть страница в ionic 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>

Однако все методы, которые я попробовал, заканчиваются тем же результатом.И ошибка, сообщающая, что URL-адрес небезопасен

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-адреса.

// 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';
}

Любая идеякак мне обойти эту очень полезную охрану?

Answer 1

Я дам вам решение для второго метода, который вы опробовали: , создающего очищенную переменную и ссылающегося на него в 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);
    }

}

Попробуйте указанные выше изменения, и это будет работать.