Add Video Unsafe URL

Ionic Framework ionic-v3
1

I’m trying to have “users” enter an embeded youtube link via alertcontroller promp box but I keep getting this error once they click save/add the video:

Runtime Error
Error in ./HomePage class HomePage - caused by: unsafe value used in a resource URL context

Stack
Error: unsafe value used in a resource URL context
at DomSanitizerImpl.sanitize

So what I’ve tried to do is something like this:

import { DomSanitizer } from '@angular/platform-browser';
...
constructor(public sanitizer: DomSanitizer)
....

addVideo(){
let prompt = this.alertCtrl.create({
  title: 'Video Information',
  message: 'Enter link to video.',
  inputs: [
  {
    name: 'link',
    placeholder: 'Link'
  }
  ],
  buttons: [
  {
    text: 'Cancel',
    handler: data => {
    console.log('Item Cancelled');
  }
  },
  {
  text: 'Save',
   handler: data => {
     this.videos.push({
     link: data.link
   });
   }
   }
   ]
   });
   prompt.present();
}

In my html I have

<ion-grid style="color:white">

  <ion-item *ngFor="let video of videos | async">
     <ion-row style="color:white">
       <ion-col text-center center>
            <iframe width="100%" height="320" src="sanitizer.bypassSecurityTrustResourceUrl{{video.link}}"frameborder="0" allowfullscreen></iframe>
      </ion-col>
    </ion-row>
  </ion-item>
</ion-grid>

Not sure what I’m missing

1 Like
2

Looks like you’re missing some square brackets around [src] and parentheses around the argument to bypassSecurityTrustResourceUrl(), but I wouldn’t be calling that in the template anyway. The template shouldn’t know or care about that. Call that in the controller and just bind [src]="saniVideoLink" in the template.

3

FYI: Angular automatically sanitizes innerHTML (and similar things) to protect against XSS. You can turn that off for specific situations, but it can be a security risk. Can you use a Social Sharing plugin instead of accepting characters?

4

How can I just turn it off?
Even without adding the sanitizer I still get that unsafe value. So I added it in and I get the same thing.

      <iframe width="100%" height="320" src="https://www.youtube.com/embed/ibKf66tVoFw" frameborder="0" allowfullscreen></iframe>

This works…idk why “MY” way is breaking everything.

5

The unsafe warnings are there for obvious security reasons. Just use the sanitizer to make the unsafe warnings go away. Here’s a simple tutorial:

https://learnionic2.com/2017/03/16/embed-youtube-videos-ionic-2-application/

6

@luukschoen
See that would work if I have pre-defined links. I want a user to type one in and have it be safe

@rapropos
I’m a tad confused what you’re saying but you said I should bind the [src] in the template. Can you explain.

7

It was just an example. It isn’t that hard to let the user do the work.

Do something like this:

	getSafeUrl(url) {
		this.url = this.sanitizer.bypassSecurityTrustResourceUrl(url);		
	}

Then your iFrame should be something like this, like @rapropos suggested:

<iframe width="100%" height="320" [src]="url" frameborder="0" allowfullscreen></iframe>

2 Likes
8

I have done exacly like you have told but issue still persists.

9

I figured it out

  1. In your component add
    import { DomSanitizer } from ‘@angular/platform-browser’;

  2. then in the method use
    this.youtubeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(‘https://www.youtube.com/embed/’+this.trailer['yv’]);
    NOTE:
    Sanitizer provides different methods. In order for it to work with urls you need to use bypassSecurityTrustResourceUrl

  3. then in the html template
    iframe class=“embed-responsive-item” [src]=“youtubeSrc” allowfullscreen

Thants it

2 Likes
10

thanks perfectly worked