Trusted video URL in iFrame in angular.

The following template allows users to enter a YouTube video ID and load the corresponding video in an.<iframe> The attribute<iframe src> is a resource URL security context, because an untrusted source can, for example, smuggle in file downloads that unsuspecting users could execute. So call a method on the controller to construct a trusted video URL, which causes Angular to allow binding into <iframe src>.


Html:

<h4>Resource URL:</h4> <p>Showing: {{dangerousVideoUrl}}</p> <p>Trusted:</p> <iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="videoUrl"></iframe> <p>Untrusted:</p> <iframe class="e2e-iframe-untrusted-src" width="640" height="390" [src]="dangerousVideoUrl"></iframe>

Component:

import { Component } from '@angular/core';

import { DomSanitizer } from '@angular/platform-browser';

@Component({

selector: 'app-iframe,

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [HttpfileService]

})

export class IframeComponent {

dangerousVideoUrl: string;

videoUrl: any;

constructor( private sanitizer: DomSanitizer ) {

this.vidiourl('t2ByLmLnYJ8');

}

vidiourl(id) {

this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;

this.videoUrl =

this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);

}

}