Pass Iframe src value in Ionic 4

Question

I'm tried to put a iframe inside Ionic page but with no success

the src comes from a json value

<iframe src="{{PostContent.link}}"></iframe>

I got an error

ERROR Error: unsafe value used in a resource URL context

Edit: I included my ts page ts page

import { Component, ViewChild } from '@angular/core';
import { ApiProvider } from '../../providers/api/api.service';
import {  ActivatedRoute } from '@angular/router';


  postid: string;
PostContent:any = [];
  theInAppBrowser: any;

  constructor(
        public api:ApiProvider,
private route: ActivatedRoute,

  ) {

    this.postid = this.route.snapshot.paramMap.get('id');

   }



   getPostContent(){


      this.api.get('doctor/' + this.postid  ).subscribe((data) => {
        this.PostContent = data;


        });


  }



 ngOnInit() {

    this.getPostContent();
}


}

you need to use DomSanitizer for iframe src. See https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-without-causing-unsafe-value-exception — Sergey Rudenko, Jan 02 '20 at 03:57
can you share the code with your attempt? then it is easy to help you — Sergey Rudenko, Jan 02 '20 at 04:00

cglegaspi · Answer 1 · 2020-01-02T12:45:13.050

You should to use DomSanitizer for displaying that URL. This will enable you to create an exception for displaying the URL you want in the iFrame.

You can create a new variable and assign it the sanitized value, then display it in the HTML like this:

Warning! Using bypassSecurityTrustResourceUrl might expose your page to XSS attacks. You should minimize and control this as much as possible. Check the documentation to ensure that you are protecting yourself properly when using DomSanitizer: https://angular.io/api/platform-browser/DomSanitizer

HTML

<iframe [src]="sanitizedURL"></iframe>

JS

  //Wherever you are setting the URL, use DomSanitizer. For example:

      var URL = this.PostContent.link;

      // Use sanitizer for URL
      this.sanitizedURL = this.domSanitizer.bypassSecurityTrustResourceUrl(URL);

Your JS full code, including new imports

    import { Component, ViewChild } from '@angular/core';
    import { ApiProvider } from '../../providers/api/api.service';
    import {  ActivatedRoute } from '@angular/router';

    //Import SafeResourceURL & DomSanitizer
    import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';

  @Component({
    selector: 'iFrameComponent',
    templateUrl: './iFrameComponent.component.html',
    styleUrls: ['./iFrameComponent.component.scss'],
  })

  export class iFrameComponent {

    //Declare URL variable
      sanitizedURL: SafeResourceUrl;

      postid: string;
     PostContent:any = [];
      theInAppBrowser: any;

      constructor(
            public api:ApiProvider,
            private route: ActivatedRoute,
            public domSanitizer: DomSanitizer,

      ) {

        this.postid = this.route.snapshot.paramMap.get('id');

       }



       getPostContent(){


          this.api.get('doctor/' + this.postid  ).subscribe((data) => {
            this.PostContent = data;

              //Set URL
              var URL = this.PostContent.link;

              // Use sanitizer for URL
              this.sanitizedURL = this.domSanitizer.bypassSecurityTrustResourceUrl(URL);


            });


      }

Still the same error `ERROR Error: Uncaught (in promise): Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)` — BabyDriver, Jan 02 '20 at 10:47
Can you do console.log(this.PostContent.link) to get a sample URL your app is generating and share it here? — cglegaspi, Jan 02 '20 at 11:13
I know its very annoying, but just another new error `TypeError: Cannot read property 'replace' of null` — BabyDriver, Jan 02 '20 at 11:53
Mmm this sounds like a different problem. Can you post the full error? I understand this is a build error, if you can paste the --verbose output it would be useful. — cglegaspi, Jan 02 '20 at 12:03
I think thats the dead end, I will use inAppbrowser instead of this headache, Thank you for your help .. I appreciate that so much — BabyDriver, Jan 02 '20 at 12:18
Good luck! Hope that solves it. Let me know if you try again ;) — cglegaspi, Jan 02 '20 at 12:47

score 0 · Answer 2 · answered Jan 02 '20 at 06:36

You need to use DomSanitizer for iframe src for that, you need to create a pipe using angular CLI

ng generate pipe safe

Open safe.pipe.ts file and paste code below:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

After that you just need to use safe pipe like this:

<iframe src="{{PostContent.link | safe: 'url'}}"></iframe>

Thank you guys alot , but still the same error `ERROR Error: Uncaught (in promise): Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)` — BabyDriver, Jan 02 '20 at 10:41
When you create a pipe first thing you should import that pipe in AppModule and declare that pipe in ngModule({ declaration: [ ] }) — Anwarul Islam, Jan 02 '20 at 11:05
yes off course , but I notice that in the console I found `The pipe 'safe' could not be found` — BabyDriver, Jan 02 '20 at 11:21

Pass Iframe src value in Ionic 4

2 Answers2