iframe not working in angular 5 it is showing the html contents

Question

Here is the content that showing, i am trying to display the youtube content on my website but its not showing

Here the html that displaying on the browser

<iframe width="480" height="270" src="https://www.youtube.com/embed/HK6B2da3DPA?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

Im using the following to bind that value:

<div class="text-center"> {{articleDatils.raw_content_path}} </div>

You'll need to bind to the `innerHTML` property. Take a look at https://stackoverflow.com/questions/34585453/how-to-bind-raw-html-in-angular2 — user184994, Jul 15 '18 at 18:56
You need to convert it to safe HTML as well. https://stackblitz.com/edit/angular-kz5t67?file=src%2Fapp%2Fapp.component.ts — user184994, Jul 15 '18 at 19:04
Possible duplicate of [How to bind raw html in Angular2](https://stackoverflow.com/questions/34585453/how-to-bind-raw-html-in-angular2) — Daniel B, Jul 15 '18 at 20:54

score 3 · Answer 1 · answered Jun 26 '19 at 05:28

You need to sanitize the URL before using it in iframe. This need to be done beacause it helps to prevent Cross Site Scripting, i.e. it prevents attackers from injecting malicious client-side scripts into web pages, which is often referred to as Cross-site Scripting or XSS.

This method worked for me:

Import this header file:

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

I created a function as:

getUrl(post)
{
  return this.sanitizer.bypassSecurityTrustResourceUrl('https://'+ post.url +'/');
}

Then in the template:

<div  class="iframe-container d-none d-lg-block">
   <iframe [src]='getUrl(post)'>
      <p>Your browser does not support iframes.</p>
   </iframe> 
</div>

You will need sanitizer: DomSanitizer; in your class definition — packmul3, Apr 18 '23 at 22:50

iframe not working in angular 5 it is showing the html contents

1 Answers1