title: How can I sanitize this URL for an embedded webpage in an Ionic 3 page?
body: <p>I have a page in ionic 3, that has an embedded webpage in it.</p>
  
  <pre><code>ionic (Ionic CLI) : 3.9.2
  Ionic Framework    : ionic-angular 3.9.2
  </code></pre>
  
  <p>I'd like to pass the URL into it instead of hard coding it as I've done here:</p>
  
  <pre><code>//myPage.html
  &lt;ion-header&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
      &lt;iframe class='webPage' name="samplePage" src="https://www.example.com"&gt;
      &lt;/iframe&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>However, all the methods I've tried end up with the same result. And error complaining that the URL is not safe </p>
  
  <pre><code>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#)
  </code></pre>
  
  <p>Or something similar along that theme.</p>
  
  <p>I've tried calling a function that returns a sanitize copy of the URL.</p>
  
  <pre><code>// myPage.html
  &lt;ion-content padding&gt;
      &lt;iframe [class]="webPage" [name]="samplePage" [src]="getSafeSupportURL()"&gt;
      &lt;/iframe&gt;
  &lt;/ion-content&gt;
  
  //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');
    }
  
  }
  </code></pre>
  
  <p>I've tried creating a sanitized variable and referencing that in the HTML</p>
  
  <pre><code>// myPage.html
  //...
  &lt;ion-content padding&gt;
      &lt;iframe [class]="webPage" [name]="samplePage" [src]={{cleanSupportURL}}&gt;
      &lt;/iframe&gt;
  &lt;/ion-content&gt;
  
  //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
  }
  </code></pre>
  
  <p>I've even tried sanitizing it in the HTML</p>
  
  <pre><code>// myPage.html
  //...
  &lt;ion-content padding&gt;
      &lt;iframe [class]="webPage" 
              [name]="samplePage" 
              [src]="sanitizer.bypassSecurityTrustResourceUrl{{myURL}}"&gt;
      &lt;/iframe&gt;
  &lt;/ion-content&gt;
  
  //myPage.ts
  //...
  myURL: any;
  
  constructor(public navController: NavController, 
      public navParams: NavParams, 
      private sanitizer: DomSanitizer) {
     this.myURL = 'https://example.com';
  }
  </code></pre>
  
  <p>Any idea how I can get around this very helpful security?</p>