1

I am trusting the URL with.. DomSanitizer as below:

myFunction(videoLoc:any):void { 
    videoLoc = this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc); 
}

but getting an error on console:

GET unsafe:myFunction(https://www.youtube.com/watch?v=c9F5kMUfFKk)

My HTML code is as below:

<tr *ngFor="let fetch of fetchApi.data.featured">
  <td>
     <video width="320" height="240" controls>                                                                                                                                              
     <source src=myFunction({{fetch.video_location}})>
     </video>
  </td>                                                                                                                                                                                                                                                                                                                                     
</tr>

That is the reason, I could not render my videos on an HTML page. What is the mistake that I am doing?

Ajay S
  • 48,003
  • 27
  • 91
  • 111
N Sharma
  • 33,489
  • 95
  • 256
  • 444

1 Answers1

0

Your template seems to be wrong, it should be

<source [src]="myFunction(fetch.video_location)">

and just return the videoLocation after sanitizing it

myFunction(videoLoc:any):void {
 return this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc);
}

or you can handle this with a Pipe,

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

and then,

  <source [src]="mfetch.video_location | safe">
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • I did this, but still getting an error of `TypeError: Cannot read property 'bypassSecurityTrustResourceUrl' of undefined at FetchApiComponent.push../src/app/fetch-api/fetch-api` – N Sharma Jun 11 '18 at 07:56
  • Again throwing an error with the use of pipe - `Uncaught Error: Template parse errors: The pipe 'safe' could not be found` – N Sharma Jun 11 '18 at 08:08
  • you need to add the pipe under providers in module.ts – Sajeetharan Jun 11 '18 at 08:08
  • did you create a pipe? – Sajeetharan Jun 11 '18 at 08:11
  • This is my code in component : `@Pipe({ name: 'safe' }) export class FetchApiComponent implements OnInit, PipeTransform { transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); }`. This is what I did in HTML : ` {{fetch.id | json}} {{fetch.video_location}} ` – N Sharma Jun 11 '18 at 08:14
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172873/discussion-between-sajeetharan-and-n-sharma). – Sajeetharan Jun 11 '18 at 08:15