Add Video Unsafe URL

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

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)

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 => {

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{{}}"frameborder="0" allowfullscreen></iframe>

Not sure what I’m missing

1 Like

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.

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?

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="" frameborder="0" allowfullscreen></iframe>

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

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:

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

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

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>


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

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(‘’+this.trailer['yv’]);
    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

1 Like

thanks perfectly worked