代码之家  ›  专栏  ›  技术社区  ›  BIBD

我如何为爱奥尼亚3页面中的嵌入式网页清理此URL?

  •  2
  • BIBD  · 技术社区  · 6 年前

    我在爱奥尼亚3有一个网页,里面有一个嵌入式网页。

    ionic (Ionic CLI) : 3.9.2
    Ionic Framework    : ionic-angular 3.9.2
    

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

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

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

    你知道我怎样才能避开这个非常有用的安全措施吗?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Sudarshana Dayananda    6 年前

    .

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